CODEWITHSUNDEEP
androidflutteruinavigationbarnavbarstatusbar
Muhammad Anees
Muhammad Anees

Reputation: 31

How to change System Navigation Bar color in Flutter

I want to change the colour of the system navigation bar but I can't.

I got this:

 import 'package:flutter/services.dart'
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);

but it didn't work for me...

I used the code below to change the status bar colour it worked.

import 'package:flutter/services.dart'
systemOverlayStyle: SystemUiOverlayStyle(statusBarColor: Colors.white),

Upvotes: 0

Views: 2442

Answers (3)

Jawad Abbasi
Jawad Abbasi

Reputation: 148

If you are changing color of a specific screen/widget, use SafeArea above Scaffold and wrap SafeArea with Container then try using color of that container.

class TestScreen extends StatelessWidget {
  const TestScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: SafeArea(
        child: Scaffold(
          appBar: AppBar(),
          body: const Center(
            child: Text('Test Screen'),
          ),
        ),
      ),
    );
  }
}

If you want the change for app level the trying using this code in main function of the app :

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);

Upvotes: 0

Nguyen Van Linh
Nguyen Van Linh

Reputation: 11

Wrap your parent widget

AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        systemNavigationBarColor: systemNavigationBarColor,
      ),

Upvotes: 0

Celt K. B.
Celt K. B.

Reputation: 789

In your MaterialApp, you should change the primaryColor:

MaterialApp(
  theme: ThemeData(primaryColor: Colors.grey,),
  home: AppHome(),
),

Upvotes: 1

Related Questions