先生と生徒の会話形式で理解しよう

生徒

「Flutterでボタンを押したときに別の画面に移動する方法はありますか？」

先生

「FlutterにはNavigatorという機能があって、それを使えば簡単に画面遷移ができますよ。」

生徒

「画面を行ったり来たりするようなアプリも作れるんですか？」

先生

「もちろんです！Flutterでは戻る操作も簡単にできます。では、基本から応用まで順番に見ていきましょう！」

1. Flutterのナビゲーションとは？

Flutter（フラッター）のナビゲーションとは、ユーザーがある画面から別の画面に移動したり、元の画面に戻ったりする仕組みです。AndroidやiOSアプリの開発において、画面遷移（スクリーンの移動）は非常に重要な要素です。

Flutterでは、NavigatorというウィジェットとMaterialPageRouteを使うことで、画面の切り替えを簡単に実装できます。

2. Navigator.pushで画面を追加する

Navigator.pushは、現在の画面の上に新しい画面を重ねて表示する方法です。よく使う基本形のコードを見てみましょう。


Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => const SecondPage()),
);

MaterialPageRouteを使って新しい画面（SecondPage）を作り、その画面に遷移します。ユーザーの操作で新しい情報やページを見せたいときに便利です。

3. Navigator.popで前の画面に戻る

ユーザーが戻るボタンを押したときなどに使うのがNavigator.popです。


Navigator.pop(context);

これで前の画面に戻ることができます。戻る処理はAndroid端末では端末の戻るボタン、iOSでは画面左端からのスワイプといった操作でも同様に実行されます。

Flutterを「実務レベル」で使えるようになりたい人や、 iPhone / Android両対応アプリ開発の流れをまとめて学びたい人には、定番の実践書がこちらです。

Flutter実践開発をAmazonで見る

※ Amazon広告リンク

4. 画面間でデータを受け渡す方法

Flutterでは、ある画面から次の画面へデータを渡すことも簡単にできます。


Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => SecondPage(message: 'こんにちは！'),
  ),
);

このようにSecondPageのコンストラクタに値を渡すことで、次の画面でそのデータを表示できます。チャットアプリや入力フォームなど、情報の引き継ぎが必要な場面で活用されます。

5. 遷移先から戻り値を受け取る

Navigator.popで戻る際に、値を返すことも可能です。以下のコードはpopで結果を返し、呼び出し元でその結果を受け取ります。


final result = await Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => const InputPage()),
);
print(result);


// 遷移先の画面で
Navigator.pop(context, 'ユーザーが入力した値');

このように非同期処理を使って、データのやりとりができるため、フォームや選択肢の入力結果などを前の画面に返したい場合に便利です。

6. Navigator.pushReplacementで現在の画面を置き換える

pushReplacementは現在の画面を新しい画面で置き換える操作です。戻る操作を無効にしたいときに使います。ログイン後の画面遷移などで利用されます。


Navigator.pushReplacement(
  context,
  MaterialPageRoute(builder: (context) => const HomePage()),
);

戻るボタンを押しても、ログイン画面には戻れないようになります。

7. ルーティングの名前付き設定（named routes）

Flutterの画面遷移には、ルート名を使ったnamed routesという方法もあります。これにより、アプリ全体で画面を一元管理でき、メンテナンス性が向上します。


void main() {
  runApp(MaterialApp(
    initialRoute: '/',
    routes: {
      '/': (context) => const FirstPage(),
      '/second': (context) => const SecondPage(),
    },
  ));
}


// 遷移するには
Navigator.pushNamed(context, '/second');

大規模アプリや複数画面を使うアプリでは、この方法が推奨されます。

8. Flutterの画面遷移でよくあるミスと対策

初心者がFlutterで画面遷移を扱う際によくあるエラーやミスとして、以下が挙げられます。

画面遷移後に戻る処理を忘れてスタックが溜まる
パラメータの渡し方で型エラーが出る
contextが存在しない場所でNavigatorを呼び出す

これらの対策として、必ず戻る処理を考慮したUI設計を行い、型安全なデータの受け渡しや、BuildContextの有効範囲を意識したコードを書くことが大切です。

9. 応用編：画面遷移＋アニメーション

Flutterでは、画面遷移時にアニメーションを付けることも可能です。たとえばフェードインやスライドインなどをカスタムトランジションとして指定できます。


Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => const SecondPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return FadeTransition(opacity: animation, child: child);
    },
  ),
);

ユーザーにとって直感的で使いやすいUXを実現するために、アニメーションを活用するのはとても効果的です。

この記事を読んだ人からの質問

Flutterのナビゲーションと画面遷移を完全マスター！初心者でもわかる画面移動の基本と応用