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

Ten en cuenta que en la informática cualquier problema casi siempre tiene diversas resoluciones, de igual modo te mostraremos lo mejor y más óptimo.

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, debe 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
)

Para aquellos que usan AppBar

Si utiliza AppBar entonces 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 los que no usan AppBar

Envuelve tu contenido con AnnotatedRegion y establecer value a SystemUiOverlayStyle.light o SystemUiOverlayStyle.dark:

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

valoraciones y reseñas

Si conservas alguna desconfianza y forma de enriquecer nuestro sección eres capaz de añadir una interpretación y con mucho gusto lo ojearemos.

---

---

Utiliza Nuestro Buscador