That is How we can change the color of status bar in Flutter

compodoc

To make the app more beautiful on the device many times we want to change the color of status bar according to our taste. In this post I am going to share code snippet to do so.

How to do that?

We need to implement this in the main.dart file. First see the code then I will explain it in details

First you need to import services.dart from flutter package to achieve this.

import 'package:flutter/services.dart';

see the full code here.

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:kisan/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,
);

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



void main() {
  initFirestoreSettings();
  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle(
      statusBarColor: Colors.white, //top bar color
      statusBarIconBrightness: Brightness.dark, //top bar icons
      systemNavigationBarColor: Colors.white, //bottom bar color
      systemNavigationBarIconBrightness: Brightness.dark, //bottom bar icons
    )
  );
  SystemChrome.setPreferredOrientations(
          [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown])
      .then((_) => runApp(new MyApp()));
}

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



class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Kisan',
      debugShowCheckedModeBanner: false,
       theme: defaultTargetPlatform == TargetPlatform.iOS
          ? kIOSTheme
          : kDefaultTheme,
      home: MyHomePage(title: 'Welcome Kisan'),
    );
  }
}

The code below is responsbile for changing status bar color, In this code I am giving it white color and changing the brightness and color of icons also to make them visible otherwise white icons on white background will not be visible

SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle(
      statusBarColor: Colors.white, //top bar color
      statusBarIconBrightness: Brightness.dark, //top bar icons
      systemNavigationBarColor: Colors.white, //bottom bar color
      systemNavigationBarIconBrightness: Brightness.dark, //bottom bar icons
    )
  );

Hope you have enjoyed the topic I will come up with these kind of small handy scripts to make development easy for you. Thanks.


Tagged with:
CodeNextGen
Written by Sanjeev Kumar

Get notifications about new posts on Twitter, RSS or Email.