[Flutter]Card(カード)からダイアログ(dialog)を表示するには？

どうも、ちょげ(@chogetarou)です。

Cardをタップした際にダイアログを表示させる方法を紹介します。

方法
使用例

方法

Cardからダイアログを表示するには、GestureDetectorとshowDialogを使います。

まず、CardをGestureDetectorでラップします。

次に、GestureDetectorの引数「onTap」に関数を指定します。

そして、関数の処理でshowDialogを呼び出し、showDialogの引数「builder」で表示するダイアログをreturnします。

GestureDetector(
  onTap: () {
    showDialog(
      context: context,
      builder: (context) {
        return Dialog(); //ダイアログとして表示するものを指定
      },
    );
  },
  child: Card(),
),

これでCardをタップした際にダイアログを表示させることが出来ます。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: GestureDetector(
          onTap: () {
            showDialog(
              context: context,
              builder: (context) {
                return AlertDialog(
                  title: Text('こんにちは!'),
                  content: Text('いい天気ですね'),
                );
              },
            );
          },
          child: Card(
            child: ListTile(
              title: Text('あいさつ'),
            ),
          ),
        ),
      ),
    );
  }