【Flutter】クリックイベントの実装【日本語】

Flutterのクリックイベントを実装していきます。

onTapとonPressedの違いについても、Flutter初心者である自分なりの解釈で簡単に記載しておきます。

他のプログラミングに関する記事はこちら

スポンサーリンク

前提

Flutter導入後の初期状態から始めます。

過去にFlutterの導入方法を簡単にまとめていますので、まだ導入が済んでいない場合は以下を参照してください。

簡単導入~サンプルアプリのデバック起動まで

備忘録ついでにFlutterの導入手順について簡単にメモしていきます。 本記事でサンプルアプリのデバック起動までやります。 所要時間30分~60分程度。 他のプログラミングに関する記事はこちら スポンサーリンク […]

onPressedで実装

Flutterでは、onPressedを使うことで簡単にクリックイベントが実装できます。

onPressedを使う場合はボタンを用意する必要がありますので、以下みたいな記述をします。

※ボタンではなくウィジェット(Textとかそういうやつ)にクリックイベントを実装する場合はonTapで実装します(後述)

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello World',
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.white,
        ),
        body: FlatButton(
          child: Text("クリックしてみそ"),
          onPressed: (){
              print("クリックされたぞ");
          }
        ),
      ),
    );
  }
}

 

大事なのは14~19行目の以下の記述です。

body: FlatButton(
          child: Text("クリックしてみそ"),
          onPressed: (){
              print("クリックされたぞ");
          }
        ),

 

FlatButtonで「クリックしてみそ」というテキストのボタンを作成し、クリックしたときにprintでデバック画面に「クリックされたぞ」と入力される設定です。

クリックされたときに行いたい処理をonPressedの中に書けばいいです。

スポンサーリンク

onTapで実装

次はonTapで実装します。

onTapとonPressed、どっちを使ってもクリックイベントを実装できますが、その使い分けについては後述します。

 

早速、コードは以下の通りです。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello World',
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.white,
        ),
        body: GestureDetector(
          onTap: () {
            print("クリックされたぞ");
          },
          child: Text("クリックしてみそ"),
        ),
      ),
    );
  }
}

 

大事なのは14~19行目の以下の記述です。

body: GestureDetector(
  onTap: () {
    print("クリックされたぞ");
  },
  child: Text("クリックしてみそ"),
),

 

GestureDetectorでジェスチャーイベント(※)を取得することが出来るので、その中でもonTapでタップの動作をきっかけにしてデバック画面に「クリックされたぞ」と表示させています。

※ジェスチャーイベントとは、スマホで行われる指での操作……タップとかスワイプとかそういうやつのことみたいです

スポンサーリンク

onPressedとonTapの使い分け(私感)

正直なところonPressedとonTapだけで見れば違いがないような気がします。

onPressedの場合は、FlatButtonを使うので単純なボタンを作成する場合に、

onTapの場合は、GestureDetectorを使うので他にもスワイプとかそういったジェスチャーイベントを設定したい場合に、

それぞれ使うのかなってぐらいです。

 

要約すると、

onPressed→簡素なクリックイベントを実装する際に使用

onTap→リッチなクリックイベントを実装する際に使用

程度の違いのような気が……。

 

記述量もほぼ変わらないので、私は基本onTapで実装していこうかと思います。

もしonPressedを使わなければいけないという場面に直面した際には、この記事を更新します。

 

他のプログラミングに関する記事

プログラミングまとめ

プログラミングに関する記事です。 言語とかツールごとにまとめています。 スポンサーリンク [adcode] Flutter ・簡単導入~サンプルアプリのデバック起動まで ・文字の表示(重ねて[…]

IMG

スポンサーリンク