How To Change Status Bar Background Color In Flutter

admin_img Posted By Bajarangi soft , Posted On 09-10-2020

Status bar has by default gray background color. But sometimes app developer need to change the background color of Status bar. We can set status bar background color using SystemChrome.setSystemUIOverlayStyle() method. The system chrome package is used to set specific aspect of android and iOS mobile operating system.

How To Change Status Bar Background Color In Flutter

Change Status Bar Background Color

Complete Code For Change Status Bar Background Color In Flutter
Main.dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.indigo,
    ));

    return MaterialApp(
      debugShowCheckedModeBanner: false,
        home: Scaffold(
            appBar: AppBar(
              backgroundColor: Colors.pink[300],
              title: Text('Set Status Bar Background Color'),
            ),
            body: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children:[
                    Text('Set Status Bar Background Color', style: TextStyle(fontSize: 20),)
                  ],
                )
            )
        )
    );
  }
}

Related Post