Cara Membuat Transparent StatusBar Android di Flutter

📅️ Published:

🔄 Updated:

🕔 1 min read ∙ 189 words

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:

  1. 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.

  1. 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'),
      ),
    )

Terdapat kesalahan penulisan, typo, ataupun juga kurang sesuai dalam penulisan, bantu Saya Edit on Github.

You should also read:

💬 Comment: