Flutter：コピペだけで画面遷移を組み込むまでの超最速の手順

Flutterでスマホ画面を画面遷移させる方法です。”コピペだけ”というのは公式サイトのドキュメントに載っているサンプルをコピペするだけという意味です。Flutterはまだまだ書籍が少ないと言われていますが、公式サイトのサンプルだけで初期としては十分すぎるほどの情報があります。

なので、初級本の購入はあまりおすすめできませんね。まずは公式サイトで十分だと思います。

完成形

今回の完成形はこちらです。Furst Routsという初期ページ（左側画面）からSecond Routsというページ（右側画面）に遷移して且つ戻れるような動きとなります。

 

flutter.devの確認

まずは公式サイトのサンプルの見方ですが、まずは公式サイトを開きましょう。上部にある「Doc」をクリックします。

 

次に「Cookbook」をクリックします。

 

サンプルの一覧が現れます。その中の「Navigation」カテゴリの「Navigate to a new screen and back」のサンプルを今回は使います。

 

画面の下の方にソースのサンプルがあります。まずはFirstRouteクラスとSecondRouteクラスを確認しましょう。

↓

 

ソースコードにコピペ

それではコピペしていきましょう。Flutter側はプロジェクトを作成したばかりの状態です。

_MyHomePageStateクラスの中身をすべて削除しましょう。その中にサンプルコードのFirstRouteクラスの中身をコピペします。

 

 

次に新しいファイルを作成します。２ページ目の画面です。ファイル名は適当でOK。とりあえずsecond_route.dartとしました。

 

サンプルページからSecondRouteクラスをそっくりコピペします。

 

import文を挿入します。赤波線のところをクリックして電球マークを右クリックすると挿入できます。３種類のmport文を提示されますが、とりあえずmaterial.dartを選んでおきました。

 

main.dartに戻ってSecondRouteクラスを認識させるために上と同じ要領でimport文を挿入します。

 

ここまででアプリの動きをチェックしてみましょう。初期画面の「Open route」ボタンをタップすると次画面に移るはずです。タイトルバーの「←」をタップすると初期画面に戻ります。「Go back!」ボタンでは戻れませんので、これからここを実装していきます。

 

２ページ目のコードの中にRaseButtonのタップイベントonPressedがあります。その中にサンプルページのソースコードをコピペすればOKです。

 

ここまでやれば最初に紹介した完成形の動きになります。

 

公式ページのサンプルは豊富にあるので、書籍を買う前にまずは一通りやってみると良いと思います。

プロジェクト作成から完成までを動画にしました。ものの6分で完成しています。

 

 - Flutter/Dart