【Flutter】ExpansionTileの使い方｜アコーディオンメニューを実装

2023年7月17日

FlutterのウィジェットExpansionTileの使い方を紹介します。

ExpansionTileを使えば開閉可能なリスト（アコーディオンメニュー）を実装できます。

ExpansionTileの使い方

ExpansionTileのtitleにアコーディオンメニューが閉じている（または開いている）場合に表示しているウィジェットを渡し、childrenにアコーディオンメニューで表示したいウィジェットを1つまたは複数追加します。

ExpansionTileのデフォルトではアコーディオンメニューは閉じています。

ExpansionTile(
  title: Text('果実'),
  children: [
    ListTile(
      title: Text('リンゴ'),
      onTap: () {},
    ),
    ListTile(
      title: Text('バナナ'),
      onTap: () {},
    ),
    ListTile(
      title: Text('オレンジ'),
      onTap: () {},
    ),
  ],
)

サンプルコード

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter')),
        body: const ExpansionTileExample(),
      ),
    );
  }
}

class ExpansionTileExample extends StatefulWidget {
  const ExpansionTileExample({super.key});

  @override
  State<ExpansionTileExample> createState() => _ExpansionTileExampleState();
}

class _ExpansionTileExampleState extends State<ExpansionTileExample> {
  @override
  Widget build(BuildContext context) {
    return ExpansionTile(
      title: Text('果実'),
      children: [
        ListTile(
          title: Text('リンゴ'),
          onTap: () {},
        ),
        ListTile(
          title: Text('バナナ'),
          onTap: () {},
        ),
        ListTile(
          title: Text('オレンジ'),
          onTap: () {},
        ),
      ],
    );
  }
}

以上です。

合わせて読みたい

参考サイト

https://api.flutter.dev/flutter/material/ExpansionTile-class.html