Flutter container under system status

Issue

in flutter by default when we use AppBar that show under System Status for example:

appBar: AppBar(
  title: Text(
    Strings.appName,
    style: appBarTextStyle,
  ),
  automaticallyImplyLeading: true,
  leading: Builder(
    builder: (context) => IconButton(
          icon: Icon(Icons.menu),
          onPressed: () => Scaffold.of(context).openDrawer(),
        ),
  ),
),

now, in my application i dont have AppBar and i would like to have Container under this system status but i can’t do that

my implementation:

child: Scaffold(
  floatingActionButton: FloatingActionButton(
    child: Icon(Icons.add),
    onPressed: () {},
  ),
  floatingActionButtonLocation:
  FloatingActionButtonLocation.centerDocked,
  bottomNavigationBar: new BottomAppBar(
    shape: CircularNotchedRectangle(),
    child: Container(
      height: 50.0,
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 40.0),
        child: Row(
          ...
        ),
      ),
    ),
  ),
  drawer: AppDrawer(),
  body: Column(
    children: <Widget>[
      Container(
        decoration: BoxDecoration(boxShadow: [
          BoxShadow(
            color: Colors.indigo,
          )
        ]),
        height: 70.0,
        child: Row(
          children: <Widget>[
            Center(child: Text("TOOLBAR", style: defaultAppBarTextStyle)),
          ],
        ),
      ),
      Expanded(child: _fragments[_currentIndex]),
    ],
  ),

Solution

Use SafeArea to avoid keeping item on statusbar.

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: 
              child: Text(
                _timeRemaining.toString(),
                style: TextStyle(fontSize: 100),
              ),
          ),
      ),
    );
  }

In that case you need to change the status bar color manually using https://pub.dev/packages/flutter_statusbarcolor.

@override
  Widget build(BuildContext context) {
    FlutterStatusbarcolor.setStatusBarColor(Colors.blue);
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }

Answered By – Vignesh KM

Answer Checked By – Pedro (FlutterFixes Volunteer)