系统状态下的Flutter容器

Question

in flutter 默认情况下，当我们使用 AppBar 时显示在系统状态下，例如：

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

现在，在我的应用程序中我没有 AppBar，我想在此系统状态下有 Container，但我不能那样做

我的实现：

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

Answer 1

使用 SafeArea 避免将项目保留在状态栏上。

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

在这种情况下，您需要使用 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'),
    );
  }

系统状态下的Flutter容器

Flutter container under system status

flutter

flutter-layout

flutter-appbar

flutter-container