Flutter Cupertino appbar hides screen space

Question

I have this annoying issue with the Cupertino widgets. When I create a super simple app setup (scaffold, navbar, one text item) the text seems to start far outside of the viewport.

heres the example:

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyAppState();
  }
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: CupertinoPageScaffold(
        navigationBar: CupertinoNavigationBar(
          middle: Text('Me Title'),
        ),
        child: Column(
          children: <Widget>[
            Text(
              "No matter how short or long your journey to your accomplishment is, if you don't begin you can't get there. Beginning is difficult, but unavoidable!",
              style: TextStyle(fontSize: 30),
            ),
          ],
        ),
      ),
    );
  }
}

which leads to this result.

The "native" Widgets (MaterialApp, Scaffold, AppBar) lead to this and work just fine:

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Me Title'),
        ),
        body: Column(
          children: <Widget>[
            Text(
              "No matter how short or long your journey to your accomplishment is, if you don't begin you can't get there. Beginning is difficult, but unavoidable!",

Can somebody help out here? This is a bit annoying and I imagine this will f*** up every layout I try to build on it.

Thanks in advance!

Answer 1

The solution that worked for me is wrapping the central Column into a SafeArea widget (screenshot):

    return CupertinoApp(
      home: CupertinoPageScaffold(
        navigationBar: CupertinoNavigationBar(
          middle: Text('Me Title'),
        ),

        // the SafeArea is new!
        child: SafeArea(

          // that's unchanged.
          child: Column(
            // ... etc.