Comment changer le statut et la couleur de la barre de navigation dans Flutter?
J'essaie de changer la couleur de la barre d'état du système en noir. La configuration semble être remplacée par la classe AppBar. Je peux réaliser ce que je veux en affectant un thème: à ThemeData.dark() lors de la création de l'application matérielle, puis en spécifiant un appBar attribute. Mais je ne veux pas d'un AppBar, et aussi, le faire de cette façon change toutes les couleurs de police.
Une solution possible consiste à hériter ThemeData.bright () dans une nouvelle classe, puis à ajouter quelque chose qui ne fait que modifier la barre d'état du système via
setSystemUIOverlayStyle
Et puis je devrais spécifier AppBar et le rendre invisible en quelque sorte?
https://docs.flutter.io/flutter/services/SystemChrome/setSystemUIOverlayStyle.html
main.Dart
import 'package:flutter/material.Dart';
import 'package:flutter/services.Dart';
import 'package:english_words/english_words.Dart';
import 'layout_widgets.Dart' as layout_widgets;
class RandomWords extends StatefulWidget {
@override
createState() => new RandomWordsState();
}
class RandomWordsState extends State<RandomWords> {
final _suggestions = <WordPair>[];
final _saved = new Set<WordPair>();
final _biggerFont = const TextStyle(fontSize: 18.0);
void _pushSaved() {
Navigator.of(context).Push(
new MaterialPageRoute(
builder: (context) {
final tiles = _saved.map((pair) {
return new ListTile(
title: new Text(pair.asPascalCase,style:_biggerFont)
);
}
);
final divided = ListTile.divideTiles(
context:context,
tiles: tiles,).toList();
return new Scaffold(
appBar: new AppBar(
title: new Text('Saved Suggestions'),
),
body: new ListView(children:divided),
);
}
)
);
}
Widget _buildSuggestions() {
return new ListView.builder(
padding: const EdgeInsets.all(16.0),
// The itemBuilder callback is called once per suggested Word pairing,
// and places each suggestion into a ListTile row.
// For even rows, the function adds a ListTile row for the Word pairing.
// For odd rows, the function adds a Divider widget to visually
// separate the entries. Note that the divider may be difficult
// to see on smaller devices.
itemBuilder: (context, i) {
// Add a one-pixel-high divider widget before each row in theListView.
if (i.isOdd) return new Divider();
// The syntax "i ~/ 2" divides i by 2 and returns an integer result.
// For example: 1, 2, 3, 4, 5 becomes 0, 1, 1, 2, 2.
// This calculates the actual number of Word pairings in the ListView,
// minus the divider widgets.
final index = i ~/ 2;
// If you've reached the end of the available Word pairings...
if (index >= _suggestions.length) {
// ...then generate 10 more and add them to the suggestions list.
_suggestions.addAll(generateWordPairs().take(10));
}
return _buildRow(_suggestions[index]);
}
);
}
Widget _buildRow(WordPair pair) {
final alreadySaved = _saved.contains(pair);
return new ListTile(
title: new Text(
pair.asPascalCase,
style: _biggerFont,
),
trailing: new Icon(
alreadySaved ? Icons.favorite : Icons.favorite_border,
color: alreadySaved ? Colors.red : null,
),
onTap: () {
setState(() {
if (alreadySaved) {
_saved.remove(pair);
} else {
_saved.add(pair);
}
});
},
);
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Startup Name Generator'),
actions: <Widget>[
new IconButton(icon:new Icon(Icons.list), onPressed: _pushSaved),
],
),
body: _buildSuggestions(),
);
}
}
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
Column buildButtonColumn(IconData icon, String label) {
Color color = Theme.of(context).primaryColor;
return new Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Icon(icon, color: color),
new Container(
margin: const EdgeInsets.only(top:8.0),
child: new Text(
label,
style: new TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.w400,
color: color,
)
),
)
],
);
}
Widget titleSection = layout_widgets.titleSection;
Widget buttonSection = new Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
buildButtonColumn(Icons.contact_mail, "CONTACT"),
buildButtonColumn(Icons.folder_special, "PORTFOLIO"),
buildButtonColumn(Icons.picture_as_pdf, "BROCHURE"),
buildButtonColumn(Icons.share, "SHARE"),
],
)
);
Widget textSection = new Container(
padding: const EdgeInsets.all(32.0),
child: new Text(
'''
The most awesome apps done here.
''',
softWrap: true,
),
);
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
return new MaterialApp(
title: 'Startup Name Generator',
// theme: new ThemeData(
// brightness: Brightness.dark,
// primarySwatch: Colors.blue,
// ),
// theme: new ThemeData(),
debugShowCheckedModeBanner: false,
home: new Scaffold(
// appBar: new AppBar(
//// title: new Text('Top Lakes'),
//// brightness: Brightness.light,
// ),
// backgroundColor: Colors.white,
body: new ListView(
children: [
new Padding(
padding: new EdgeInsets.fromLTRB(0.0, 40.0, 0.0, 0.0),
child: new Image.asset(
'images/lacoder-logo.png',
width: 600.0,
height: 240.0,
fit: BoxFit.fitHeight,
),
),
titleSection,
buttonSection,
textSection,
],
),
),
);
}
}
layout_widgets.Dart
import 'package:flutter/material.Dart';
Widget titleSection = new Container(
padding: const EdgeInsets.all(32.0),
child: new Row(children: [
new Expanded(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
new Container(
padding: const EdgeInsets.only(bottom: 8.0),
child: new Text(
"Some-Website.com",
style: new TextStyle(
fontWeight: FontWeight.bold,
),
)
),
new Text(
'Small details',
style: new TextStyle(
color: Colors.grey[500],
)
)
],
)),
new Icon(Icons.star,color: Colors.orange[700]),
new Text('100'),
]));
Vous pouvez utiliser la classe SystemChrome pour modifier la couleur de la barre d'état et de la barre de navigation. Première importation
import 'package:flutter/services.Dart';
Après cela, vous devez ajouter les lignes suivantes (le meilleur endroit pour placer ces lignes est dans votre méthode main())
void main() {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
systemNavigationBarColor: Colors.blue,
statusBarColor: Colors.pink,
));
}
Si vous ne voulez pas du tout AppBar, vous pouvez simplement appeler setSystemUIOverlayStyle dans la fonction principale:
void main() async {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
runApp(new MaterialApp(
home: new Scaffold(),
));
}
C'est plus délicat si vous avez une barre d'application dans un échafaudage et aucune dans un autre. Dans ce cas, j'ai dû appeler setSystemUIOverlayStyle après avoir poussé une nouvelle route avec un échafaudage qui n'a pas de barre d'application:
@override
Widget build(BuildContext context) {
final page = ModalRoute.of(context);
page.didPush().then((x) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
});
return new Scaffold();
}
Je suis assez nouveau sur StackOverflow et je n'ai jamais utilisé Flutter mais j'ai trouvé ce paquet qui semble rendre les choses relativement faciles.
Méthode 1: utilisation du package
Une fois ceci importé, il vous suffit d'ajouter ce fragment de code:
try {
await FlutterStatusbarcolor.setStatusBarColor(Colors.black);
} on PlatformException catch (e) {
print(e);
}
Le remplacement du paramètre de la setStatusBarColor() devrait vous donner le résultat souhaité, une liste complète des couleurs peut être trouvée ici .
Méthode 2: utilisation des fonctions par défaut
Si cela ne fonctionne pas/vous ne voulez pas ajouter de packages ou de bibliothèques supplémentaires, alors peut-être this La réponse StackOverflow peut vous aider.
Cela implique d'utiliser une fonction similaire à la méthode ci-dessus: getWindow().setStatusBarColor() ou getActivity().getWindow().setStatusBarColor()
Le remplacement du paramètre par le code hexadécimal souhaité à partir de la même liste que précédemment peut également aboutir à une solution.
J'espère que cela fonctionne/aide!