J'essaye de changer la couleur de ma barre d'applications mais je n'ai pas la possibilité de la changer. Comme je suis en train de suivre une vidéo de tutoriel, ils n'ont pas montré de modification de la couleur. s'il vous plaît aidez!
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));
}
}
Je voulais une couleur d'accentuation verte sur mon appBar mais j'obtiens le bleu par défaut de scintillement. Je n'arrive pas à trouver le bon emplacement pour placer le themeData de mon appBar. Toute aide serait appréciée. Merci. Ce que je veux en conséquence
Ce que j'obtiens
5 Réponses :
Il existe une option appelée backgroundColor dans la barre d'applications pour modifier la couleur de la barre de votre application.
MaterialApp(
theme: ThemeData(
primarySwatch: Colors.red,
brightness: Brightness.light,
...//other options
)
Vous pouvez également définir les données de thème de votre application dans MaterialApp () comme ceci:
return new AppBar(
backgroundColor: Colors.greenAccent,
centerTitle: true,
title: appBarTitle,
actions: <Widget>[
.....
modifier MaterialApp primaryColor par les données de thème pour toutes les applications
new MaterialApp(
theme: ThemeData(
...
),
Après avoir lu des tonnes de documentation, j'ai enfin trouvé la réponse.
Remarque: Ceci est la solution si vous utilisez un SearchDelegate pour afficher votre écran de recherche.
Dans votre sous-classe SearchDelegate, remplacez appBarTheme
@override
ThemeData appBarTheme(BuildContext context) {
return Theme.of(context);
}
Par défaut, la classe définit l'arrière-plan comme blanc, il vous suffit donc de le changer pour pouvoir voir les couleurs de votre thème.
J'espère que cela vous aidera.
Changement de couleur du widget Titre 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');
}
});
})
]),
Vous pouvez essayer d'utiliser une classe qui étend un SearchDelegate .
Si vous souhaitez avoir un thème personnalisé, dans votre classe étendue "SearchDelegate", vous pouvez remplacer le "appBarTheme" comme ci-dessous:
class exampleClass extends SearchDelegate<String> {
@override
ThemeData appBarTheme(BuildContext context) {
return ThemeData(
primaryColor: Colors.greenAccent,
);
}
.
.
.
}// end of exampleClass