Flutterデモアプリをカスタマイズしてみよう④

概要

Flutterデモアプリを少しずつ弄っていってFlutterに慣れていくのが目的です

前回の記事はこちら

前回までのコードは以下のようになっています

▼ クリックで展開

import 'package:flutter/material.dart';

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

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("フラッターデモホームページ"),
        actions: [
          Icon(Icons.adb_outlined),
        ],
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'ボタンを押した回数は  ',
                ),
                Text(
                  '$_counter',
                  style: Theme.of(context).textTheme.headline4,
                ),
                Text(
                  '  回',
                ),
              ],
            ),
             RaisedButton(
              child: Text('ボタン'),
              color: Colors.blue,
              textColor: Colors.white,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10),
              ),
              onPressed: _incrementCounter,
            ),
          ]
        ),
      ),
      floatingActionButton: FloatingActionButton(
        // onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

今回行うこと

今回は前回の続きで画面遷移の実装を行なっていきます

• 新しいファイルの作成
• classの作成
• Scaffoldの中身の記述
• main.dartに遷移したいファイルを記述
• next_pageからmainに戻る記述

dartファイルの作成

遷移後のページのファイルを作る為、新しいdartファイルを作っていきます。

Androidstudioのファイル一覧でファイルを作りたいところで左クリックを押し、
new→Dart Fileを選択します。
今回はlibフォルダー内にファイルを作成していきます

ファイル名は適当にnext_pageにします
（スネークケースでの命名になります）

next.page.dartというファイルが出来ました！

Next_pageのclass

新しいファイルが出来たら新たに記述をしていきます

まずはclassを作っていきます

class NextPage extends StatelessWidget {
}

と記述します
一番上にcupertinoがimportされているという記述が自動生成されるので
materialに変更しておきます

↓

NextPageに赤波線が出ると思います

その上でクリック押すと、赤い電球が出てきます

それをクリックし、Create 1 missing override(s)をクリックします
すると以下のような記述が自動生成されました

中のTODO…とthrow…はいらないので削除しておきます

Next_pageのscaffold

scaffoldの中身を書いていきます

AppBar

まずはmainページと同様にAppBarを作成していきます
main.dartのAppBarの部分を参考にそのままコピーします
遷移先だとわかるように以下の変更を加えました

class NextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("次のページ"), //変更
          actions: [
            Icon(Icons.adb_outlined), //変更
          ],
        ),

body

次にbodyを実装していきます
今回は分かりやすく、背景の色を変えていきましょう

・bodyにContainerと指定して、背景に色をつけます
・画面の真ん中にTextも表示させてみます
・今回はさらにTextのstyleも変更してみます

      body: Container(
        color: Colors.red, //背景色
        child: Center(
            child: Column(mainAxisSize: MainAxisSize.min,
                children: [
                  Text('遷移しましたっ！',
                      style: TextStyle( //この中にstyleを記述
                        fontSize: 30, //サイズ
                        fontWeight: FontWeight.bold, //文字の太さ 
                      )),
        ])),
      ),

floatingActionButton

floatingActionButtonを戻るボタンとして活用します
「→」アイコンではおかしいので「←」アイコンに変更します

      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.arrow_back), //アイコン変更
        onPressed: () {
        },
      ),

nextpageの準備が整いました。
この時点では確認出来ないので次に進みます

いよいよ次が遷移の記述です

遷移の仕方

遷移の仕方のは２種類の方法があるようです

・あらかじめroutesに登録しておく方法
・必要に応じてroutesを指定し、登録しておく方法

どちらでも良いんですが
今回は下のroutesを必要に応じて登録していく方をやっていきます

遷移についての考え方で２つのキーワードがあります。
それはpushとpopです

私の解釈で簡単に言えば
pushは進む
popは戻る
厳密に違うかもしれませんがこう覚えておきます笑

ではまずmain.dartに記述していきます
ボタンを押した時に反応して欲しいのでonPressedの中に記述します

      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.arrow_forward),
        onPressed: () {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => NextPage()), //NextPageを指定
          );
        },
      ),

これで遷移してくれます
ホットリロードして試してみます

遷移しました！！
しかし、今の時点で戻るボタンは反応しません
戻るボタンを実装しましょう

next_page.dartに記述します
これもonPressedの中に記述します

      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.arrow_back),
        onPressed: () {
          Navigator.pop(context); //追記
        },
      ),

では試してみます

戻るボタンも反応してくれました！！

まとめ

今回は遷移を実装しました
ページ遷移はほぼ必ず必要になるのでマスターしていきたいですね！

最後まで読んで下さってありがとうございました！