【Flutter】折りたたみのUIを実現する

image

アプリ開発をしていると、タップで閉じたり開いたりできる折りたたみのUIを実現したい場合があると思います。
そんな人のための記事です。

sample

version

  • Flutter 3.3.2
  • Dart 2.18.1
  • expandable 5.0.1

expandableパッケージをインストール

ここからインストールします👉 https://pub.dev/packages/expandable/install

ExpandablePanelクラスを設定する

ExpandablePanelクラスが折り畳みUIの本体になります。最低限必要な3つのプロパティheader, collapsed, expandedをそれぞれ設定します。
また、この記事では紹介しませんがthemeプロパティを設定することでカスタマイズ可能です(アイコンの位置、タップ判定の範囲など)。必要に応じて設定してみるといいと思います。

header

ヘッダーに表示するWidgetを設定します。collapsedの時もexpandedの時も表示されているものになります。

collapsed

折り畳み状態の時に表示するWidgetを設定します。

expanded

拡げた状態の時に表示するWidgetを設定します。

ExpandablePanel(
    header: const Text('げんこつ山のたぬきさん'),
    collapsed: const Text('げんこつ山のたぬきさん ...'),
    expanded: const Text(genkotuyamanotanukisann),
),

これだけで、折りたたみのUIを作ることができました。

コード全文

一旦これをコピペして動かしてみるといいと思います!
リポジトリはこちら👉https://github.com/sugawarakensuke/package_samples.git

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

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

  static Route<T> route<T>() {
    return MaterialPageRoute<T>(
      builder: (_) => const ExpandablePage(),
      settings: const RouteSettings(name: 'expandable_page'),
    );
  }

  
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      appBar: AppBar(title: const Text('expandable_page')),
      body: Container(
        padding: const EdgeInsets.all(8),
        child: SingleChildScrollView(
          child: Column(
            children: [
              Card(
                child: ExpandablePanel(
                  header: const Text('あおげば尊し'),
                  collapsed: const Text('あおげば 尊し わが師の恩 ...'),
                  expanded: const Text(aogebatoutosi),
                ),
              ),
              Card(
                child: ExpandablePanel(
                  header: const Text('げんこつ山のたぬきさん'),
                  collapsed: const Text('げんこつ山のたぬきさん ...'),
                  expanded: const Text(genkotuyamanotanukisann),
                ),
              ),
              Card(
                child: ExpandablePanel(
                  header: const Text('ふるさと'),
                  collapsed: const Text('兎追いしかの山 ...'),
                  expanded: const Text(hurusato),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

const aogebatoutosi = '''
あおげば 尊し わが師の恩
教えの庭にも はや幾年
思えば いと疾し この年月
今こそ 別れめ いざさらば

互いにむつみし 日頃の恩
別るる後にも やよ忘るな
身を立て 名をあげ やよ励めよ
今こそ 別れめ いざさらば

朝夕 馴にし まなびの窓
螢のともし火 積む白雪
忘るる 間ぞなき ゆく年月
今こそ 別れめ いざさらば
''';

const genkotuyamanotanukisann = '''
げんこつやまの たぬきさん
おっぱいのんで ねんねして
だっこして おんぶして またあした
''';

const hurusato = '''
兎追いしかの山
小鮒釣りしかの川
夢は今もめぐりて
忘れがたき故郷

如何にいます 父母
恙なしや 友がき
雨に風につけても
思いいずる故郷

こころざしをはたして
いつの日にか帰らん
山はあおき故郷
水は清き故郷
''';

さいごに

わかりやすくて使いやすい上にいい感じのアニメーションまでついていて最高ですね!
作ってくれた人に感謝です!

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More

タグ

Flutter (99)初心者向け (26)イベント (17)Google Apps Script (14)Nextjs (11)可茂IT塾 (8)Firebase (7)riverpod (6)React (6)ChatGPT (4)新卒 (4)就活 (4)Dart (4)JavaScript (4)FlutterWeb (3)vscode (3)Prisma (3)NestJS (3)デザイン (3)Slack (3)TypeScript (3)ワーケーション (3)インターン (3)お知らせ (3)設計 (2)線型計画法 (2)事例 (2)画像 (2)Figma (2)iOS (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)社会人 (2)大学生 (2)RSS (1)CodeRunner (1)個人開発 (1)Android (1)Unity (1)WebView (1)Twitter (1)フルリモート (1)TextScaler (1)textScaleFactor (1)学生向け (1)supabase (1)Java (1)Spring Boot (1)shell script (1)正規表現 (1)パワーポイント (1)趣味 (1)モンスターボール (1)CSS (1)SCSS (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)iPad (1)シェアハウス (1)スクレイピング (1)PageView (1)画面遷移 (1)flutter_hooks (1)Gmail (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)GCPコンソール (1)Google_ML_Kit (1)Vercel (1)Google Domains (1)Git (1)オンラインオフィス (1)LINE (1)Bitcoin (1)bitFlyer (1)コミュニティー (1)文系エンジニア (1)Freezed (1)markdown (1)GlobalKey (1)ValueKey (1)Key (1)アイコン (1)go_router (1)debug (1)Apple Store Connect (1)FlutterGen (1)デバッグ (1)Widget Inspector (1)flutter (1)Image (1)File (1)検索機能 (1)Shader (1)Navigator (1)メール送信 (1)Dio (1)CustomClipper (1)ClipPath (1)Material Design (1)カスタム認証 (1)アニメーション (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)mac (1)csv (1)Dialog (1)BI (1)LifeHack (1)ショートカット (1)Chrome (1)高校生 (1)キャリア教育 (1)非同期処理 (1)生体認証 (1)BackdropFilter (1)レビュー (1)getAuth (1)Algolia (1)コンサルティング (1)Symbol (1)

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More