今回は、Flutter でページ遷移をする方法を紹介します。

まずは、MyHomePage と MySecondPage を作成します。

MyHomePage にあるボタンをタップすると、MySecondPage へ遷移するようにします。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Page Route',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("First Page"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {},
          child: const Text("to Second Page"),
        ),
      ),
    );
  }
}

class MySecondPage extends StatelessWidget {
  const MySecondPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Second Page"),
      ),
      body: Container(
        color: Colors.lightGreenAccent,
        child: const Center(
          child: Text("This is Second Page!"),
        ),
      ),
    );
  }
}

ページ遷移をするには、Navigatorを使用します。

MyHomePage のElevatedButton内にあるonPressNavigatorを設定しましょう。

Navigatorpushで遷移先を指定します。

child: ElevatedButton(
  onPressed: () {
    Navigator.push();
  },
  child: const Text("to Second Page"),
),

pushの第一引数にcontext、第二引数にCupertinoPageRouteを指定します。

CupertinoPageRouteにはbuilderを設定し、遷移先である MySecondPage を返します。

onPressed: () {
  Navigator.push(context, CupertinoPageRoute(builder: (context) {
    return const MySecondPage();
  }));
},

では、動作確認しましょう。

image2

『to Second Page』ボタンをクリックすると、

image3

簡単に MySecondPage へ遷移できました。

エミュレーター画面左上の『<』をタップすると、

image4

MyFirstPage に戻りました。

ブログ一覧