Comment définir la couleur de la barre d'état quand AppBar n'est pas présent.
J'ai essayé cela mais ne fonctionne pas.
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
return new Scaffold(
body: new Container(
color: UniQueryColors.colorBackground,
child: new ListView.builder(
itemCount: 7,
itemBuilder: (BuildContext context, int index){
if (index == 0){
return addTopInfoSection();
}
},
),
),
);
}
La sortie ressemble à ceci:
Mettez simplement ceci dans la fonction build de votre application:
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
statusBarColor: Colors.blue, //or set color with: Color(0xFF0000FF)
));
De plus, vous pouvez définir des variables utiles telles que: statusBarIconBrightness
, systemNavigationBarColor
ou systemNavigationBarDividerColor
Sur Android, ajoutez ce qui suit à onCreate dans MainActivity.Java, après l’appel de super.onCreate (savedInstanceState);
getWindow (). setStatusBarColor (0x00000000);
ou vous pouvez utiliser le flutter_statusbarcolor plugin
changeStatusColor(Color color) async {
try {
await FlutterStatusbarcolor.setStatusBarColor(color);
} on PlatformException catch (e) {
print(e);
}
}
En cherchant SystemChrome, j'ai trouvé ceci: https://docs.flutter.io/flutter/services/SystemChrome/setSystemUIOverlayStyle.html
Juste au-dessus de l'exemple de code, vous trouverez un paragraphe sur AppBar.brightness
.
Vous devriez pouvoir ajouter un AppBar comme ceci:
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
return new Scaffold(
appBar: new AppBar(
title: new Text('Nice title!'),
brightness: Brightness.light,
),
body: new Container(
color: UniQueryColors.colorBackground,
child: new ListView.builder(
itemCount: 7,
itemBuilder: (BuildContext context, int index){
if (index == 0){
return addTopInfoSection();
}
},
),
),
);
}
Heres info à propos de la Luminosité
Widget build(BuildContext context) {
return new Scaffold(
body: new Container(
color: UniQueryColors.colorBackground,
/* Wrapping ListView.builder with MediaQuery.removePadding() removes the default padding of the ListView.builder() and the status bar takes the color of the app background */
child: MediaQuery.removePadding(
removeTop: true,
context: context,
child: ListView.builder(
itemCount: 7,
itemBuilder: (BuildContext context, int index){
if (index == 0){
return addTopInfoSection();
}
},
),
),
),
);
}
La couleur de la barre d'état est rendue par le système Android. Que ce soit à partir de Flutter ou non peut faire l’objet d’un débat: Comment allumer la barre d’état Android dans Flutter
Cependant, vous pouvez modifier la couleur de la barre d'état dans le code spécifique à Android en modifiant le thème: Comment modifier la couleur de la barre d'état dans Android
Pour iOS, vous devrez voir leur documentation - je ne suis pas familier avec la plate-forme.
Il existe en fait deux bibliothèques Dart, une pour définir le thème clair/foncé de la barre d'état et l'autre pour définir la couleur . Je n'ai pas utilisé non plus, mais il est clair que quelqu'un d'autre a eu le même problème que vous et a fini par développer son propre paquet.
Si vous prenez un butin dans code source de AppBar, vous verrez qu'ils utilisent un widget AnnotatedRegion.
À ma connaissance, ce widget définit automatiquement la couleur de la barre de statut/barre de navigation lorsque le widget qui y est enveloppé est recouvert par la barre de statut/barre de navigation.
Vous pouvez envelopper votre widget comme ceci:
import 'package:flutter/services.Dart';
...
Widget build(BuildContext context) {
return Scaffold(
body: AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle.light,
child: ...,
),
);
}
return MaterialApp(
title: 'I Am A Student',
theme: ThemeData(
primarySwatch: AppColor.appColor,
primaryColorDark: AppColor.appColor,
primaryColorBrightness: Brightness.dark,
cursorColor: AppColor.appColor,
primaryColor: Color(0xFFF1F2F4),
buttonTheme: ButtonThemeData(buttonColor: AppColor.appColor,textTheme: ButtonTextTheme.primary),
fontFamily: 'Rubik',
),
// home: NewAddressScreen(),
home: SplashScreen(),
);
ajoutez cursorColor dans les données de thème après cela, vous verrez la couleur de la barre d'état