bachelor/wonders
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Apply a max width to search box

Browse Source
This commit is contained in:
Shawn 2022-10-07 11:29:28 -06:00
parent fb1b95ebc5
commit b826c92a8f
1 changed files with 56 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
lib/ui/screens/artifact/artifact_search/widgets/_search_input.dart
View File

@ -9,13 +9,18 @@ class _SearchInput extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return LayoutBuilder( return LayoutBuilder(
builder: (ctx, constraints) => Autocomplete<String>( builder: (ctx, constraints) => Center(
displayStringForOption: (data) => data, child: SizedBox(
onSelected: onSubmit, width: $styles.sizes.maxContentWidth,
optionsBuilder: _getSuggestions, child: Autocomplete<String>(
optionsViewBuilder: (context, onSelected, results) => displayStringForOption: (data) => data,
_buildSuggestionsView(context, onSelected, results, constraints), onSelected: onSubmit,
fieldViewBuilder: _buildInput, optionsBuilder: _getSuggestions,
optionsViewBuilder: (context, onSelected, results) =>
_buildSuggestionsView(context, onSelected, results, constraints),
fieldViewBuilder: _buildInput,
),
),
), ),
); );
} }
@ -107,51 +112,53 @@ class _SearchInput extends StatelessWidget {
color: $styles.colors.offWhite, color: $styles.colors.offWhite,
borderRadius: BorderRadius.circular($styles.insets.xs), borderRadius: BorderRadius.circular($styles.insets.xs),
), ),
child: Row(children: [ child: Row(
Gap($styles.insets.xs * 1.5), children: [
Icon(Icons.search, color: $styles.colors.caption), Gap($styles.insets.xs * 1.5),
Expanded( Icon(Icons.search, color: $styles.colors.caption),
child: TextField( Expanded(
onSubmitted: onSubmit, child: TextField(
controller: textController, onSubmitted: onSubmit,
focusNode: focusNode, controller: textController,
style: TextStyle(color: captionColor), focusNode: focusNode,
textAlignVertical: TextAlignVertical.top, style: TextStyle(color: captionColor),
decoration: InputDecoration( textAlignVertical: TextAlignVertical.top,
isDense: true, decoration: InputDecoration(
contentPadding: EdgeInsets.all($styles.insets.xs), isDense: true,
labelStyle: TextStyle(color: captionColor), contentPadding: EdgeInsets.all($styles.insets.xs),
hintStyle: TextStyle(color: captionColor.withOpacity(0.5)), labelStyle: TextStyle(color: captionColor),
prefixStyle: TextStyle(color: captionColor), hintStyle: TextStyle(color: captionColor.withOpacity(0.5)),
focusedBorder: OutlineInputBorder(borderSide: BorderSide.none), prefixStyle: TextStyle(color: captionColor),
enabledBorder: UnderlineInputBorder(borderSide: BorderSide.none), focusedBorder: OutlineInputBorder(borderSide: BorderSide.none),
hintText: $strings.searchInputHintSearch, enabledBorder: UnderlineInputBorder(borderSide: BorderSide.none),
), hintText: $strings.searchInputHintSearch,
),
),
Gap($styles.insets.xs),
ValueListenableBuilder(
valueListenable: textController,
builder: (_, value, __) => Visibility(
visible: textController.value.text.isNotEmpty,
child: Padding(
padding: EdgeInsets.only(right: $styles.insets.xs),
child: CircleIconBtn(
bgColor: $styles.colors.caption,
color: $styles.colors.white,
icon: AppIcons.close,
semanticLabel: $strings.searchInputSemanticClear,
size: $styles.insets.lg,
iconSize: $styles.insets.sm,
onPressed: () {
textController.clear();
onSubmit('');
},
), ),
), ),
), ),
) Gap($styles.insets.xs),
]), ValueListenableBuilder(
valueListenable: textController,
builder: (_, value, __) => Visibility(
visible: textController.value.text.isNotEmpty,
child: Padding(
padding: EdgeInsets.only(right: $styles.insets.xs),
child: CircleIconBtn(
bgColor: $styles.colors.caption,
color: $styles.colors.white,
icon: AppIcons.close,
semanticLabel: $strings.searchInputSemanticClear,
size: $styles.insets.lg,
iconSize: $styles.insets.sm,
onPressed: () {
textController.clear();
onSubmit('');
},
),
),
),
)
],
),
); );
} }
} }