Article image
Paloma Silva
Paloma Silva22/03/2021 17:41
Compartilhe

ūüíôFlutter: Como trocar a cor da statusBar?

  • #Dart
  • #Flutter

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.

image

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/

Compartilhe
Coment√°rios (0)