How to Change the Status Bar Color in a FlutterFlow App: A Step-by-Step Guide

Step -1

Create an Custom Action - Using Given Code

Full Page

import 'package:flutter/services.dart';

Future<void> changeStatusBarColor() async {
  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle(
      statusBarColor: Colors.red, // Change the color whatever you want
    ),
  );
}

Step - 2

Add in Custom action in main.dart ( Initial Actions )

πŸ“Œ Note -

It will not work in test mode. So, test it on a real device or emulator.

6
12 replies