Flutter - Comment définir la couleur de la barre d'état quand AppBar n'est pas présent
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