Kadang kita perlu membuat status bar di project flutter kita perlu custom, baik itu transparant maupun berwarna dengan custom.
Langkah pertama jangan lupa import terlebih dahulu flutter service. Berikut contohnya:
1
| import 'package:flutter/services.dart';
|
Ada dua cara untuk membuat status bar background nya jadi transparan:
- Dengan SystemChrome
Simple untuk membuat transparan status bar
1
2
3
| SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(statusBarColor: Colors.transparent),
);
|
Kustom lebih untuk setting statusbar dan navigation
1
2
3
4
5
6
7
8
9
| SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(
statusBarColor: Colors.transparent, // transparent status bar
systemNavigationBarColor: Colors.black, // navigation bar color
statusBarIconBrightness: Brightness.dark, // status bar icons' color
systemNavigationBarIconBrightness:
Brightness.dark, //navigation bar icons' color),
),
);
|
Kode tersebut bisa ditaruh di atas/parent Widget MaterialApp ataupun juga bisa di widget lainya.
- Dengan AnnotatedRegion
Berikut contoh kodenya:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle(
statusBarColor: Colors.transparent, // transparent status bar
systemNavigationBarColor: Colors.black, // navigation bar color
statusBarIconBrightness: Brightness.dark, // status bar icons' color
systemNavigationBarIconBrightness:
Brightness.dark, //navigation bar icons' color
),
child: MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
),
)
|
Jika terdapat kesalahan penulisan, typo, atau kurang sesuai dalam penulisan, bantu Saya untuk Edit on Github.
Comment: