Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter- How to change the color of my app bar with search function add to it?

Tags:

flutter

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

enter image description here

What I am getting

enter image description here

like image 947
Ashutosh kumar Avatar asked Jan 05 '19 07:01

Ashutosh kumar


People also ask

How do I change my app bar back button color Flutter?

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.

How do you color the navigation bar in Flutter?

To set the color of the navigation bar, you need to set the systemNavigationBarColor argument when calling the constructor of SystemUiOverlayStyle .


1 Answers

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.

like image 51
tapizquent Avatar answered Sep 30 '22 17:09

tapizquent