Flutter：封装一个自用的bottom_picker选择器

效果图：单列选择器

使用bottom_picker: ^2.9.0实现，单列选择器，官方文档

pubspec.yaml

# 底部选择
bottom_picker: ^2.9.0

picker_utils.dart

AppTheme：自定义的颜色
TextWidget.body = Text()
<Widget>[].toRow = Row()

下边代码中用到了一些扩展，需要自行替换这些内容

import 'package:bottom_picker/bottom_picker.dart';
import 'package:ducafe_ui_core/ducafe_ui_core.dart';
import 'package:flutter/material.dart';
import 'package:xiaoshukeji/common/index.dart';class PickerUtils {/// 底部单列选择器/// [context] 上下文/// [title] 选择器标题/// [items] 数据列表 [{'id': 1, 'name': '选项1'}]/// [onConfirm] 确认回调 返回选中项static void showPicker({required BuildContext context,required String title,required List<Map<String, dynamic>> items,required Function(Map<String, dynamic>) onConfirm,}) {BottomPicker(pickerTitle: TextWidget.body(title,weight: FontWeight.w600,size: 30.sp,),items: items.map((item) => Center(child: TextWidget.body(item['name'].toString(),size: 28.sp,),),).toList(),buttonPadding: 0,buttonWidth: 690.w,titleAlignment: Alignment.center,backgroundColor: AppTheme.blockBgColor,pickerTextStyle: TextStyle(fontSize: 28.sp,color: AppTheme.textColorfff,),closeIconColor: AppTheme.textColorfff,buttonAlignment: MainAxisAlignment.center,displaySubmitButton: true,buttonContent: <Widget>[TextWidget.body('确定',weight: FontWeight.w600,size: 26.sp,),].toRow(mainAxisAlignment: MainAxisAlignment.center).card(color: AppTheme.primaryYellow).tight(height: 80.w,),buttonStyle: BoxDecoration(color: Colors.transparent,borderRadius: BorderRadius.circular(44.w),),onSubmit: (index) {onConfirm(items[index]);},).show(context);}
}

使用

// 记得import  PickerUtils 文件// 模型列表数据,默认接口返回了id和name字段
final List<Map<String, dynamic>> modelList = [{'id': 1, 'name': '模型1'},{'id': 2, 'name': '模型2'},{'id': 3, 'name': '模型3'},
];// 选择
void showModelPicker(BuildContext context) {PickerUtils.showPicker(context: context,title: '选择模型',items: modelList,onConfirm: (selected) {modelController.text = selected['name'];update(['strategy_add']);},);
}// 页面中调用
onTap((){controller.showPairPicker(context);
}),