[Flutter]Cupertino(iOS風)でナビゲーションバー(navigationbar)を追加するには？

どうも、ちょげ(@chogetarou)です。

Cupertinoでナビゲーションバーを表示する方法を紹介します。

方法
使用例

方法

Cuopertinoでナビゲーションバーを追加するには、CupertinoPageScaffoldとCupertinoNavigationBarウェジェットを使います。

まず、CupertinoPageScaffoldを用意します。

そして、CupertinoPageScaffoldの引数「navigationBar」にNavigationBarウェジェットを指定します。

CupertinoPageScaffold(
  navigationBar: CupertinoNavigationBar( ),
  child: Center(
    child: Text('Hello'),
  ),
),

最後に、CupertinoNavigationBarの引数でナビゲーションバーの設定をすれば、Cupertinoでナビゲーションバーを追加することができます。

使用例

以下は、使用例です。

class MyApp extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: CupertinoPageScaffold(
        navigationBar: CupertinoNavigationBar(
          middle: Text('Navigation Bar'),
        ),
        child: Center(
          child: Text('Hello'),
        ),
      ),
    );
  }
}