83 lines
2.3 KiB
Dart
83 lines
2.3 KiB
Dart
import 'package:didvan/config/theme_data.dart';
|
|
import 'package:didvan/constants/app_icons.dart';
|
|
import 'package:flutter/material.dart';
|
|
|
|
class SearchField extends StatefulWidget {
|
|
final String title;
|
|
final void Function(String? value) onChanged;
|
|
|
|
const SearchField({Key? key, required this.title, required this.onChanged})
|
|
: super(key: key);
|
|
|
|
@override
|
|
State<SearchField> createState() => _SearchFieldState();
|
|
}
|
|
|
|
class _SearchFieldState extends State<SearchField> {
|
|
final FocusNode _focusNode = FocusNode();
|
|
|
|
@override
|
|
void initState() {
|
|
_focusNode.addListener(() {
|
|
setState(() {});
|
|
});
|
|
super.initState();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Container(
|
|
height: 40,
|
|
decoration: BoxDecoration(
|
|
color: _fillColor(),
|
|
),
|
|
child: TextField(
|
|
focusNode: _focusNode,
|
|
style: Theme.of(context).textTheme.bodyText1,
|
|
textAlignVertical: TextAlignVertical.center,
|
|
onChanged: widget.onChanged,
|
|
keyboardType: TextInputType.text,
|
|
textInputAction: TextInputAction.search,
|
|
decoration: InputDecoration(
|
|
focusedBorder: OutlineInputBorder(
|
|
borderRadius: const BorderRadius.all(
|
|
Radius.circular(4),
|
|
),
|
|
borderSide: BorderSide(
|
|
color: Theme.of(context).colorScheme.primary,
|
|
),
|
|
),
|
|
prefixIcon: const Icon(
|
|
DidvanIcons.search_regular,
|
|
),
|
|
prefixIconColor: Theme.of(context).colorScheme.inputText,
|
|
enabledBorder: OutlineInputBorder(
|
|
borderRadius: const BorderRadius.all(
|
|
Radius.circular(4),
|
|
),
|
|
borderSide: BorderSide(
|
|
color: Theme.of(context).colorScheme.border,
|
|
),
|
|
),
|
|
fillColor: Colors.red,
|
|
contentPadding: const EdgeInsets.only(
|
|
left: 12,
|
|
right: 12,
|
|
),
|
|
border: InputBorder.none,
|
|
hintText: 'جستجو مطلب در ${widget.title}',
|
|
hintStyle:
|
|
TextStyle(color: Theme.of(context).colorScheme.disabledText),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Color _fillColor() {
|
|
if (_focusNode.hasFocus) {
|
|
return Theme.of(context).colorScheme.surface;
|
|
}
|
|
return Theme.of(context).colorScheme.surface;
|
|
}
|
|
}
|