MENU
SwiftUI/Flutter/Vue等でアプリ開発
  1. ホーム
  2. dev
  3. Flutter
  4. [Flutter] ExpansionTile の使い方

[Flutter] ExpansionTile の使い方

Flutter

FlutterのExpansionTileウィジェットは、簡単に展開可能なタイルを作成するためのウィジェットです。ユーザーがタップすることで、タイルを展開することができます。ExpansionTileは、アコーディオンウィジェットとしても知られています。

目次

基本的な使い方

このウィジェットは、次のように使用することができます。

ExpansionTile(
  title: Text('タイトル'),
  leading: Icon(Icons.arrow_drop_down),
  children: <Widget>[
    Text('コンテンツ1'),
    Text('コンテンツ2'),
    Text('コンテンツ3'),
  ],
)

上記の例では、ExpansionTileには、タイトルとして「タイトル」というテキストがあります。leadingプロパティには、タイトルの前に表示されるアイコンがあります。また、childrenプロパティには、ExpansionTileが展開されたときに表示されるコンテンツのリストが含まれています。

サンプルコード

上記コードを利用したコードおよび、実行結果は以下のとおりです。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Accordion'),
        ),
        body: ListView(
          children: <Widget>[
            ExpansionTile(
              title: Text('ExpansionTile 1'),
              children: <Widget>[
                ListTile(
                  title: Text('ListTile 1'),
                  subtitle: Text('Subtitle 1'),
                ),
              ],
            ),
            ExpansionTile(
              title: Text('ExpansionTile 2'),
              children: <Widget>[
                ListTile(
                  title: Text('ListTile 2'),
                  subtitle: Text('Subtitle 2'),
                ),
              ],
            ),
            ExpansionTile(
              title: Text('ExpansionTile 3'),
              children: <Widget>[
                ListTile(
                  title: Text('ListTile 3'),
                  subtitle: Text('Subtitle 3'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

ExpansionTile のプロパティ

xpansionTileウィジェットには、多くのプロパティがあります。以下にいくつかの例を挙げます。

  • initiallyExpanded：ExpansionTileを最初から展開したい場合は、trueに設定します。
  • backgroundColor：ExpansionTileの背景色を設定します。
  • trailing：ExpansionTileの末尾に表示されるウィジェットを設定します。
  • onExpansionChanged：ExpansionTileが展開または閉じられたときに実行される関数を設定します。

initiallyExpanded

initiallyExpandedプロパティを使用して、ExpansionTileを最初から展開することができます。

ExpansionTile(
  title: Text('ExpansionTile 1'),
  children: <Widget>[
    ListTile(
      title: Text('ListTile 1'),
      subtitle: Text('Subtitle 1'),
    ),
  ],
  initiallyExpanded: true,
)

onExpansionChanged

onExpansionChangedプロパティを使用して、ExpansionTileが展開または閉じられたときに実行される関数を設定することができます。次の例では、ExpansionTileが展開されたときに”Expanded”というメッセージが表示されます。

ExpansionTile(
  title: Text('ExpansionTile 1'),
  children: <Widget>[
    ListTile(
      title: Text('ListTile 1'),
      subtitle: Text('Subtitle 1'),
    ),
  ],
  onExpansionChanged: (bool expanded) {
    setState(() {
      _isExpanded = expanded;
    });
    print(_isExpanded ? 'Expanded' : 'Collapsed');
  },
),

ListView.builderを利用したアコーディオン

ListView.builderを使用して、リストを作成することができます。各項目は、ExpansionTileウィジェットとして作成されています。この例では、タイトルとして項目のタイトルが表示され、leadingプロパティには、アイコンが表示されます。childrenプロパティには、項目の説明が含まれています。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    List<Map<String, dynamic>> items = [
      {"title": "テスト1", "description": "テスト結果は80点です。"},
      {"title": "テスト2", "description": "テスト結果は100点です。"},
      {"title": "テスト3", "description": "テスト結果は90点です。"},
    ];

    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Accordion'),
        ),
        body: ListView.builder(
          itemCount: items.length,
          itemBuilder: (BuildContext context, int index) {
            return ExpansionTile(
              title: Text(items[index]["title"]),
              leading: Icon(Icons.arrow_drop_down),
              children: <Widget>[
                Text(items[index]["description"]),
              ],
            );
          },
        ),
      ),
    );
  }
}

ExpansionTile のネスト

ExpansionTileを使用して、ネストされたリストを作成することもできます。以下は、ネストされたリストを作成する例です。

ExpansionTile(
  title: Text('タイトル'),
  leading: Icon(Icons.arrow_drop_down),
  children: <Widget>[
    ExpansionTile(
      title: Text('ネストされたタイトル'),
      leading: Icon(Icons.arrow_drop_down),
      children: <Widget>[
        Text('ネストされたコンテンツ'),
      ],
    ),
  ],
)

上記の例では、最初のExpansionTileウィジェットのchildrenプロパティには、さらに別のExpansionTileウィジェットが含まれています。2つ目のExpansionTileは、ネストされたリストを表示するために使用されます。

これらの例を使用して、ExpansionTileウィジェットを使用する方法を学ぶことができます。ExpansionTileは、リストや詳細ビューなど、さまざまなコンテキストで使用することができます。また、ExpansionTileには、多くのプロパティがあり、それらを使用してウィジェットの見た目や動作をカスタマイズすることができます。

Flutter
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！
目次