Why Flutter's CupertinoNavigationBar overlaps children in CupertinoPageScaffold?

Question

I have the following widget tree:

@override
  Widget build(BuildContext context) {
    final double topMargin = Platform.isAndroid ? 0 : 105; // TODO: (why margin on iOS?)
    final double interMargin = Platform.isAndroid ? 0 : 10;
    final body = Column(children: <Widget> [
      Padding(
        padding: EdgeInsets.only(left: 10, right: 10, top: topMargin),
        child: Platform.isAndroid // url
        ? TextField(
            decoration: new InputDecoration(hintText: 'Host'),
            maxLines: 1,
            autofocus: true,
            textInputAction: TextInputAction.next,
            controller: _hostController)
        : CupertinoTextField(
            maxLines: 1,
            autofocus: true,
            textInputAction: TextInputAction.next,
            controller: _hostController)),
      Padding(
        padding: EdgeInsets.only(left: 10, top: interMargin, right: 10),
        child: Platform.isAndroid // port
          ? TextField(
              decoration: new InputDecoration(hintText: 'Port'),
              keyboardType: TextInputType.number,
              maxLines: 1,
              controller: _portController)
          : CupertinoTextField(
              keyboardType: TextInputType.number,
              maxLines: 1,
              controller: _portController)),
      Platform.isAndroid
        ? RaisedButton(child: Text('OK'), onPressed: () => _onInputFinished())
        : CupertinoButton(child: Text('OK'), onPressed: () => _onInputFinished())
    ]);
    return Platform.isAndroid
      ? Scaffold(
          appBar: AppBar(title: Text('Server connection')),
          body: body)
      : CupertinoPageScaffold(
          navigationBar: CupertinoNavigationBar(middle: Text('Server connection')),
          child: body);
  }

It looks ok only if i add top margin to body widgets:

final double topMargin = Platform.isAndroid ? 0 : 105; // TODO: (why margin on iOS?)
...

If i don't add it CupertinoNavigationBar overlaps children:

What am i missing?

Here is the whole project and the screen.

score 13 · Answer 1 · answered Dec 18 '19 at 02:39

13

You just need to implement 'SafeArea' widget (instead of top margin) to your children's widgets to avoid being overlapped by the Cupertino Navigation bar.

CupertinoPageScaffold(
   navigationBar: CupertinoNavigationBar(),
   child: SafeArea(
            child: [Your widgets] // your children widgets 
        ),
)

answered Dec 18 '19 at 02:39

Alvindrakes

596
7
18

1

According to the [doc](https://api.flutter.dev/flutter/widgets/SafeArea-class.html): "A widget that insets its child by sufficient padding to avoid intrusions by the operating system". In my case it's expected that the area is occupied by another widget (`CuperinoNavigationBar` and it's intentional). So using of `SafeArea` looks like a workaround. Any thoughts on this? Any usage of `SafeArea` in official docs/sources for this use case? – 4ntoine Dec 18 '19 at 07:10

score 7 · Answer 2 · answered Aug 02 '20 at 11:14

You have to set barBackgroundColor for CupertinoApp. Or setting a backgroundColor for CupertinoNavigationBar will also solve this problem.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      title: 'Flutter App',
      theme: CupertinoThemeData(
        barBackgroundColor: CupertinoColors.white,
      ),
      home: MyHomePage(title: 'Flutter App'),
    );
  }
}

or

CupertinoPageScaffold(
  navigationBar: CupertinoNavigationBar(
    middle: Text('MyStackPageState'),
    backgroundColor: CupertinoColors.white,
  ),
  child: Container(),
}

Why Flutter's CupertinoNavigationBar overlaps children in CupertinoPageScaffold?

2 Answers2