Flutter实现顶部带堆叠箭头的Modal Bottom Sheet UI

嘿，我懂你想要的效果——点击「Show More」按钮后弹出一个顶部带双箭头堆叠标识的模态底部弹窗对吧？看了你用solid_bottom_sheet写的代码，问题主要出在默认挂载方式和交互逻辑上，咱们来调整一下，实现你要的UI～

方案一：用Flutter自带的showModalBottomSheet（推荐，无额外依赖） #

这个方案不需要引入第三方包，直接用Flutter原生API就能实现，逻辑更清晰：

import 'package:flutter/material.dart';

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

  @override
  State<CustomBottomSheetDemo> createState() => _CustomBottomSheetDemoState();
}

class _CustomBottomSheetDemoState extends State<CustomBottomSheetDemo> {
  void _showCustomBottomSheet() {
    showModalBottomSheet(
      context: context,
      // 给弹窗顶部设置圆角，提升视觉效果
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
      ),
      builder: (context) {
        return Column(
          mainAxisSize: MainAxisSize.min, // 让弹窗高度自适应内容
          children: [
            // 顶部箭头+标题区域
            Padding(
              padding: const EdgeInsets.only(top: 12, bottom: 8),
              child: Column(
                children: [
                  // 堆叠箭头组件
                  Card(
                    elevation: 0,
                    color: Colors.grey.shade200,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(4),
                    ),
                    child: const Padding(
                      padding: EdgeInsets.symmetric(horizontal: 10, vertical: 4),
                      child: Icon(
                        Icons.keyboard_double_arrow_up,
                        color: Colors.red,
                        size: 20,
                      ),
                    ),
                  ),
                  const SizedBox(height: 8),
                  // Show More 标题
                  const Text(
                    "Show More",
                    style: TextStyle(
                      color: Colors.red,
                      fontSize: 16,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                ],
              ),
            ),
            // 弹窗内容区域
            Container(
              padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 16),
              child: const Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text("Hello! I'm a bottom sheet :D"),
                  SizedBox(height: 16),
                  Text("这里可以添加更多自定义内容哦"),
                ],
              ),
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Custom Bottom Sheet Demo")),
      body: Center(
        // 点击这个按钮触发弹窗
        child: ElevatedButton(
          onPressed: _showCustomBottomSheet,
          style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
          child: const Text("Show More", style: TextStyle(color: Colors.white)),
        ),
      ),
    );
  }
}

关键调整点： #

• 用showModalBottomSheet实现点击触发的模态弹窗，而不是默认挂载在Scaffold的bottomSheet上（原代码会让BottomSheet一直显示）
• 顶部箭头用Card包裹，设置浅灰色背景和圆角，更贴合UI设计
• 通过mainAxisSize: MainAxisSize.min让弹窗高度自适应内容，避免多余空白
• 给弹窗顶部设置圆角，提升视觉质感

方案二：修正solid_bottom_sheet的实现 #

如果你坚持要用solid_bottom_sheet包，只需要添加控制器来控制弹窗的显示/隐藏，同时调整布局：

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

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

  @override
  State<SolidBottomSheetFix> createState() => _SolidBottomSheetFixState();
}

class _SolidBottomSheetFixState extends State<SolidBottomSheetFix> {
  // 用控制器控制BottomSheet的显示/隐藏
  final _solidController = SolidController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Solid Bottom Sheet Fix")),
      body: Center(
        child: ElevatedButton(
          onPressed: () => _solidController.show(), // 点击按钮显示弹窗
          style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
          child: const Text("Show More", style: TextStyle(color: Colors.white)),
        ),
      ),
      bottomSheet: SolidBottomSheet(
        controller: _solidController,
        draggableBody: true,
        headerBar: Container(
          padding: const EdgeInsets.symmetric(vertical: 12),
          child: Column(
            children: [
              // 堆叠箭头
              Card(
                elevation: 0,
                color: Colors.grey.shade200,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(4),
                ),
                child: const Padding(
                  padding: EdgeInsets.symmetric(horizontal: 10, vertical: 4),
                  child: Icon(
                    Icons.keyboard_double_arrow_up,
                    color: Colors.red,
                    size: 20,
                  ),
                ),
              ),
              const SizedBox(height: 8),
              const Text(
                "Show More",
                style: TextStyle(color: Colors.red, fontSize: 16),
              ),
            ],
          ),
        ),
        body: Container(
          color: Colors.white,
          padding: const EdgeInsets.symmetric(vertical: 20),
          child: const Center(
            child: Text("Hello! I'm a bottom sheet :D"),
          ),
        ),
      ),
    );
  }
}

关键修正点： #

• 添加SolidController来控制弹窗的显示/隐藏，实现点击触发逻辑
• 调整headerBar的布局，将箭头和「Show More」垂直排列，符合预期UI
• 给箭头的Card设置背景色，让标识更突出

两种方案都能实现你想要的效果，推荐用原生的showModalBottomSheet，更轻量且不需要维护第三方依赖～

内容的提问来源于stack exchange，提问作者afifi