演示效果圖

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']}');},);
}