¿Cómo cambiar el color de la barra de estado en Flutter?

Respuestas:

120

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),
    );
  }
}

( este paquete )

UPD: otra solución

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.white
));
Andrey Turkovsky
fuente
8
Muchas gracias Andrey; Funciona ... el único problema es que el fondo es blanco pero el reloj, la conexión inalámbrica y otros textos e íconos también están en blanco. (Espero que el texto y los íconos estén en negro)
Mohamed Hassan
1
No encontré esto también. Y he editado la publicación: hay otra solución más simple para configurar el color de la barra de estado
Andrey Turkovsky
1
Excelente Solo un pequeño comentario ... Tienes que abrir el archivo pubspec.yaml y agregar la siguiente línea debajo de la línea de dependencias : flutter_statusbarcolor: ^ 0.2.3 (Verifica la última versión aquí [ pub.dev/packages/flutter_statusbarcolor#-installing-tab -] )
hfunes.com
1
@JayTillu no. Para iOS, debe usar flutter_statusbarcoloro establecer el color para cada uno AppBarmanualmente
Andrey Turkovsky
1
cambia el fondo de la barra de estado, no el texto de la barra de estado en sí.
Abdulrahman Masoud
97

Actualizacion recomendada):

En la última versión de Flutter, debes usar:

AppBar(
  backwardsCompatibility: false,
  systemOverlayStyle: SystemUiOverlayStyle(statusBarColor: Colors.orange),
)

Solo 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
  brightness: Brightness.light, // status bar brightness
)
CopsOnRoad
fuente
Soy novato en Flutter y quiero saber ¿Qué pasa si colocamos estas líneas en el método de construcción de cualquier widget? Hace alguna diferencia ?
Bhavnik
Funcionará y no hace ninguna diferencia. Solo tenga en cuenta que el color se establecerá con los parámetros de la última persona que llamó.
Yaobin Luego
¿Cómo puedo cambiar el color del texto de la barra de estado al cambiar el tema de la aplicación de claro a oscuro y viceversa? ¿Hay propiedades en la clase ThemeData?
Vinoth Vino
@VinothVino Lo sentimos, pero no puede dar el color de texto de su elección a los elementos de la barra de estado, todo lo que puede hacer es cambiar brightness, donde se Brightness.lightmuestra el color del texto en negro y se Brightness.darkmuestra en blanco.
CopsOnRoad
Gracias por la respuesta hermano. ¿Cómo puedo cambiar el brillo de forma dinámica? Estoy cambiando el modo oscuro, no se actualiza correctamente. Si reinicio en caliente la aplicación, entonces funciona.
Vinoth Vino
46

En lugar de lo que se sugiere a menudo, SystemChrome.setSystemUIOverlayStyle()que es un servicio para todo el sistema y no se restablece en una ruta diferente, puede usar un AnnotatedRegion<SystemUiOverlayStyle>que es un widget y solo tiene efecto para el widget que envuelve.

AnnotatedRegion<SystemUiOverlayStyle>(
   value: SystemUiOverlayStyle(
      statusBarColor: Colors.white,
  ),
  child: Scaffold(
      ...
  ),
)
Kuhnroyal
fuente
1
Esta es la mejor respuesta, ya que volver a la pantalla después de presionar restablecerá la barra de estado. Esto fue mencionado por primera vez por Jordy aquí stackoverflow.com/a/54593164/4033525
Sameer J
1
También creo que esta es la mejor respuesta si la necesitamos en toda la aplicación
Abbas
1
Lo estoy usando en una pantalla y está teniendo efecto en todas las demás pantallas de la aplicación. Lo estoy usando en mi primera pantalla y, naturalmente, las otras pantallas están conectadas, por lo que tiene el mismo color de barra de estado, en este blanco, en todas las demás pantallas. ¿Cómo prevenir este comportamiento? ¿Cómo hacer que funcione solo en un andamio en particular?
gegobyte
@gegobyte tuve el mismo problema. lo que hice fue usar 1 color global, que se usa en la mayoría de las vistas. Pero en vistas específicas, donde se necesitaba un color diferente, simplemente reutilicé el mismo widget pero con un color diferente
Andris
45

Para aquellos que usan AppBar

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
    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 usan AppBar

Envuelva su contenido con AnnotatedRegiony conjunto valuede SystemUiOverlayStyle.lighto SystemUiOverlayStyle.dark:

