Rudresh Narwal
Rudresh Narwal

Reputation: 3120

Status bar doesn't show up in Flutter

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.

Image

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,
                          ),
                        ],
                      ))
                ],
              ),
            ),
          ),
        ]));
 }

Upvotes: 21

Views: 14468

Answers (6)

theEUG
theEUG

Reputation: 409

Wrap the body of your Scaffold in a SafeArea.

Scaffold(
  body: SafeArea(
    child: Text('Stay safe. Stay in school'),
  ),
),

SafeArea is best for this scenario because you can also specify which dimensions you care about ie. top, bottom, left, right.

Upvotes: 0

Iule
Iule

Reputation: 301

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.

Upvotes: 0

adarsh
adarsh

Reputation: 531

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>

Upvotes: 0

geegog
geegog

Reputation: 113

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

Upvotes: 6

Vaidehee Vala
Vaidehee Vala

Reputation: 392

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

Upvotes: 1

dohyung lee
dohyung lee

Reputation: 486

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>

Upvotes: 46

Related Questions