refactor: make all bottom sheet contents use dynamic height

realth000 · realth000 · commit c58b3522cb25 · 2026-02-17T01:49:09.000+08:00
Use `IndexStack` to replace `TabBarView` and enable `shrinkWrap` on
`ListView`s to make all contents in bottom sheet using dynamic height
instead of an always expanded one.

This commit also makes bottom sheet avoid Android status bar.
diff --git a/lib/features/editor/widgets/color_bottom_sheet.dart b/lib/features/editor/widgets/color_bottom_sheet.dart
@@ -56,6 +56,8 @@ class _ColorBottomSheetState extends State<_ColorBottomSheet> with SingleTickerP
   late final TabController _tabController;
   late final TextEditingController _customColorValueController;
 
+  int currentIndex = 0;
+
   String? _customTabErrorText;
 
   Color _advancedTabColor = Colors.transparent;
@@ -64,6 +66,15 @@ class _ColorBottomSheetState extends State<_ColorBottomSheet> with SingleTickerP
 
   List<Color> _recentCustomColors = [];
 
+  void onCurrentIndexChanged() {
+    if (_tabController.indexIsChanging) {
+      final newIndex = _tabController.index;
+      setState(() {
+        currentIndex = newIndex;
+      });
+    }
+  }
+
   void _updateCustomColorPreview(String? v) {
     final tr = context.t.colorPickerDialog.tabs.custom;
 
@@ -109,114 +120,106 @@ class _ColorBottomSheetState extends State<_ColorBottomSheet> with SingleTickerP
   Widget _buildAdvancedTab() {
     final tr = context.t.colorPickerDialog.tabs.advanced;
 
-    return Column(
-      children: [
-        Expanded(
-          child: SingleChildScrollView(
-            child: ColorPicker(
-              padding: EdgeInsets.zero,
-              // Use the dialogPickerColor as start and active color.
-              color: _advancedTabColor,
-              // Update the dialogPickerColor using the callback.
-              onColorChanged: (color) => setState(() => _advancedTabColor = color),
-              borderRadius: 15,
-              spacing: 5,
-              runSpacing: 5,
-              wheelDiameter: 155,
-              heading: Text(tr.selectColor, style: Theme.of(context).textTheme.titleSmall),
-              subheading: Text(tr.selectColorShade, style: Theme.of(context).textTheme.titleSmall),
-              showMaterialName: true,
-              showColorName: true,
-              showColorCode: true,
-              copyPasteBehavior: const ColorPickerCopyPasteBehavior(longPressMenu: true),
-              materialNameTextStyle: Theme.of(context).textTheme.bodySmall,
-              colorNameTextStyle: Theme.of(context).textTheme.bodySmall,
-              colorCodeTextStyle: Theme.of(context).textTheme.bodySmall,
-              pickersEnabled: const <ColorPickerType, bool>{
-                ColorPickerType.both: true,
-                ColorPickerType.primary: false,
-                ColorPickerType.accent: false,
-                ColorPickerType.bw: false,
-                ColorPickerType.custom: false,
-                ColorPickerType.customSecondary: false,
-                ColorPickerType.wheel: false,
-              },
-              showEditIconButton: true,
-              // customColorSwatchesAndNames: colorsNameMap,
-            ),
+    return Align(
+      child: Column(
+        mainAxisSize: .min,
+        children: [
+          ColorPicker(
+            padding: EdgeInsets.zero,
+            // Use the dialogPickerColor as start and active color.
+            color: _advancedTabColor,
+            // Update the dialogPickerColor using the callback.
+            onColorChanged: (color) => setState(() => _advancedTabColor = color),
+            borderRadius: 15,
+            spacing: 5,
+            runSpacing: 5,
+            wheelDiameter: 155,
+            heading: Text(tr.selectColor, style: Theme.of(context).textTheme.titleSmall),
+            subheading: Text(tr.selectColorShade, style: Theme.of(context).textTheme.titleSmall),
+            showMaterialName: true,
+            showColorName: true,
+            showColorCode: true,
+            copyPasteBehavior: const ColorPickerCopyPasteBehavior(longPressMenu: true),
+            materialNameTextStyle: Theme.of(context).textTheme.bodySmall,
+            colorNameTextStyle: Theme.of(context).textTheme.bodySmall,
+            colorCodeTextStyle: Theme.of(context).textTheme.bodySmall,
+            pickersEnabled: const <ColorPickerType, bool>{
+              ColorPickerType.both: true,
+              ColorPickerType.primary: false,
+              ColorPickerType.accent: false,
+              ColorPickerType.bw: false,
+              ColorPickerType.custom: false,
+              ColorPickerType.customSecondary: false,
+              ColorPickerType.wheel: false,
+            },
+            showEditIconButton: true,
+            // customColorSwatchesAndNames: colorsNameMap,
           ),
-        ),
-        sizedBoxW4H4,
-        FilledButton(
-          onPressed: _advancedTabColor != Colors.transparent
-              ? () => Navigator.of(context).pop(PickColorResult.picked(_advancedTabColor))
-              : null,
-          child: Text(context.t.general.ok),
-        ),
-      ],
+          sizedBoxW4H4,
+          FilledButton(
+            onPressed: _advancedTabColor != Colors.transparent
+                ? () => Navigator.of(context).pop(PickColorResult.picked(_advancedTabColor))
+                : null,
+            child: Text(context.t.general.ok),
+          ),
+        ],
+      ),
     );
   }
 
   Widget _buildCustomTab(BuildContext context) {
     final tr = context.t.colorPickerDialog.tabs.custom;
 
     return Column(
+      mainAxisSize: .min,
       children: [
-        Expanded(
-          child: SingleChildScrollView(
-            child: Column(
-              children: [
-                sizedBoxW8H8,
-                Row(
-                  children: [
-                    Expanded(
-                      child: TextField(
-                        controller: _customColorValueController,
-                        decoration: InputDecoration(errorText: _customTabErrorText, labelText: tr.colorValue),
-                        onChanged: _updateCustomColorPreview,
-                      ),
-                    ),
-                    sizedBoxW12H12,
-                    Container(
-                      width: 40,
-                      height: 40,
-                      decoration: BoxDecoration(
-                        borderRadius: const BorderRadius.all(Radius.circular(15)),
-                        color: _customTabColor,
-                      ),
+        sizedBoxW8H8,
+        Row(
+          children: [
+            Expanded(
+              child: TextField(
+                controller: _customColorValueController,
+                decoration: InputDecoration(errorText: _customTabErrorText, labelText: tr.colorValue),
+                onChanged: _updateCustomColorPreview,
+              ),
+            ),
+            sizedBoxW12H12,
+            Container(
+              width: 40,
+              height: 40,
+              decoration: BoxDecoration(
+                borderRadius: const BorderRadius.all(Radius.circular(15)),
+                color: _customTabColor,
+              ),
+            ),
+          ],
+        ),
+        sizedBoxW4H4,
+        Tips(tr.formatTip, enablePadding: false),
+        sizedBoxW4H4,
+        Text(tr.recentColor, style: Theme.of(context).textTheme.titleSmall),
+        sizedBoxW4H4,
+        Wrap(
+          spacing: 4,
+          children: _recentCustomColors
+              .map(
+                (e) => GestureDetector(
+                  onTap: () => setState(() {
+                    final value = e.hex.toLowerCase();
+                    _updateCustomColorPreview(value);
+                    _customColorValueController.text = value;
+                  }),
+                  child: Container(
+                    width: 40,
+                    height: 40,
+                    decoration: BoxDecoration(
+                      borderRadius: const BorderRadius.all(Radius.circular(15)),
+                      color: e,
                     ),
-                  ],
-                ),
-                sizedBoxW4H4,
-                Tips(tr.formatTip, enablePadding: false),
-                sizedBoxW4H4,
-                Text(tr.recentColor, style: Theme.of(context).textTheme.titleSmall),
-                sizedBoxW4H4,
-                Wrap(
-                  spacing: 4,
-                  children: _recentCustomColors
-                      .map(
-                        (e) => GestureDetector(
-                          onTap: () => setState(() {
-                            final value = e.hex.toLowerCase();
-                            _updateCustomColorPreview(value);
-                            _customColorValueController.text = value;
-                          }),
-                          child: Container(
-                            width: 40,
-                            height: 40,
-                            decoration: BoxDecoration(
-                              borderRadius: const BorderRadius.all(Radius.circular(15)),
-                              color: e,
-                            ),
-                          ),
-                        ),
-                      )
-                      .toList(),
+                  ),
                 ),
-              ],
-            ),
-          ),
+              )
+              .toList(),
         ),
         sizedBoxW4H4,
         FilledButton(
@@ -268,7 +271,7 @@ class _ColorBottomSheetState extends State<_ColorBottomSheet> with SingleTickerP
   @override
   void initState() {
     super.initState();
-    _tabController = TabController(length: 3, vsync: this);
+    _tabController = TabController(length: 3, vsync: this)..addListener(onCurrentIndexChanged);
     _customColorValueController = TextEditingController();
     if (widget.initialColor != null) {
       WidgetsBinding.instance.addPostFrameCallback((_) {
@@ -287,7 +290,9 @@ class _ColorBottomSheetState extends State<_ColorBottomSheet> with SingleTickerP
 
   @override
   void dispose() {
-    _tabController.dispose();
+    _tabController
+      ..removeListener(onCurrentIndexChanged)
+      ..dispose();
     _customColorValueController.dispose();
     super.dispose();
   }
@@ -296,38 +301,38 @@ class _ColorBottomSheetState extends State<_ColorBottomSheet> with SingleTickerP
   Widget build(BuildContext context) {
     final tr = context.t.colorPickerDialog;
 
-    return ConstrainedBox(
-      constraints: const BoxConstraints(maxHeight: 450),
-      child: Column(
-        mainAxisSize: MainAxisSize.min,
-        children: [
-          TabBar(
-            controller: _tabController,
-            tabs: [
-              Tab(text: tr.tabs.normal.title),
-              Tab(text: tr.tabs.advanced.title),
-              Tab(text: tr.tabs.custom.title),
-            ],
-          ),
-          sizedBoxW4H4,
-          Expanded(
-            child: Padding(
-              padding: edgeInsetsL12R12,
-              child: TabBarView(
-                controller: _tabController,
-                children: [_buildNormalTab(), _buildAdvancedTab(), _buildCustomTab(context)],
-              ),
+    return SingleChildScrollView(
+      child: Padding(
+        padding: edgeInsetsL12R12,
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          spacing: 4,
+          children: [
+            TabBar(
+              controller: _tabController,
+              tabs: [
+                Tab(text: tr.tabs.normal.title),
+                Tab(text: tr.tabs.advanced.title),
+                Tab(text: tr.tabs.custom.title),
+              ],
             ),
-          ),
-          sizedBoxW4H4,
-          Align(
-            alignment: Alignment.centerRight,
-            child: TextButton(
-              onPressed: () => Navigator.of(context).pop(PickColorResult.clearColor()),
-              child: Text(context.t.general.reset),
+            IndexedStack(
+              index: currentIndex,
+              children: [
+                _buildNormalTab(),
+                _buildAdvancedTab(),
+                _buildCustomTab(context),
+              ],
             ),
-          ),
-        ],
+            Align(
+              alignment: Alignment.centerRight,
+              child: TextButton(
+                onPressed: () => Navigator.of(context).pop(PickColorResult.clearColor()),
+                child: Text(context.t.general.reset),
+              ),
+            ),
+          ],
+        ),
       ),
     );
   }
diff --git a/lib/features/editor/widgets/emoji_bottom_sheet.dart b/lib/features/editor/widgets/emoji_bottom_sheet.dart
@@ -34,17 +34,31 @@ class _EmojiBottomSheet extends StatefulWidget {
 
 class _EmojiBottomSheetState extends State<_EmojiBottomSheet> with SingleTickerProviderStateMixin {
   TabController? tabController;
+  int sheetIndex = 0;
+
+  void onSheetIndexChanged() {
+    if (tabController?.indexIsChanging ?? false) {
+      final currIndex = tabController?.index;
+      if (currIndex != null) {
+        setState(() {
+          sheetIndex = currIndex;
+        });
+      }
+    }
+  }
 
   @override
   void dispose() {
-    tabController?.dispose();
+    tabController
+      ?..removeListener(onSheetIndexChanged)
+      ..dispose();
     super.dispose();
   }
 
   /// When calling this function, assume all emoji is available.
   Widget _buildEmojiTab(BuildContext context, EmojiState state) {
     final emojiGroupList = state.emojiGroupList!;
-    tabController ??= TabController(length: emojiGroupList.length, vsync: this);
+    tabController ??= TabController(length: emojiGroupList.length, vsync: this)..addListener(onSheetIndexChanged);
 
     final tabs = emojiGroupList.map((e) => Tab(child: Text(e.name)));
     final tabViews = emojiGroupList.map(
@@ -75,14 +89,20 @@ class _EmojiBottomSheetState extends State<_EmojiBottomSheet> with SingleTickerP
       ),
     );
 
-    return Column(
-      children: [
-        TabBar(isScrollable: true, tabAlignment: TabAlignment.start, controller: tabController, tabs: tabs.toList()),
-        sizedBoxW12H12,
-        Expanded(
-          child: TabBarView(controller: tabController, children: tabViews.toList()),
-        ),
-      ],
+    return SingleChildScrollView(
+      child: Column(
+        mainAxisSize: .min,
+        children: [
+          TabBar(isScrollable: true, tabAlignment: TabAlignment.start, controller: tabController, tabs: tabs.toList()),
+          sizedBoxW12H12,
+          // Use IndexStack instead of TabBarView to make contents having minimum height for the bottom sheet.
+          // But it stucks more than TabBarView.
+          IndexedStack(
+            index: sheetIndex,
+            children: tabViews.toList(),
+          ),
+        ],
+      ),
     );
   }
 
@@ -115,7 +135,7 @@ class _EmojiBottomSheetState extends State<_EmojiBottomSheet> with SingleTickerP
             EmojiStatus.success => _buildEmojiTab(context, state),
           };
 
-          return ConstrainedBox(constraints: const BoxConstraints(maxHeight: 400), child: body);
+          return body;
         },
       ),
     );
diff --git a/lib/features/forum/widgets/thread_filter_chip.dart b/lib/features/forum/widgets/thread_filter_chip.dart
@@ -49,7 +49,7 @@ class ThreadChip extends StatelessWidget {
                     builder: (_) => BlocProvider.value(
                       value: context.read<ForumBloc>(),
                       child: BlocBuilder<ForumBloc, ForumState>(
-                        builder: (_, state) => ListView(children: sheetItemBuilder(context, state)),
+                        builder: (_, state) => ListView(shrinkWrap: true, children: sheetItemBuilder(context, state)),
                       ),
                     ),
                   );
diff --git a/lib/utils/show_bottom_sheet.dart b/lib/utils/show_bottom_sheet.dart
