Flutterで画面遷移を実装する方法

2021-03-15

はじめに

今回は、Flutterで画面遷移を実装する方法を学びました。また、前回の記事で作成したアプリに、ハンバーガボタンを追加して、お気に入りリスト画面に遷移する機能を実装しました。

Flutterで画面遷移を実装しましょう

Amazon Primeにウマ娘が入っていてずっと見てるのですが、スペシャルウィークが可愛いくて推せる。皆さんご存知無いと思いますが、うまぴょい伝説はコードを書くのにとても相性が良いのです。 Flutterで画面遷移するアプリケーションを作りましょう。今回も公式チュートリアルを元に進めていきます。参考： Flutter codelab

前回までの記事

前回までに作成してきたアプリをベースに進めます。まずはこの記事をベースに追加実装を行います。

Flutterのリストにアイコンを追加する方法

lib/main.dart

アップバーにハンバーガボタンを追加する

AppBarにactionsでアイコンボタンを追加する。 IconButton()には、アイコンとボタンを押されたときに呼び出される関数を指定します。

      appBar: AppBar(
        title: Text('Startup Name Generator'),
+        actions: [
+          IconButton(icon: Icon(Icons.list), onPressed: _pushSaved),
+        ],
      ),

ハンバーガボタンが押された処理を書く

Navigator.of(context).pushで画面遷移Stackに引数内で作る画面を追加します。画面を廃棄するときは、pop関数を活用するのが一般的です。

ナビゲーターはアプリバーに「戻る」ボタンを追加されるため、Navigator.popを明示的に実装する必要がないです。戻るボタンをタップすることでホームルート画面遷移します。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Startup Name Generator'),
        actions: [
          IconButton(icon: Icon(Icons.list), onPressed: _pushSaved),
        ],
      ),
      body: _buildSuggestions(),
    );
  }

+  void _pushSaved() {
+    Navigator.of(context).push(
+     // Add lines from here...
+     MaterialPageRoute<void>(
+       builder: (BuildContext context) {
+         final tiles = _saved.map(
+           (WordPair pair) {
+             return ListTile(
+               title: Text(
+                 pair.asPascalCase,
+                 style: _biggerFont,
+               ),
+             );
+           },
+         );
+         final divided = ListTile.divideTiles(
+           context: context,
+           tiles: tiles,
+         ).toList();
+          return Scaffold(
+           appBar: AppBar(
+             title: Text('Saved Suggestions'),
+           ),
+           body: ListView(children: divided),
+         );
+       },
      ), 
    );
  }

実行結果

星をつけた英単語がリストに保存されています。ハンバーガボタンを押すと保存したリストが表示されます。

テーマ変更する方法

アプリケーションバーが白くしてみます。 widget buildの中にthemeを新しく追加します。

class MyApp extends StatelessWidget {
  // #docregion build
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Startup Name Generator',
+      theme: ThemeData(
+        primaryColor: Colors.white,
+      ),
      home: RandomWords(),
    );
  }
  // #enddocregion build
}

このコードを実行すると画面上部が白くなります。

まとめ

Flutterでは、Navigatorを使って画面遷移を実装することができます。また、アプリケーションバーにハンバーガボタンを追加して、お気に入りリスト画面に遷移する機能を実装することができます。さらに、テーマを変更することで、アプリケーションバーの背景色などをカスタマイズすることができます。これらの機能を使いこなすことで、より魅力的なFlutterアプリを作ることができます。