¿Cómo cambiar el color de la barra de estado en Flutter?
Estoy intentando cambiar el color de la barra de estado a blanco. Encontré este pub en Flutter. Intenté usar el código de ejemplo en mis archivos dart.
Actualización de Flutter 2.0 (recomendado):
En la última versión de Flutter, debes usar:
AppBar(
systemOverlayStyle: SystemUiOverlayStyle(
// Status bar color
statusBarColor: Colors.red,
// Status bar brightness (optional)
statusBarIconBrightness: Brightness.dark, // For Android (dark icons)
statusBarBrightness: Brightness.light, // For iOS (dark icons)
),
)
Sólo Android (más flexibilidad):
import 'package:flutter/services.dart';
void main() {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
systemNavigationBarColor: Colors.blue, // navigation bar color
statusBarColor: Colors.pink, // status bar color
));
}
Tanto iOS como Android:
appBar: AppBar(
backgroundColor: Colors.red, // Status bar color
)
Un poco complicado pero funciona tanto en iOS como en Android:
Container(
color: Colors.red, // Status bar color
child: SafeArea(
left: false,
right: false,
bottom: false,
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue, // App bar color
),
),
),
)
Funciona totalmente bien en mi aplicación.
import 'package:flutter_statusbarcolor/flutter_statusbarcolor.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
FlutterStatusbarcolor.setStatusBarColor(Colors.white);
return MaterialApp(
title: app_title,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(title: home_title),
);
}
}
UPD: solución recomendada (Flutter 2.0 y superior)
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.white
));
Nota: este paquete no es compatible con Flutter 3.0 o superior [1]: https://pub.dev/packages/flutter_statusbarcolor
Para aquellos que usanAppBar
Si lo usa AppBar, actualizar el color de la barra de estado es tan simple como esto:
Scaffold(
appBar: AppBar(
// Use [Brightness.light] for black status bar
// or [Brightness.dark] for white status bar
// https://stackoverflow.com/a/58132007/1321917
brightness: Brightness.light
),
body: ...
)
Para solicitar todas las barras de aplicaciones:
return MaterialApp(
theme: Theme.of(context).copyWith(
appBarTheme: Theme.of(context)
.appBarTheme
.copyWith(brightness: Brightness.light),
...
),
Para aquellos que no usanAppBar
Envuelva su contenido con AnnotatedRegiony configúrelo valueen SystemUiOverlayStyle.lighto SystemUiOverlayStyle.dark:
return AnnotatedRegion<SystemUiOverlayStyle>(
// Use [SystemUiOverlayStyle.light] for white status bar
// or [SystemUiOverlayStyle.dark] for black status bar
// https://stackoverflow.com/a/58132007/1321917
value: SystemUiOverlayStyle.light,
child: Scaffold(...),
);
Editar para Flutter 2.0.0
La respuesta a continuación ya no funciona cuando tienes un mensaje AppBaren la pantalla. Ahora necesita configurar AppBarTheme.brightnessy AppBarTheme.systemOverlayStylecorrectamente en ese caso.
Respuesta
En lugar de lo que a menudo se sugiere SystemChrome.setSystemUIOverlayStyle(), que es un servicio para todo el sistema y no se reinicia en una ruta diferente, puede usar un AnnotatedRegion<SystemUiOverlayStyle>widget que solo tiene efecto para el widget que envuelve.
AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle(
statusBarColor: Colors.white,
),
child: Scaffold(
...
),
)
