flutterでページ遷移を実装する（２つのページをボタンで行き来する）

やりたいこと

上記のような、簡単なページを２つ作成し、それぞれのボタン押下で、行ったり来たり、という遷移をさせたい。
「サンプルページ２へ遷移する」ボタンを押すと、サンプルページ２が表示される。
「サンプルページ１へ遷移する」ボタンを押すと、サンプルページ１に戻ってくる。
アプリを起動して最初に表示されるのは「サンプルページ１」とする。

実装

main.dart

各ページの実装

サンプルページ１

//
// サンプルページ１
//
class SamplePage1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: const Text('サンプルページ１'), backgroundColor: Color.fromARGB(100, 0, 255, 0),),
          body: Center(
            child: RaisedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) {
                      return SamplePage2();
                    }
                  ),
                );
              },
              child: Text('サンプルページ２へ遷移する'),
            ),
          ),
        );
  }
}

サンプルページ２

//
// サンプルページ２
//
class SamplePage2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: const Text('サンプルページ２'), backgroundColor: Color.fromARGB(100, 255, 0, 0),),
          body: Center(
            child: RaisedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) {
                      return SamplePage1();
                    }
                  ),
                );
              },
              child: Text('サンプルページ１へ遷移する'),
            ),
          ),
        );
  }
}

解説

class SamplePage1 extends StatelessWidget {

のように、ウィジェット（クラス）を実装する。
これが１つのページに相当する。
クラス内で、ウィジェットをビルドし、
Scaffoldにて、ヘッダやボタンを実装していく。

appBar: AppBar(title: const Text('サンプルページ１'), backgroundColor: Color.fromARGB(100, 0, 255, 0),),

は、ページのヘッダ（緑色の部分）である。

child: RaisedButton(

は、ページ中央のボタンである。

onPressed: () {

が、押されたときの挙動を示し、

Navigator.push

にて、画面遷移を指定する。
遷移先は

Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) {
                      return SamplePage2();
                    }

のように、別のページ（ウィジェット）を指定する。
ここでは「SamplePage2」を指定しているので、サンプルページ２へ遷移する。

起動時に「サンプルページ１」を表示する設定

main.dart

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: SamplePage1(),
    );
  }
}

解説

runApp(MyApp());

にてMyAppが起動し、MyAppにて、

 home: SamplePage1(),

を指定しているので、アプリ起動時に、最初に表示されるページが「サンプルページ１」となる。

完成形 main.dart

import 'package:flutter/material.dart';

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

//
// サンプルページ１
//
class SamplePage1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: const Text('サンプルページ１'), backgroundColor: Color.fromARGB(100, 0, 255, 0),),
          body: Center(
            child: RaisedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) {
                      return SamplePage2();
                    }
                  ),
                );
              },
              child: Text('サンプルページ２へ遷移する'),
            ),
          ),
        );
  }
}

//
// サンプルページ２
//
class SamplePage2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: const Text('サンプルページ２'), backgroundColor: Color.fromARGB(100, 255, 0, 0),),
          body: Center(
            child: RaisedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) {
                      return SamplePage1();
                    }
                  ),
                );
              },
              child: Text('サンプルページ１へ遷移する'),
            ),
          ),
        );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: SamplePage1(),
    );
  }
}