Flutter showModalBottomSheet用法

本文主要是介绍Flutter showModalBottomSheet用法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

先搞一个DialogUtil工具类

import 'package:flutter/material.dart';class DialogUtil {static void showCommonBottomSheet(BuildContext context,Widget widget,{scrollControlled=false}){showModalBottomSheet(context: context,enableDrag:false,builder: (BuildContext context) {return widget;},isScrollControlled: scrollControlled,isDismissible: true,backgroundColor: Colors.white,elevation: 10.0,shape: const RoundedRectangleBorder(borderRadius: BorderRadius.vertical(top: Radius.circular(20.0)),),);}
}

调用的时候scrollControlled属性要设置true，这样bottomSheet的弹窗可以滑动

 //填写取件码订单的bottomSheetvoid showPickUpCode() {DialogUtil.showCommonBottomSheet(context,InputPickUpCodeWidget(),scrollControlled: true,);}

InputPickUpCodeWidget是你自己定义的底部弹出框的布局控件，这里主要贴主要代码部分：

class InputPickUpCodeWidget extends StatefulWidget{InputPickUpCodeWidget({Key? key}):super(key: key);@overrideState<StatefulWidget> createState() {// TODO: implement createStatereturn InputPickUpCodeWidgetState();}}
class InputPickUpCodeWidgetState extends State<InputPickUpCodeWidget>{@overrideWidget build(BuildContext context) {//很重要，这个bottomSize必须有double bottomSize=MediaQuery.of(context).viewInsets.bottom;return AnimatedPadding(child: _buildMain(),padding: EdgeInsets.only(bottom: bottomSize),duration: const Duration(milliseconds: 100),);}//SingleChildScrollView必须有，不然bottomSheet页面有输入框的话，软键盘一弹出来，页面布局就溢出报错了，加个SingleChildScrollView就可以自己滑动了Widget _buildMain()=>SingleChildScrollView(child: Container(padding: const EdgeInsets.all(10),decoration: const BoxDecoration(color: Colors.white,borderRadius: BorderRadius.only(topLeft: Radius.circular(15),topRight: Radius.circular(15)),),//MainAxisSize.min很重要，必须设置，bottomSheet会自适应内容高度child: Column(mainAxisSize: MainAxisSize.min,mainAxisAlignment: MainAxisAlignment.start,children: [],),),);}