Why Flutter's CupertinoNavigationBar overlaps children in CupertinoPageScaffold?
1,657
Solution 1
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
),
)
Solution 2
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(),
}
Author by
4ntoine
Updated on December 16, 2022Comments
-
4ntoine over 1 year
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.