Status bar doesn't show up in Flutter

Question

Flutter app is not showing the status bar(PFA). I don't want a full-screen view of my app. Is there any way to resolve this issue.

main.dart

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
 return MaterialApp(
  title: '',
  theme: ThemeData(
    primarySwatch: Colors.purple,
    fontFamily: 'FIRSNEUE'
  ),
 
 home: SplashScreenFirst(),

  routes: <String, WidgetBuilder> {
    '/dashboard': (BuildContext context) => Dashboard(title: ''),
    '/login': (BuildContext context) =>  Login(),
    '/service-dashboard': (BuildContext context) => Service(),
    '/service-exists': (BuildContext context) => ServiceExists(),
    '/partnerOffers' : (BuildContext context) => Partner(),
    '/visitorRequest' : (BuildContext context) => VisitorRequest(),
    '/vistorRequestSuccess' : (BuildContext context) => VisitorRequestSuccess(),
    '/mealPlan' : (BuildContext context) => MealPlan()
  },
  
);
}
}

login.dart

return Scaffold(
    key: _scaffoldKey,
    body: ListView(
        shrinkWrap: true,
        padding: EdgeInsets.all(15.0),
        children: <Widget>[
          Center(
            child: Container(
              child: Column(
                children: <Widget>[
                  Container(
                      padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
                      width: double.infinity,
                      height: 720,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          SizedBox(height: 65.0),
                          SizedBox(
                            height: 43.0,
                            width: 136,
                            child: Image.asset(
                              "images/logo.png",
                              fit: BoxFit.cover,
                            ),
                          ),
                          SizedBox(height: 45.0),
                          Text(
                            'Please login to continue',
                            style: TextStyle(
                                color: Color(0xffB13F8F),
                                fontSize: 16,
                                letterSpacing: 0.15),
                          ),
                          SizedBox(height: 145.0),
                          emailField,
                          _error
                              ? _phoneController.text.length > 0
                                  ? (SizedBox(
                                      height: 1,
                                    ))
                                  : Container(
                                      padding: EdgeInsets.only(top: 20),
                                      child: Text(
                                        'Something went wrong. Please try again',
                                        style: TextStyle(
                                            color: Colors.redAccent,
                                            fontSize: 16),
                                      ),
                                    )
                              : (SizedBox(
                                  height: 1,
                                )),
                          SizedBox(
                            height: 104.0,
                          ),
                          _isLoading
                              ? Center(child: CircularProgressIndicator())
                              : _isDisabled
                                  ? loginButtonDisabled
                                  : loginButon,
                          SizedBox(
                            height: 15.0,
                          ),
                        ],
                      ))
                ],
              ),
            ),
          ),
        ]));
 }

please add your code – Viren V Varasadiya Oct 18 '19 at 11:59 — Viren V Varasadiya, Oct 18 '19 at 11:59

score 36 · Accepted Answer · answered Oct 26 '20 at 09:42

Please check the two files created when creating the flutter project and comment out or delete.

./ios/Runner/Info.plist

<key>UIMainStoryboardFile</key>
<string>Main</string>
<key>UIStatusBarHidden</key>                <- <here>
<true/>                                     <- <here>
<key>UISupportedInterfaceOrientations</key>

./android/app/src/main/res/values/styles.xml

<style name="NormalTheme" parent="@android:style/Theme.Black.NoTitleBar">
    <item name="android:windowFullscreen">true</item>  <- <here>

score 2 · Answer 2 · answered Sep 19 '21 at 22:26

2

For IOS: Please check the two files created when creating the flutter project and update the value from false to true.

./ios/Runner/Info.plist

<key>UIViewControllerBasedStatusBarAppearance</key>
<false/> -> Change to true

answered Sep 19 '21 at 22:26

geegog

35
1
5

score 1 · Answer 3 · answered Aug 17 '21 at 10:48

1

Simply wrap your scaffold with SafeArea widget, and your top edge won't touch status bar

answered Aug 17 '21 at 10:48

Vaidehee Vala

324
3
7

score 0 · Answer 4 · answered Jun 27 '23 at 18:18

0

only Add two line in android -> app -> src -> main -> res -> values -> styles.xml

<item name="android:windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>

answered Jun 27 '23 at 18:18

adarsh

403
3
8

score 0 · Answer 5 · answered Jul 20 '23 at 12:20

A Flutter-only solution could be wrapping your scaffold in the following code:

    AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle.dark,
      child: Scaffold(
        ...
      )

This would set your status bar items to black color. If you want your app dependant on the device's theme you should take into account the Theme.of(context).brightness when setting the dark or light setting on the AnnotatedRegion.

score -5 · Answer 6 · edited Oct 18 '19 at 14:21

-5

I don't know if you mean the app bar when you talk about status bar. This could maybe not be there if you are not using Scaffold as your main widget. Wrap all your code in:

Scaffold(
    appBar: AppBar(
      title: const Text('Sample Code'),
    ),
    body: //rest of code...

edited Oct 18 '19 at 14:21

Murat Aslan

1,446
9
21

answered Oct 18 '19 at 12:10

Thor

519
1
5
16

Status bar doesn't show up in Flutter

6 Answers6