how to apply color to statusbar in flutter?

120

Question: how to apply color to statusbar in flutter?

i want to change statusbar color to white. but it loos like gray. i use safeArea, and not use appbar. flutter error so i wrap safearea in Container to set color to white.

@override   Widget build(BuildContext context) {     return Container(       color: Colors.white, // statusbar color       child: SafeArea(           child: Scaffold(         backgroundColor: Theme.of(context).scaffoldBackgroundColor,         body: Column(           children: [             appBarContainer(),             Expanded(               child: GetX<PostDetailController>(                 builder: (controller) {                   return Scrollbar(                       child: ListView.builder(                     itemBuilder: (context, index) {                       return postContainer(context, controller);                     },                     itemCount: controller.post.length,                   ));                 },               ),             )           ],         ),       )),     );   } } 

enter image description here

Total Answers: 2

51

Answers 1: of how to apply color to statusbar in flutter?

refer below code and add this in void main() before runApp

SystemChrome.setSystemUIOverlayStyle(   const SystemUiOverlayStyle(     statusBarColor: Colors.transparent,      // status bar color   ), ); 
10

Answers 2: of how to apply color to statusbar in flutter?

 void main() {   SystemChrome.setSystemUIOverlayStyle(   SystemUiOverlayStyle(statusBarColor: Colors.red));        WidgetsFlutterBinding.ensureInitialized();     runApp(const MyApp());   } 

this how you can add color to status bar