演示效果图

action_sheet_util.dart

import 'package:ducafe_ui_core/ducafe_ui_core.dart';
import 'package:flutter/material.dart';
import 'package:demo/common/index.dart';

class ActionSheetUtil {
  /// 底部操作表
  /// [context] 上下文
  /// [title] 标题
  /// [items] 选项列表 [{'id': 1, 'title': '相机', 'type': 'camera'}]
  /// [onConfirm] 确认回调 返回选中项
  static void showActionSheet({
    required BuildContext context,
    required String title,
    required List<Map<String, dynamic>> items,
    required Function(Map<String, dynamic>) onConfirm,
  }) {
    showModalBottomSheet(
      context: context,
      backgroundColor: Colors.transparent,
      builder: (context) => Container(
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(30.w),
            topRight: Radius.circular(30.w),
          ),
        ),
        child: SafeArea(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              // 标题
              Container(
                height: 100.w,
                alignment: Alignment.center,
                child: TextWidget.body(
                  title,
                  size: 30.sp,
                  weight: FontWeight.w600,
                ),
              ),
              
              // 选项列表
              ...items.map((item) => GestureDetector(
                onTap: () {
                  Navigator.pop(context);
                  onConfirm(item);
                },
                child: Container(
                  height: 100.w,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    border: Border(
                      top: BorderSide(
                        color: const Color(0xff999999),
                        width: 1.w,
                      ),
                    ),
                  ),
                  child: TextWidget.body(
                    item['title'],
                    size: 28.sp,
                    color: const Color(0xff333333),
                  ),
                ),
              )).toList(),
              
              // 间隔
              Container(
                height: 16.w,
                color: const Color(0xffF4F4F4),
              ),
              
              // 取消按钮
              GestureDetector(
                onTap: () => Navigator.pop(context),
                child: Container(
                  height: 100.w,
                  alignment: Alignment.center,
                  child: TextWidget.body(
                    '取消',
                    size: 28.sp,
                    color: const Color(0xff333333),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

调用时需要传入BuildContext context

.onTap(() {
  controller.showImagePicker(BuildContext context);
}),

/ 定义选项列表
final List<Map<String, dynamic>> actions = [
  {"id": 1, "title": "相机", "type": "camera"},
  {"id": 2, "title": "相册", "type": "gallery"},
];

// 在控制器或页面中使用
void showImagePicker(context) async{
  ActionSheetUtil.showActionSheet(
    context: context,
    title: '请选择',
    items: actions,
    onConfirm: (item) async {
      print('操作类型：${item['type']}');
    },
  );
}