【Flutter入門】ボタンを押したら別ページに遷移する-料理に例えたい

こんにちは、今回はflutterの「ページ遷移」という機能を作っていきましょう！
flutter cookbookのAnimate a page route transitionという機能を使っていきます🍳

※source→flutter cookbook
https://docs.flutter.dev/cookbook/animation/page-route-animation

いつもの↓

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).push(_createRoute());
          },
          child: const Text('次の食材（Page 2）へ'),
        ),
      ),
    );
  }
}

に加えて↓

// 隠し味（画面遷移用の関数）
Route _createRoute() {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => const Page2(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      // ここにスパイス（アニメーション）を加えることもできる
      return child;
    },
  );
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Page 2（次の食材）')),
      body: const Center(child: Text('こちらがPage 2の味わい深い食材！')),
    );
  }
}

【超ざっくりpoint】
Navigator = 画面遷移を管理するFlutterの仕組み
Navigator.of(context) = いまの BuildContext から Navigator を取得
.push() = 「新しい画面をスタックに積む」→ つまり新しいページを開く

【パーツごとの超ざっくり解説】
① main()
🍳 「キッチンを開く合図」
アプリを起動するときにrunAppでMyAppを呼んでスタート。

② MyApp
🍽️ 「レストランの外観とメニュー表」
MaterialAppでテーマやタイトル、最初のホーム画面を決めてる。
ここで MyHomePage が最初に出てくる料理。

③ MyHomePage
🍛 「最初にお出しする料理（メイン画面）」
AppBarにタイトルがあって、ボタンが一個ある。
ボタンを押すと…次の料理（Page2）が出てくる！

④ Navigator.of(context).push(_createRoute())
🚪「次の料理をサーブする厨房の扉」
この部分で「次のページに行ってください！」とお願いして、
そのレシピ（ルート）を _createRoute() で指定してる。

⑤ _createRoute()
🍷 「隠し味のルートレシピ」
PageRouteBuilder を使って「次にどんな料理をどうやって運ぶか」を決めてる場所。
今はスパイス（アニメーション）なしでシンプルに「そのままサーブ」してる。
ここにアニメーションを加えると、料理を華やかに運ぶ演出もできる！

⑥ Page2
🍮 「次に出てくる別腹のデザート！」
AppBarのタイトルを変えて、
「これがPage2の味わい深い食材です！」と表示してくれる画面。

【超ざっくり全体まとめ】
アプリが起動（キッチンオープン）

最初の料理（MyHomePage）が出てきて、

「次の食材へ」ボタンを押すと

厨房の裏レシピ（_createRoute）が呼ばれて

次の料理（Page2）が優しくテーブルに届けられる

必要ならアニメーションで演出もできる