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

# やりたいこと

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75451/6051f36b-7939-5c72-b0e8-e2805006eee0.png)

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

# 実装

main.dart

## 各ページの実装


### サンプルページ１
```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('サンプルページ２へ遷移する'),
            ),
          ),
        );
  }
}
```

### サンプルページ２
```dart
//
// サンプルページ２
//
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('サンプルページ１へ遷移する'),
            ),
          ),
        );
  }
}
```

## 解説


```dart
class SamplePage1 extends StatelessWidget {
```

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

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

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


```dart
child: RaisedButton(
```

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


```dart
onPressed: () {
```

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

```dart
Navigator.push
```

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

```dart
Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) {
                      return SamplePage2();
                    }
```
のように、別のページ（ウィジェット）を指定する。
ここでは「SamplePage2」を指定しているので、サンプルページ２へ遷移する。




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

main.dart

```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(),
    );
  }
}
```

## 解説


```dart
runApp(MyApp());
```

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

```dart
 home: SamplePage1(),
```

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



# 完成形 main.dart

```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(),
    );
  }
}

```