CODEWITHSUNDEEP
flutterflutter-layoutflutter-appbar
Saya
Saya

Reputation: 302

Change only status bar's color in Flutter

I have a layout like this and I want to change the color of only the status bar as I have not used an Appbar.

Layout

Here's the code I have used for this:

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(children: [
          Container(
              color: Colors.green,
              padding: EdgeInsets.all(15),
              child: TextFormField(
                cursorColor: Colors.green,
                decoration: InputDecoration(
                  contentPadding:
                      EdgeInsets.symmetric(vertical: 0.0, horizontal: 10.0),
                  hintText: 'Search a product',
                  fillColor: Colors.white,
                  filled: true,
                  prefixIcon: Visibility(
                    visible: true,
                    child: Icon(
                      Icons.search,
                      color: Colors.grey.shade900,
                    ),
                  ),
                  enabledBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(6),
                      borderSide: BorderSide(
                          color: Colors.grey.shade200, width: 1.5
                    )
                  ),
                )
              ),
            ),

            //AND OTHER ELEMENTS

        ],),
      ),
    );
  }
}

I want to change the color of the status bar to a darker shade of green

Upvotes: 0

Views: 1554

Answers (4)

poonam kalra
poonam kalra

Reputation: 160

AnnotatedRegion<SystemUiOverlayStyle>(
      value: const SystemUiOverlayStyle(
        statusBarColor: Colors.white,
        statusBarIconBrightness: Brightness.dark,
      ),

)

Upvotes: 0

Dhananjay Gavali
Dhananjay Gavali

Reputation: 251

You can give it in MaterialApp bar theme of Directly inside your appbar

In Material app global theme

MaterialApp(
        
          theme: ThemeData(
            appBarTheme: AppBarTheme(
              brightness: Brightness.dark,

              backwardsCompatibility: false,
              systemOverlayStyle:
                  SystemUiOverlayStyle(statusBarColor: Colors.orange),
)

statusBarColor is the color of topBar that you want to change. It's important to set backwardsCompatibility: false because it will not work.

Upvotes: 0

Stefano Amorelli
Stefano Amorelli

Reputation: 4854

In our main.dart, we can use the SystemChrome class:

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.green
));

Upvotes: 2

littleironical
littleironical

Reputation: 1914

Try this:

AppBar(
  backwardsCompatibility: false,
  systemOverlayStyle: SystemUiOverlayStyle(statusBarColor: Colors.orange),
)

Upvotes: 1

Related Questions