超カンタン!Flutterで画面遷移を実装して、Themeを変える

2021-03-15

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
}

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

まとめ

これでチュートリアルのPart2が終わりました。 少しずつFlutterに慣れてきた気がします。