return AnnotatedRegion<SystemUiOverlayStyle>(
  // Use [SystemUiOverlayStyle.light] for white status bar 
  // or [SystemUiOverlayStyle.dark] for black status bar
  value: SystemUiOverlayStyle.light,
  child: Scaffold(...),
);
Andrey Gordeev
fuente
2
Este método no permite establecer el color exacto
kashlo
si desea obtener el color de la barra de estado de acuerdo con su tema, siempre puede usarbrightness: Theme.of(context).brightness
Roman Panaget
1
value: SystemUiOverlayStyle.light(o .dark) hace lo mismo
maldito
12

Cambie el color de la barra de estado cuando no esté usando AppBar

Primero importa esto

import 'package:flutter/services.dart';

Ahora use el siguiente código para cambiar el color de la barra de estado en su aplicación cuando no esté usando el AppBar

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(

    statusBarColor: AppColors.statusBarColor,/* set Status bar color in Android devices. */
    
    statusBarIconBrightness: Brightness.dark,/* set Status bar icons color in Android devices.*/
    
    statusBarBrightness: Brightness.dark)/* set Status bar icon color in iOS. */
); 

Para cambiar el color de la barra de estado iOScuando está usandoSafeArea

Scaffold(
  body: Container(
    color: Colors.red, /* Set your status bar color here */
    child: SafeArea(child: Container(
      /* Add your Widget here */
    )),
  ),
); 
AskNilesh
fuente
Me atrapó al colocar el SafeArea antes del andamio que impidió que el color de fondo del andamio se extendiera detrás de la barra de estado.
Bulwinkel
8

No puedo comentar directamente en el hilo porque todavía no tengo la reputación requerida, pero el autor preguntó lo siguiente:

el único problema es que el fondo es blanco pero el reloj, la conexión inalámbrica y otros textos e íconos también están en blanco. ¡No estoy seguro de por qué!

Para cualquiera que venga a este hilo, esto es lo que funcionó para mí. El color del texto de la barra de estado se decide mediante la constante de brillo en flutter/material.dart. Para cambiar esto, ajuste la SystemChromesolución así para configurar el texto:

    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.red,
      statusBarBrightness: Brightness.dark,
    ));

Tus posibles valores para Brightnessson Brightness.darky Brightness.light.

Documentación: https://api.flutter.dev/flutter/dart-ui/Brightness-class.html https://api.flutter.dev/flutter/services/SystemUiOverlayStyle-class.html

Seth Chapman
fuente
8

Esto funcionó para mí:

Servicio de Importación

import 'package:flutter/services.dart';

Luego añade:

@override
  Widget build(BuildContext context) {

    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.white,
      statusBarBrightness: Brightness.dark,
    ));
    return MaterialApp(home: Scaffold(
SK7
fuente
6

Creo que esto te ayudará:

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
        systemNavigationBarColor: Colors.white, // navigation bar color
        statusBarColor: Colors.white, // status bar color
        statusBarIconBrightness: Brightness.dark, // status bar icons' color
        systemNavigationBarIconBrightness: Brightness.dark, //navigation bar icons' color
    ));
Omar Alsaedi
fuente
5

Esto es todo lo que necesita saber:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.amber, // navigation bar color
    statusBarColor: Colors.white, // status bar color
    statusBarIconBrightness: Brightness.dark, // status bar icon color
    systemNavigationBarIconBrightness: Brightness.dark, // color of navigation controls
  ));
  runApp(MyApp());
}
Kerim Amanov
fuente
4

Se puede lograr en 2 pasos:

  1. Configure el color de la barra de estado para que coincida con el fondo de su página usando el paquete FlutterStatusbarcolor
  2. Configure los colores de los botones de la barra de estado (batería, wifi, etc.) usando la AppBar.brightnesspropiedad

Si tiene un AppBar:

  @override
  Widget build(BuildContext context) {
    FlutterStatusbarcolor.setStatusBarColor(Colors.white);
    return Scaffold(
      appBar: AppBar(
        brightness: Brightness.light,
        // Other AppBar properties
      ),
      body: Container()
    );
  }

Si no desea mostrar la barra de aplicaciones en la página:

  @override
  Widget build(BuildContext context) {
    FlutterStatusbarcolor.setStatusBarColor(Colors.white);
    return Scaffold(
      appBar: AppBar(
        brightness: Brightness.light,
        elevation: 0.0,
        toolbarHeight: 0.0, // Hide the AppBar
      ),
      body: Container()
  }
Sisir
fuente
esto también se prueba para SafeArea en ios?
LOG_TAG
3

en el servicio de importación de archivos main.dart como sigue

  import 'package:flutter/services.dart';

y dentro del método de construcción simplemente agregue esta línea antes de regresar

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.orange
)); 

