I am trying to change the color of my app bar my I am not getting an option to change it. As I am following a tutorial video they have not shown to edit the color. please help!
import 'package:flutter/material.dart';
class SearchList extends StatefulWidget {
SearchList({ Key key }) : super(key: key);
@override
SearchListState createState() => new SearchListState();
}
class SearchListState extends State<SearchList>
{
Widget appBarTitle = new Text("Search Product..", style: new TextStyle(color: Colors.white),);
Icon actionIcon = new Icon(Icons.search, color: Colors.white);
final key = new GlobalKey<ScaffoldState>();
final TextEditingController searchQuery = new TextEditingController();
List<String> _list;
bool issearching;
String _searchText = "";
SearchListState() {
searchQuery.addListener(() {
if (searchQuery.text.isEmpty) {
setState(() {
issearching = false;
_searchText = "";
});
}
else {
setState(() {
issearching = true;
_searchText = searchQuery.text;
});
}
});
}
@override
void initState() {
super.initState();
issearching = false;
init();
}
void init() {
_list = List();
_list.add("shirts");
_list.add("shoes");
_list.add("jeans");
_list.add("informals");
_list.add("formals");
_list.add("dresses");
_list.add("accessories");
}
@override
Widget build(BuildContext context) {
return new Scaffold(
key: key,
appBar:
buildBar(context),
body: new ListView(
padding: new EdgeInsets.symmetric(vertical: 8.0),
children: issearching ? _buildSearchList() : _buildList(),
),
);
}
List<ChildItem> _buildList() {
return _list.map((contact) => new ChildItem(contact)).toList();
}
List<ChildItem> _buildSearchList() {
if (_searchText.isEmpty) {
return _list.map((contact) => new ChildItem(contact))
.toList();
}
else {
List<String> _searchList = List();
for (int i = 0; i < _list.length; i++) {
String name = _list.elementAt(i);
if (name.toLowerCase().contains(_searchText.toLowerCase())) {
_searchList.add(name);
}
}
return _searchList.map((contact) => new ChildItem(contact))
.toList();
}
}
Widget buildBar(BuildContext context) {
return new AppBar(
centerTitle: true,
title: appBarTitle,
actions: <Widget>[
new IconButton(icon: actionIcon, onPressed: () {
setState(() {
if (this.actionIcon.icon == Icons.search) {
this.actionIcon = new Icon(Icons.close, color: Colors.white,);
this.appBarTitle = new TextField(
controller: searchQuery,
style: new TextStyle(
color: Colors.white,
),
decoration: new InputDecoration(
prefixIcon: new Icon(Icons.search, color: Colors.white),
hintText: "Search...",
hintStyle: new TextStyle(color: Colors.white)
),
);
_handleSearchStart();
}
else {
_handleSearchEnd();
}
});
},),
]
);
}
void _handleSearchStart() {
setState(() {
issearching = true;
});
}
void _handleSearchEnd() {
setState(() {
this.actionIcon = new Icon(Icons.search, color: Colors.white,);
this.appBarTitle =
new Text("Search Sample", style: new TextStyle(color: Colors.white),);
issearching = false;
searchQuery.clear();
});
}
}
class ChildItem extends StatelessWidget {
final String name;
ChildItem(this.name);
@override
Widget build(BuildContext context) {
return new ListTile(title: new Text(this.name));
}
}
I wanted a green accent color on my appBar but I am getting the default blue of flutter. I can't seem to find the right location to put the themeData of my appBar. Any help would be appreciated. Thanks. What I want as a result
What I am getting
So the right way to change appbar back button color in Flutter is to use iconTheme to change the colors of all the icons present in the appbar.
To set the color of the navigation bar, you need to set the systemNavigationBarColor argument when calling the constructor of SystemUiOverlayStyle .
After a reading through tons of documentation, I finally found the answer.
Note: This is the solution if you are using a SearchDelegate to show your search screen.
Inside your SearchDelegate subclass, override appBarTheme
@override
ThemeData appBarTheme(BuildContext context) {
return Theme.of(context);
}
By default, the class sets the background as white, so you just gotta change it to this to be able to see your theme's colors.
Hope this helps.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With