【Flutter入門】5．画面のタップを取得する！

スマホアプリを作って公開するまでの軌跡！第5回

今回は、スマホ画面操作を処理する方法を試していきます。

GestureDetector ウィジェット
テストプログラムを作ってみた
まとめ

GestureDetector ウィジェット

タップやドラッグなどの操作を処理するには、GestureDetectorウィジェットを使います。

GestureDetector(
  onTap: () {
    print('TAP');
  },
),

下記サイトを参考にさせていただきました。

【Flutter】タップ、ドラッグ、ピンチ、回転などのジェスチャー操作

Flutter のウィジェットにはタップ時の処理などが予め用意されている場合がありますが、用意されていない場合や、ドラッグ／ピンチ／回転／指圧（筆圧？）など様々なジェスチャー操作に対応したい場合、GestureDetector ウィジェット

テストプログラムを作ってみた

第1の画面で、画面をタップした回数をカウントして、第2の画面でカウントした回数を表示するようなプログラムを作ってみました。

前回学習した provider を交えながら作ってみました。

Counter（新しいクラス）

回数を保持するためのクラスを追加します。

回数をカウントするだけであれば、int 型の変数を宣言するだけで良いです。
しかし、これから実際にプログラムを作成することを考えると単一の変数では物足りなくなるので、初めからクラスオブジェクトで扱う方法を習得した方が良いと個人的には思います。

model フォルダを追加して、counter.dart を追加しました。

中身はこんな感じです。

import 'package:flutter/foundation.dart';

class Counter with ChangeNotifier {
  int _count = 0;
  // getter
  int get count => _count;
  // setter
  set count(int count) {
    _count = count;
    notifyListeners();
  }
}

main.dart

まずはmain.dartでCounterクラスのオブジェクトを生成します。

import 'package:flutter/material.dart';
import 'package:flutter_application_1/model/counter.dart';
import 'package:flutter_application_1/ui/home.dart';
import 'package:provider/provider.dart';

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return Provider(
      create: (_) => Counter(),
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(primarySwatch: Colors.blue),
        home: HomePage(),
      ),
    );
  }
}

home.dart

第1の画面の本体です。

Container の中をタップするとタップした数をカウントアップします。

onTap() メソッドを別のメソッドに変更すれば応用が利きます。

import 'package:flutter/material.dart';
import 'package:flutter_application_1/model/counter.dart';
import 'package:flutter_application_1/ui/page_b.dart';
import 'package:provider/provider.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Counter counter = context.watch<Counter>();

    return Scaffold(
      body: Container(
        alignment: FractionalOffset.center,
        height: 400.0,
        width: 400.0,
        color: Colors.yellow,
        child: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              GestureDetector(
                onTap: () {
                  counter.count++;
                },
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.of(context).push(
            MaterialPageRoute(builder: (_) => PageB()),
          );
        },
        child: Icon(Icons.navigate_next),
      ),
    );
  }
}

page_b.dart

前の画面でタップした回数を表示します。

import 'package:flutter/material.dart';
import 'package:flutter_application_1/model/counter.dart';
import 'package:provider/provider.dart';

class PageB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Counter counter = context.watch<Counter>();

    return Scaffold(
      body: Center(
        child: Text(counter.count.toString()),
      ),
    );
  }
}