我尝试更改应用栏的颜色,但我没有选择更改它的选项。在我观看教程视频时,他们没有显示出编辑颜色的信息。 请帮忙!
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。 任何帮助,将不胜感激。 谢谢。 结果是我想要的
我正在得到什么
答案 0 :(得分:2)
您可以尝试使用扩展 SearchDelegate 的类。
如果您希望有一个自定义主题,则可以在“ SearchDelegate”扩展类中覆盖如下所示的“ appBarTheme”:
class exampleClass extends SearchDelegate<String> {
@override
ThemeData appBarTheme(BuildContext context) {
return ThemeData(
primaryColor: Colors.greenAccent,
);
}
.
.
.
}// end of exampleClass
答案 1 :(得分:1)
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
)
答案 2 :(得分:1)
通读大量文档后,我终于找到了答案。
注意:如果您使用SearchDelegate显示搜索屏幕,这就是解决方案。
在SearchDelegate子类中,覆盖appBarTheme
@override
ThemeData appBarTheme(BuildContext context) {
return Theme.of(context);
}
默认情况下,该类将背景设置为白色,因此您只需将其更改为白色即可看到主题的颜色。
希望这会有所帮助。
答案 3 :(得分:1)
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');
}
});
})
]),
答案 4 :(得分:0)
通过主题数据为所有应用更改MaterialApp
primaryColor
new MaterialApp(
theme: ThemeData(
...
),