Saltar al contenido

Flutter System Barra de navegación y color de la barra de estado

No olvides que en las ciencias un error casi siempere puede tener más de una resoluciones, así que nosotros compartiremos lo más óptimo y eficiente.

Solución:

Nota: esto requiere una versión más reciente de Flutter, ya que hace referencia a las API agregadas en junio de 2018.

Puedes crear una personalizada SystemUiOverlayStyle utilizando el constructor predeterminado. El color de la barra de navegación del sistema se define allí. Pero para evitar establecer muchos null valores, utiliza el copyWith para actualizar los valores de un tema claro/oscuro existente.

const mySystemTheme= SystemUiOverlayStyle.light
 .copyWith(systemNavigationBarColor: Colors.red);

Puede imperativamente establecer el color de navegación del sistema usando el SystemChrome static métodos.

SystemChrome.setSystemUiOverlayStyle(mySystemTheme);

Sin embargo, si tiene varios widgets que establecen este valor, o si utiliza el material AppBar o Cupertino NavBar, es posible que estos sobrescriban su valor. En su lugar, podría usar la nueva API AnnotatedRegion para decirle a flutter que cambie automáticamente a este estilo cada vez que ciertos widgets estén visibles. Por ejemplo, si quisiera usar el tema anterior cada vez que se encuentre en una ruta determinada, podría incluirlo en un widget AnnotatedRegion como este.

Widget myRoute(BuildContext context) 
  return new AnnotatedRegion(
    value: mySystemTheme,
    child: new MyRoute(),
  );

Este no cambie su tema de nuevo al valor anterior si abre la ruta sin embargo

Puedes usar SystemChrome clase para cambiar el color de la barra de estado y la barra de navegación.

import 'package:flutter/services.dart';

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  systemNavigationBarColor: Colors.blue, // navigation bar color
  statusBarColor: Colors.pink, // status bar color
));

Ejemplo:

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    // Paste above code here
    return MaterialApp();
  

Simplemente puede llamar SystemChrome.setSystemUIOverlayStyle :

import 'package:flutter/services.dart'

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);

Comentarios y puntuaciones

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *