'How to change color of my search suggestions and add padding to leading and actions of my searchdelegate in Flutter
I am making a search bar on my appbar, and for that I want to edit my search widget. I want to add paddings, so it just look like previous screen. Then, I want to color my search app bar and it's suggestions. Please, look at the pictures for better understanding -
The appbar without search opened -
After I search -
I want to color it in purple and black and want padding equal to the icons before.
The search button on app bar has this function -
InkWell(
onTap: () {
showSearch(
context: context,
delegate: MySearchDelegate(),
);
},
child: SvgPicture.asset('assets/icons/search_icon.svg'),
),
Here is my searchDelegate class -
import 'package:flutter/material.dart';
class MySearchDelegate extends SearchDelegate {
List<String> searchResults = [
'Question 1',
'Question 2',
'Question 3',
'Question 4',
'Question 5'
];
@override
Widget? buildLeading(BuildContext context) => InkWell(
onTap: () {},
child: Icon(
Icons.search,
color: Colors.white,
),
);
@override
List<Widget>? buildActions(BuildContext context) => [
InkWell(
onTap: () {
if(query.isEmpty) {
close(context, null);
}
else {
query='';
}
},
child: Icon(
Icons.clear,
color: Colors.white,
),
),
];
@override
Widget buildResults(BuildContext context) {
return Center(
child: Text(
query,
style: TextStyle(
color: Colors.white,
),
),
);
}
@override
Widget buildSuggestions(BuildContext context) {
List<String> suggestions = searchResults.where((searchResult) {
final result = searchResult.toString().toLowerCase();
final input = query.toLowerCase();
return result.contains(input);
}).toList();
return ListView.builder(
itemCount: suggestions.length,
itemBuilder: (context, index) {
final suggestion = suggestions[index];
return ListTile(
focusColor: Colors.white,
title: Text(
suggestion,
),
onTap: () {
query=suggestion;
showResults(context);
},
);
},
);
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|


