¿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 de dardos.

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

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
)

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(
      ...
  ),
)

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(...),
);

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 */
    )),
  ),
); 

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

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(

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

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

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()
  }

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

Este también funcionará

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);

 return Scaffold(
      backgroundColor: STATUS_BAR_COLOR_HERE,
      body: SafeArea(
        child: scaffoldBody(),
      ),
);

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(),
     .
     .
     .

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

Funciona tanto para iOS como para Android

import 'package:flutter/services.dart';

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

  return Scaffold();
}
    

@override
Widget build(BuildContext context) {
  return Theme(
    data: ThemeData(brightness: Brightness.dark),
    child: Scaffold()
    ....
  )
}

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.

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.

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

En la pantalla principal:

volver andamio

  backgroundColor: Colors.black,

  body: SafeArea(
  
 ),

);

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

Lo que quieres son Temas. Son importantes para mucho más que el color de AppBar.

https://flutter.io/cookbook/design/themes/