Flutterで超シンプルな画面遷移

Flutterで画面遷移を実装する一番シンプルな方法を紹介します。

FlutterではNavigatorを使って画面を切り替えます。
画面遷移 → Navigator.push
戻る → Navigator.pop

実装方法

画面遷移用のボタンを追加します。

main.dart

ElevatedButton(
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => SecondPage(),
      ),
    );
  },
  child: Text('次の画面へ'),
)

second_page.dart

import 'package:flutter/material.dart';

class SecondPage extends StatelessWidget {
  const SecondPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('2ページ目')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('戻る'),
        ),
      ),
    );
  }
}

遷移元の画面に遷移先のインポートを行います。
import 'second_page.dart';
これで遷移が可能になりました。
単純な画面遷移は簡単ですね。

実行サンプル