after setting up the background color of the searchBar wdget, it still remains with a lighter blue color within it.When another color is set, it apply those colors as well.Then creates a awful color
see the image here
In above image ,
The above search bar is the one with problem.The below one is custom input field**.See the color difference even though both set to the Colors.transparent **
SearchBar(
hintText: "Search",
// hintStyle: MaterialStateProperty<TextStyle>(col),
side: const MaterialStatePropertyAll(
const BorderSide(color: Colors.black45)),
shadowColor: const MaterialStatePropertyAll(Colors.transparent),
overlayColor: const MaterialStatePropertyAll(Colors.transparent),
backgroundColor: MaterialStatePropertyAll(Colors.transparent),
// controller: controller,
padding: const MaterialStatePropertyAll<EdgeInsets>(
EdgeInsets.symmetric(horizontal: 16.0)),
shape: const MaterialStatePropertyAll<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0)))),
onTap: () {
// controller.openView();
},
onChanged: (e) {
print(e);
// searchProducts(e);
setState(() {
_productList = searchProducts(e);
});
// controller.openView();
},
leading: const Icon(Icons.search),
// trailing: <Widget>[
// Tooltip(
// message: 'Change brightness mode',
// child: IconButton(
// // isSelected: isDark,
// onPressed: () {
// setState(() {
// // isDark = !isDark;
// });
// },
// icon: const Icon(Icons.wb_sunny_outlined),
// selectedIcon: const Icon(Icons.brightness_2_outlined),
// ),
// )
// ],
),
how to control color without this automatic color and set it to the desired color as required
You are seeing a tint in the SearchBar. Use the surfaceTintColor property to remove the tint.
child: SearchBar(
hintText: "Search",
// hintStyle: MaterialStateProperty<TextStyle>(col),
side: const MaterialStatePropertyAll(
const BorderSide(color: Colors.black45)),
shadowColor: const MaterialStatePropertyAll(Colors.transparent),
overlayColor: const MaterialStatePropertyAll(Colors.transparent),
backgroundColor: MaterialStatePropertyAll(Colors.transparent),
surfaceTintColor: MaterialStatePropertyAll(Colors.transparent),....
Now updating the backgroundColor will use the desired color without tint. See the details of surfaceTintColor from flutter documentation.
/// If null, the value of [SearchBarThemeData.surfaceTintColor] will be used.
/// If this is also null, then the default value is [ColorScheme.surfaceTint].
final MaterialStateProperty<Color?>? surfaceTintColor;
1