How to make status bar color same with container color in flutter

Question

I have a container and add linear gradient colour. I want to make same colour with status bar. Now colour is a bit different. Please see in attached image. Status bar colour is dark blue. If I make same status bar colour and container colour as same colour code but I need a gradient colour like in image.

Is it because of the gradient colour?

May I know how to make it same.

Regards, Alex

// ignore_for_file: prefer_const_constructors_in_immutables

import 'package:flutter/material.dart';
import 'package:thitsarparami/screens/colors.dart';
import 'colors.dart' as color;

class Home extends StatefulWidget {
  Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    // SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    //   statusBarColor: AppColor.homePageBackground,
    // ));

return Scaffold(
  // backgroundColor: AppColor.homePageBackground,
  body: Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: [
          AppColor.gradientFirst.withOpacity(0.9),
          AppColor.gradientSecond,
        ],
        begin: const FractionalOffset(0.0, 0.4),
        end: Alignment.topRight,
      ),
    ),
    child: Column(
      children: [
        Container(
          padding: const EdgeInsets.only(top: 30 , left: 30, right: 30),
          width: MediaQuery.of(context).size.width,
          height: 250,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Row(
                    children: [
                      Text(
                        'ဘုရားရှိခိုးအမျိူးမျိူးနှင့်',
                        style: TextStyle(
                          fontSize: 18,
                          color: color.AppColor.homePageTitleColor,
                        ),
                      ),
                    ],
                  ),
                  const SizedBox(
                    height: 10,
                  ),
                  Row(
                    children: [
                      Text(
                        'ဝတ်ရွတ်စဥ်',
                        style: TextStyle(
                          fontSize: 25,
                          color: color.AppColor.homePageTitleColor,
                        ),
                      ),
                    ],
                  )
                ],
              ),
              const SizedBox(
                width: 10,
              ),
              Container(
                width: 150,
                //height: 150,
                decoration: const BoxDecoration(
                  //color: Colors.amber,
                  image: DecorationImage(
                      image: AssetImage("assets/images/buddha.png"),
                      fit: BoxFit.cover),
                ),
              )
            ],
          ),
        ),
        Expanded(
          child: Container(
            decoration: BoxDecoration(
              color: AppColor.homePageMenuBackground,
              borderRadius: const BorderRadius.only(
                topRight: Radius.circular(70),
              ),
            ),
          ),
        ),
      ],
    ),
  ),
);

} }

score 2 · Accepted Answer · answered Oct 16 '21 at 13:41

2

add this to your main method

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    statusBarColor: Colors.transparent, // transparent status bar
  ));
  runApp(const App());
}

answered Oct 16 '21 at 13:41

Burhan Khanzada

945
9
27

It is perfect. Thanks. – Alex Aung Oct 16 '21 at 18:57

score 1 · Answer 2 · answered Oct 16 '21 at 13:09

This part of the screen is controlled by the android operating system. This means the solution cannot be a pure flutter solution.

To control the appearance of the status bar on android you need to change the theme of your android app (in android/app/src/main/res/values/styles.xml) to include the following styles:

<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>

How to make status bar color same with container color in flutter

2 Answers2