【Flutter】ExpandablePanel|折り畳み可能なドロップダウン機能を実装

今回はExpandablePanelの基本的な使い方を紹介します。

ExpandablePanelを使えば折り畳み可能なドロップダウン機能を実装できます。

\ 世界最大級のオンライン学習サービス /

目次

事前準備|expandableの導入

flutter pub add expandable
import 'package:expandable/expandable.dart';

ExpandablePanelを使用するにはFlutterパッケージexpandableを導入します。

ExpandablePanelの使い方

ExpandablePanel(
  header: Text(
    'Expandable',
    style: TextStyle(fontSize: 18),
  ),
  collapsed: Text(
    _body,
    maxLines: 1,
    overflow: TextOverflow.ellipsis,
  ),
  expanded: Text(_body),
),

headerに常に表示されるWidget、collapsedに折り畳み時のWidget、expandedに展開時のWidgetを渡します。

折り畳み時

展開時

ExpandableTileの上に画像を表示させる

Column(
  mainAxisSize: MainAxisSize.min,
  children: [
    Container(
      height: 200,
      color: Colors.orange,
    ),
    Padding(
      padding: EdgeInsets.all(10),
      child: ExpandablePanel(
        header: Text(
          'Expandable',
          style: TextStyle(fontSize: 18),
        ),
        collapsed: Text(
          _loremIpsum,
          maxLines: 1,
          overflow: TextOverflow.ellipsis,
        ),
        expanded: Text(_loremIpsum),
      ),
    ),
  ],
),

ExpandableTileのすぐ上に画像など別のWidgetを表示するにはColumnを使用します。

サンプルコード

import 'package:flutter/material.dart';
import 'package:expandable/expandable.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

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

class MyCustomApp extends StatefulWidget {
  const MyCustomApp({Key? key}) : super(key: key);

  @override
  State<MyCustomApp> createState() => _MyCustomAppState();
}

class _MyCustomAppState extends State<MyCustomApp> {
  final _loremIpsum =
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(10),
      child: Card(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              height: 200,
              color: Colors.orange,
            ),
            Padding(
              padding: EdgeInsets.all(10),
              child: ExpandablePanel(
                header: Text(
                  'Expandable',
                  style: TextStyle(fontSize: 18),
                ),
                collapsed: Text(
                  _loremIpsum,
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                ),
                expanded: Text(_loremIpsum),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

参考

  • URLをコピーしました!
目次