Flutter-如何通过添加搜索功能更改我的应用栏的颜色？

Question

我正在尝试更改应用栏的颜色，但我没有选择更改它的选项。 当我在观看教程视频时，他们没有显示可以编辑颜色。 请帮忙！

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));
  }

}

我想在我的 appBar 上有一个绿色的强调色，但我得到了默认的蓝色颤动。 我似乎找不到合适的位置来放置我的 appBar 的 themeData。 任何帮助，将不胜感激。 谢谢。 我想要的结果

我得到了什么

Answer 1

在阅读了大量文档后，我终于找到了答案。

注意：如果您使用 SearchDelegate 来显示您的搜索屏幕，这就是解决方案。

在 SearchDelegate 子类中，覆盖 appBarTheme

@override
ThemeData appBarTheme(BuildContext context) {
    return Theme.of(context);
}

默认情况下，该类将背景设置为白色，因此您只需将其更改为此即可看到您的主题颜色。

希望这可以帮助。

Answer 2

您可以尝试使用扩展SearchDelegate的类。
如果您想要自定义主题，那么在您的“SearchDelegate”扩展类中，您可以覆盖“appBarTheme”，如下所示：

class exampleClass extends SearchDelegate<String> {
  @override
  ThemeData appBarTheme(BuildContext context) {
    return ThemeData(
      primaryColor: Colors.greenAccent,
    );
  }
.
.
.
}// end of exampleClass

Answer 3

Appbar 中有一个称为backgroundColor的选项可以更改应用栏的颜色。

return new AppBar(
        backgroundColor: Colors.greenAccent,
        centerTitle: true,
        title: appBarTitle,
        actions: <Widget>[
         .....

您还可以在 MaterialApp() 中为您的应用程序设置主题数据，如下所示：

MaterialApp(
          theme: ThemeData(
             primarySwatch: Colors.red,
             brightness: Brightness.light,
             ...//other options 
          )

Answer 4

AppBar 标题小部件颜色更改：-

import 'package:flutter/material.dart';

    class HomePage extends StatefulWidget {
      @override
      _HomePagePage createState() => _HomePagePage();
    }

    class _HomePagePage extends State<HomePage> {

      Icon searchBtn = new Icon(Icons.search);
      Widget appBarTitle = new Text('Invoices');

      @override
      Widget build(BuildContext context) {
        return new MaterialApp(
            color: Colors.purpleAccent,
            debugShowCheckedModeBanner: false,
            home: new Scaffold(
              appBar: new AppBar(
                elevation: 0.0,
                  centerTitle: false,
                  title: appBarTitle,
                  flexibleSpace: Container( // for AppBar Title Color
                  decoration: BoxDecoration(
                      gradient: LinearGradient(begin: Alignment.topCenter, colors: [
                    Color(0xFF832685),
                    Color(0xFFC81379),
                    //Color(0xFFFAF2FB)
                  ])),
                ),
                //backgroundColor: Color(0xFF832685)
                  actions: <Widget>[
                    new IconButton(
                        icon: searchBtn,
                        onPressed: () {
                          setState(() {
                            if (this.searchBtn.icon == Icons.search) {
                              this.searchBtn = new Icon(Icons.close);
                              this.appBarTitle = new TextField(
                                autofocus: true,
                                cursorColor: Color(0xFFFAF2FB),
                                style: new TextStyle(
                                  color: Colors.white,
                                ),
                                decoration: new InputDecoration(
                                  //fillColor: Colors.white,
                                  border: InputBorder.none,
                                  // focusedBorder: OutlineInputBorder(
                                  // borderRadius: BorderRadius.all(Radius.circular(5.0)),
                                  // borderSide: BorderSide(color: Colors.white)),
                                  filled: true,
                                  prefixIcon:
                                      new Icon(Icons.search, color: Colors.white),
                                  hintText: "Search...",
                                  hintStyle: new TextStyle(color: Colors.white),
                                ),
                              );
                            } else {
                              this.searchBtn = new Icon(Icons.search);
                              this.appBarTitle = new Text('Invoices');
                            }
                          });
                        })
                  ]),

Answer 5

通过所有应用程序的主题数据更改MaterialApp primaryColor

new MaterialApp(
      theme: ThemeData(
        ...
      ),