💙Flutter: Como trocar a cor da statusBar?

Para tornar o aplicativo mais bonito no dispositivo, muitas vezes queremos mudar a cor da barra de status de acordo com o nosso gosto.

Neste post, vou compartilhar o snippet de código para fazer isso. A barra de status tem por padrão a cor de fundo cinza. Podemos definir a cor de fundo da barra de status usando o método SystemChrome.setSystemUIOverlayStyle () .

O pacote do sistema Chrome é usado para definir aspectos específicos do sistema operacional móvel Android e iOS. O SystemChrome tem seu próprio parâmetro conhecido como statusBarColor, que é usado para definir a cor de fundo da barra de status no Flutter Android iOS.

Como fazer isso?

Precisamos implementar isso no arquivo main.dart. Primeiro veja o código e depois explicarei em detalhes

Primeiro, você precisa importar services.dart do pacote flutter para conseguir isso.

import 'package: flutter / services.dart';

veja o código completo aqui.

import 'pacote: flutter / material.dart'; 
import 'pacote: flutter / services.dart'; 
import 'package: my_home_page.dart'; 
import 'package: flutter / cupertino.dart'; 
import 'package: flutter / Foundation.dart'; 
import 'package: cloud_firestore / cloud_firestore.dart'; 

final ThemeData kIOSTheme = new ThemeData ( 
  primarySwatch: Colors.orange, 
  primaryColor: Colors.grey [100], 
  primaryColorBrightness: Brightness.light, 
); 

ThemeData final kDefaultTheme = novo ThemeData ( 
  primarySwatch: Colors.purple, 
  primaryColor: 
  Colors.black, accentColor: Colors.black, 
  brilho: Brightness.light, 
);




  SystemChrome.setSystemUIOverlayStyle ( 
      SystemUiOverlayStyle ( 
        statusBarColor: Colors.white, // status de cor da barra superiorBarIconBrightness 
        : Brightness 
        barra.dark, // ícones da superior systemNavigationBarColor: Colors.white, // sistema de núcleos da barra inferiorNavigationBarIconBrightness 
        : Brightness barra.dark, // ícones da superior systemNavigationBarColor: Colors.white, // sistema de núcleos da barra inferiorNavigation // ícones da barra inferior: Brightness.dark, // 
      ) 
  ); 
  SystemChrome.setPreferredOrientations ( 
      [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]) 
      .then ((_) => runApp (new MyApp ())); 
} 

void initFirestoreSettings () async { 
  Firestore firestore = Firestore (); 
  aguardar firestore.settings (timestampsInSnapshotsEnabled: true); 
} 


class MyApp extends StatelessWidget { 
  // Este widget é a raiz do seu aplicativo. 
  @override 
  Widget build (BuildContext context) { 
    return MaterialApp ( 
      title: 'Title', 
      debugShowCheckedModeBanner: false, 
      theme: defaultTargetPlatform == TargetPlatform.iOS 
          ? kIOSTheme 
          : kDefaultTheme, 

      home: MyHomePage (título: 'Bem-vindo'), 
    ); 
  } 
}

O código abaixo é responsável por alterar a cor da barra de status. Neste código, estou dando a cor branca e alterando o brilho e a cor dos ícones também para torná-los visíveis, caso contrário, os ícones brancos em fundo branco não serão visíveis.

SystemChrome.setSystemUIOverlayStyle (
SystemUiOverlayStyle (
statusBarColor: Colors.white, // cor da barra superior
statusBarIconBrightness: Brightness.dark, // ícones da barra superior
systemNavigationBarColor: Colors.white, // cor da barra inferior
systemNavigationBarIconBrightness: Brightness.dark, // ícones da barra inferior
)
);

Relembrando:

• Para mudar a cor da status bar lembre-se de usar SystemChrome
• Para ter status bar personalizadas em cada página de seu app terá de modificar os parâmetros do widget AppBar,podendo mesclar com os temas predefinidos do seu app como segue abaixo:

AppBar (
backgroundColor: Theme.of (context) .backgroundColor,
brilho: Brightness.light,
)

Espero que este post te ajude no seu próximo App.

Vamos nos conectar para mais dicas de Desenvolvimento: https://www.linkedin.com/in/palomadev/