タップして個別に拡大表示 -ひとりアドベントカレンダー Flutter編 2018 その9-

マテリアルアイコンを一覧表示という目的はほぼ達成しましたが、ときには個別に拡大してみたくなるときもあります。
ということで、9日目はタップで画面遷移させて拡大表示させてみます。

昨日までの内容と今後については目次を参照してください。

画面を遷移させるには、「遷移先の画面を作成」「遷移させるアクションの作成」という2つの対応が当然ながら必要です。

今回もGitHubのプロジェクトにChapter9ブランチを作っているので参照してください。

さて、順に見ていきましょう。

遷移先の画面を作成
まずは遷移先の画面を先に作ってしまいましょう。

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

class VIcon extends StatelessWidget {
  final MIcon icon;

  VIcon({@required this.icon});

  @override
  Widget build(BuildContext context) {
    Size deviceSize = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        title: Text(this.icon.key),
      ),
      body: Center(
        child: Icon(
          this.icon.iconData,
          size: 0.8 *
              ((deviceSize.width < deviceSize.height)
                  ? deviceSize.width
                  : deviceSize.height),
        ),
      ),
    );
  }
}

シンプルにアイコンを画面中央に表示させるだけの画面です。前回利用したMediaQueryをまた利用して画面幅の80%で表示させています。
まあ普通のFlutter画面の作りだと思うので問題ないでしょう。

遷移させるアクションの作成
さて、遷移させるアクションはどうしたら良いでしょう？アイコン一つづつをボタンにする？FlatButtonを使って透明なボタンにすることもできますが、少しイメージが違います。
今回はCardのどこをタッチしても遷移するようにしてみましょう。

ですが、Cardの引数には

アクションが用意されていません。

こんなときはGestureDetectorを使います。タップ、ダブルタップ、長押し、スワイプ、なんでも準備されています。

実装はこんな感じにしてみました。

return GridView.builder(
  itemCount: icons.length,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: columnCount,
  ),
  itemBuilder: (context, index) {
    MIcon icon = icons[index];
    return GestureDetector(
      onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => VIcon(icon: icon),
            fullscreenDialog: true,
          )
        );
      },
      child: Card(
        child: Icon(icon.iconData, size: columnWidth * 0.8),
      ),
    );
  },
);

ちなみに、画面遷移としてはMaterialPageRouteの他にCupertinoPageRouteというものが用意されています。
なにが違うかと言うと、
・MaterialPageRoute： 下からニョキッと出てくる
・CupertinoPageRoute：右からシュワッと出てくる
という感じです。
個人的には、GridViewであればMaterialを、ListViewであればCupertinoをと使い分けています。

また、fullscreenDialogにtrueを指定しています。これは、下からニョキッと出てきたのにバックボタンで戻ることになってしまう対策です。

ということで、出来上がりはこんな感じです。

ということで、今回はこれで終わりです。
GestureDetectorはいろいろな場面で使うことになりますので、また後からも登場予定です。

・・・

簡単な内容であればそれほど時間掛けずにアップ出来るようになってきた。
noteのいいねとかTwitterのフォローとかお待ちしています。