flutter app change status bar to match same appbar

Issue

Hi im trying to change the statusbar to match the color of my appbar in flutter but i dont any luck im trying this:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnnotatedRegion<SystemUiOverlayStyle>(
        value: SystemUiOverlayStyle(statusBarColor: Colors.black,
        systemNavigationBarColor: Colors.black),

but still my status bar looks like this:

but on iphone it shows the colors correctly

Solution

import this

import 'package:flutter/services.dart';

and add this code to the main widget tree :

@override
  Widget build(BuildContext context) {

    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.blue,
      statusBarBrightness: Brightness.dark, // as you need dark or light
    ));

return MaterialApp(home: yourHomeWidgetWhereTheScaffoldIsDefined....

Hope this helps

Answered By – Adithya Shetty

Answer Checked By – Terry (FlutterFixes Volunteer)