Me gusta esto:

@override
 Widget build(BuildContext context) {
   SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
       statusBarColor: CustomColors.appbarcolor
    ));
    return MaterialApp(
    home: MySplash(),
    theme: ThemeData(
      brightness: Brightness.light,
      primaryColor: CustomColors.appbarcolor,
    ),
  );
 }
Krishna Kumar Jangid
fuente
2

Este también funcionará

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
Robert Apikyan
fuente
2
 return Scaffold(
      backgroundColor: STATUS_BAR_COLOR_HERE,
      body: SafeArea(
        child: scaffoldBody(),
      ),
);
apurv thakkar
fuente
2

Esta es, con mucho, la mejor manera, no requiere complementos adicionales.

Widget emptyAppBar(){
  return PreferredSize(
      preferredSize: Size.fromHeight(0.0), 
      child: AppBar(
        backgroundColor: Color(0xFFf7f7f7),
        brightness: Brightness.light,
      )
  );
}

y llámalo en tu andamio así

return Scaffold(
      appBar: emptyAppBar(),
     .
     .
     .
Nyaz Jaff
fuente
1

para que sea como el color de la barra de aplicaciones

import 'package:flutter/material.dart';

 Widget build(BuildContext context) {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      systemNavigationBarColor: Colors.transparent,
  ));
 }
Muhammad Ashraf
fuente
1

Funciona tanto para iOS como para Android

import 'package:flutter/services.dart';

@override
Widget build(BuildContext context) {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);

  return Scaffold();
}
    
MJ Montes
fuente
0
@override
Widget build(BuildContext context) {
  return Theme(
    data: ThemeData(brightness: Brightness.dark),
    child: Scaffold()
    ....
  )
}
Ma Mars
fuente
3
No publique solo el código como respuesta, sino que también proporcione una explicación de lo que hace su código y cómo resuelve el problema de la pregunta. Las respuestas con una explicación suelen ser de mayor calidad y es más probable que atraigan votos positivos.
Mark Rotteveel
0

Tuve problemas con todas las respuestas mencionadas, excepto con la solución que hice yo mismo: Container(width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).padding.top, color: Colors.green) para las vistas, donde no se agregó ninguna barra de aplicaciones, solo uso un contenedor con fondo cuya altura exacta coincide con la altura de la barra de estado. En este escenario, cada vista puede tener un color de estado diferente y no necesito preocuparme y pensar en alguna lógica, que de alguna manera las vistas incorrectas tienen colores incorrectos.

Andris
fuente
0

Ninguna de las soluciones existentes me ayudó, porque no uso AppBary no quiero hacer declaraciones cada vez que el usuario cambia el tema de la aplicación. Necesitaba una forma reactiva de cambiar entre los modos claro y oscuro y descubrí que AppBarusa un widget llamado Semanticspara configurar el color de la barra de estado.

Básicamente, así es como lo hago:

return Semantics(
  container: false,  // don't make it a new node in the hierarchy
  child: AnnotatedRegion<SystemUiOverlayStyle>(
    value: SystemUiOverlayStyle.light,  // or .dark
    child: MyApp(),  // your widget goes here
  ),
);
  • Semanticsse importa de package:flutter/material.dart.
  • SystemUiOverlayStylese importa de package:flutter/services.dart.
maldita sea
fuente
enfrenta el mismo problema que se mencionó anteriormente, pero la solución no funcionará en Andorid 10
Aditi
0

Lo resolví cambiando todo el color de fondo como sigue:

En la pantalla principal:

volver andamio

  backgroundColor: Colors.black,

  body: SafeArea(
  
 ),

);

Zou
fuente
0

La mayoría de las respuestas están usando SystemChromeque solo funciona para Android. Mi solución es combinar ambos AnnotatedRegiony SafeAreaen un nuevo widget para que también funcione en iOS. Y puedo usarlo con o sin AppBar.

class ColoredStatusBar extends StatelessWidget {
  const ColoredStatusBar({Key key, this.color, this.child}) : super(key: key);

  final Color color;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        statusBarColor: color ?? Colors.blue,
      ),
      child: Container(
        color: color ?? Colors.blue,
        child: SafeArea(
          bottom: false,
          child: Container(
            child: child,
          ),
        ),
      ),
    );
  }
}

Uso: colóquelo en la parte superior del widget de la página.

@override
Widget build(BuildContext context) {
  return ColoredStatusBar(
    child: /* your child here */,
  );
}
axumnemónico
fuente