今回は画面遷移です！

YouTubeでいうと、以下の動画にあたります。

まずはコードを整理

前回の続きで進めていきますが、前回いろんなWidgetを配置して少し煩雑になってしまっているので、Widget build(BuildContext context)関数部分のコードを一旦シンプルに整理しましょう。以下のようにしました。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('KBOYのFlutter大学'),
      ),
      body: Center(
        child: Container(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }

画面は以下のような状態です

ボタンを配置

ボタンを押したら画面遷移するというコードを書いていきたいと思います。

以下の部分のコードを

      body: Center(
        child: Container(),
      ),

以下に変更してみましょう。

      body: Center(
        child: RaisedButton(),
      ),

すると以下みたいになります。

ここからRaisedButtonにパラメーターを追加していきましょう。childにTextを追加します。

        child: RaisedButton(
          child: Text('次へ'),
        ),

そしたらこんな感じになります↓

今のままでは、ボタンを押すことができません。なぜならonPressedというプロパティを追加していないからです。RaisedButtonはonPressedにボタンを押した場合の動作を書くと活性化して、書かないと非活性になります。

では、onPressedを書いてみましょう。onPressedには、(){}というカッコを書きます。この後{}の中に、ボタンを押した時に呼ばれるコードを書いていきます。

        child: RaisedButton(
          child: Text('次へ'),
          onPressed: () {},
        ),

このようにonPressedを書くとこんな感じでボタンが活性化して押せるようになります↓

引き続き、ボタンを押した時に呼ばれるコードを書いていきます。まずはわかりやすくするためにコメントを書いてみます。

        child: RaisedButton(
          child: Text('次へ'),
          onPressed: () {
            // ここにボタンを押した時に呼ばれるコードを書く
          },
        ),

//を書くとその行に書く内容は、コードとしては認識されなくなります。なので、メモなどをするのに便利です。今回は、どこに何を書くか整理しながらコードを書くために、// ここにボタンを押した時に呼ばれるコードを書く というコメントを書いてみました。あとでこの部分に画面遷移するという指示を与えるためのコードを書きます。

では、一旦ボタンのコードはここで止めて、画面遷移先の画面を作っていきましょう。

画面を作成

libディレクトリの中にマウスを合わせて、右クリックしてNew、そしてDart Fileを選択して、新しいdartファイルを作ります。

名前は、next_pageなどにしておきましょう。dartのファイル名は小文字で、区切りを_で行う、lower camel caseで書くのが一般的です。

図のように、next_page.dartができたら、この中にNextPageというclassを作っていきましょう。

この中に、コードを書いていきます。

class NextPage extends StatelessWidget {
  
}

こんな感じで、StatelessWidgetに準拠したNextPageというクラスを作ってみましょう

StatelessWidgetを書くと、自動で、以下のようにimportされると思います。３個くらい候補出てきますが、material.dartのやつ選ぶとこの後がスムーズです。

そしてこのままだとNextPageが赤くなってるので、上にマウスを合わせてCreate 1 missing override(s) を押します。そうすると、StatelessWidgetで必要な画面のWidgetを定義するための関数が自動的に生成されます。

今は以下みたいな状態。ここをカスタマイズして画面を作っていきます。

import 'package:flutter/material.dart';

class NextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    throw UnimplementedError();
  }
}

以下の部分を変更して画面を作っていきましょう。

    // TODO: implement build
    throw UnimplementedError();

main.dartに書いてある、Scaffoldのコードを一旦コピーしてきちゃいましょう。

そうするとこうなります。floatingActionButtonのプロパティ以下だけ消して、bodyもContainerに変えました。

import 'package:flutter/material.dart';

class NextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('KBOYのFlutter大学'),
      ),
      body: Container(
        color: Colors.red,
      ),
    );
  }
}

一旦次の画面がざっくりできたので、main.dartに戻ってボタンを押したら画面遷移をするっていうコードの方を書いていきましょう！

画面遷移のコード

以下のドキュメントを見ると、画面遷移のためのコードが発見できます。

以下のコードを参考にしましょう。

// Within the `FirstRoute` widget
onPressed: () {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondRoute()),
  );
}

これのonPressedの中身ををコピペして、main.dartのボタン押したら呼ばれるコードの部分に貼り付けましょう。

こんな感じ↓
ついでにSecondRouteはNextPageに変えました。これでNextPageに飛べるようになったはずです。

      body: Center(
        child: RaisedButton(
          child: Text('次へ'),
          onPressed: () {
            // ここにボタンを押した時に呼ばれるコードを書く
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => NextPage()),
            );
          },
        ),
      ),

実際に押してみましょう！！

出来ましたね！！！！

さいごに

今回の記事は以上にします。動画では、もう１つの画面遷移の方法も紹介していますので、気になる方はみてみてください。ただ、今回の方法だけ覚えてれば、画面遷移はできるので初心者の方はこれだけ覚えて次に進んでいいと思います！

次は、画面遷移で次の画面に値を渡す方法についての記事です！お楽しみに！

参考文献