[Flutter]Cardを詳細表示(detail)できるようにするには？

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

Cardをタップして詳細表示できるようにする方法を紹介します。

方法
1. パッケージ
2. 実装
まとめ

方法

Cardを詳細表示するには、「expansion_tile_card」パッケージを使います。

パッケージ

まず、「pubspec.yaml」ファイルに以下のコードを追加します。

dependencies:
  expansion_tile_card: ^2.0.0

そして、パッケージをインポートします。

import 'package:expansion_tile_card/expansion_tile_card.dart';

実装

まず、GlobalKeyを用意します。

final GlobalKey<ExpansionTileCardState> cardKey = new GlobalKey();

次にこのキーをExpansionTileウェジェットの引数「key」に指定し、通常のCardと同じように見た目の設定をします。

ExpansionTileCard(
          leading: Icon(Icons.note), //左側
          title: Text('タイトル'), //タイトル
          key: cardKey,
        )

最後に、詳細表示したいウェジェットを、引数「children」に指定します。

ExpansionTileCard(
          leading: Icon(Icons.note),
          title: Text('タイトル'),
          key: cardKey,
          children: [
            Text('childrenに指定されたウェジェットが縦並びに表示されます。'),
          ],
        )