Flutter - 底部弹窗 showModalBottomSheet自定义bottom弹框

bottom弹框-代码撂这儿了

import 'package:flutter/material.dart';

class AlertGridItem extends Object {

  final String title;
  final int codePoint;  // 图标使用的iconfont昂

  AlertGridItem(this.title, this.codePoint);

}

// Utils 是临时创建的 （小朋友们自行归位nao～）
class Utils {

  // 获取屏幕宽度 (狗子(我本人) 放到了common.dart里)
  static double kScreenWidth(BuildContext context) => MediaQuery.of(context).size.width;
  // 项目中通用背景色 (有条件的可以单独放在color_marco.dart 文件自己建哈)
  static final backDarkGrayColor = Color.fromRGBO(240, 240, 240, 1.0);
  // 文字通用样式 方便统一改字体
  static TextStyle getCustomTextStyle() {
    return TextStyle(
        color: Colors.black,
        fontSize: 17
    );
  }

}

class PracticeBottomSheet extends StatefulWidget {
  @override
  _PracticeBottomSheetState createState() => _PracticeBottomSheetState();
}

class _PracticeBottomSheetState extends State<PracticeBottomSheet> {

  // 点击事件
  void tapAction(actionName) {

    if (actionName == 'show') {

      showModalBottomSheet(
          context: context,
          isScrollControlled: true,
          backgroundColor: Colors.transparent,
          builder: (BuildContext context) {

            // 屏幕宽
            final screenW = Utils.kScreenWidth(context);
            // 列表item宽高
            double itemW = 60;
            double itemH = 86;
            // 几列
            int rowCount = 3;
            // 列表 列间距
            double collectionLeftPadding = 40;
            double itemSpace = (screenW-itemW*rowCount-collectionLeftPadding*2)/2;
            // 列表数据
            final moreSourceArray = [AlertGridItem('微信', 0xe665),AlertGridItem('朋友圈', 0xe667),AlertGridItem('批量下载', 0xe60e),AlertGridItem('转载', 0xe889),AlertGridItem('海报', 0xe674),AlertGridItem('举报', 0xe6ed)];
            // 几行
            double itemColumnCount = moreSourceArray.length / 3 + ((moreSourceArray.length % 3) == 0 ? 0.0 : 1.0).toDouble();
            // collection的高度
            final collectionViewHeight = itemColumnCount * itemH + 20 * (itemColumnCount-1);

            // print('column个数${itemColumnCount}');
            return StatefulBuilder(
                builder: (stateContext, state) {
                  return GestureDetector(
                    child: ClipRRect(
                      borderRadius: BorderRadius.vertical(top: Radius.circular(8)),
                      child: Container(
                        height: collectionViewHeight + 30 + 20 + 55,
                        color: Utils.backDarkGrayColor,
                        child: Column(
                          children: <Widget>[
                            SizedBox(height: 30),

                            // 功能列表
                            Container(
                              padding: EdgeInsets.only(left: collectionLeftPadding,right: collectionLeftPadding),
                              height: collectionViewHeight,
                              child: GridView.builder(
                                physics: NeverScrollableScrollPhysics(),
                                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                                    crossAxisCount: rowCount,
                                    mainAxisSpacing: 20,
                                    crossAxisSpacing: itemSpace,
                                    childAspectRatio: itemW/itemH
                                ),
                                itemBuilder: (BuildContext gridContext, int index) {
                                  return Container(
                                    height: itemH,
                                    width: itemW,
                                    child: GestureDetector(
                                      child: Column(
                                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                                        children: <Widget>[
                                          ClipRRect(
                                            borderRadius: BorderRadius.all(Radius.circular(4)),
                                            child: Container(
                                              width: 50,
                                              height: 50,
                                              color: Colors.white,
                                              child: Icon(IconData(moreSourceArray[index].codePoint,fontFamily: 'iconfont'),size: 30,),
                                            ),
                                          ),
                                          Text(moreSourceArray[index].title,style: TextStyle(fontSize: 12),)
                                        ],
                                      ),
                                      onTap: () {
                                        Navigator.pop(context);
                                        tapAction(moreSourceArray[index].title);
                                      },
                                    ),
                                  );
                                },
                                itemCount: moreSourceArray.length,
                              ),
                            ),

                            SizedBox(height: 20),

                            // 取消
                            GestureDetector(
                              child: Container(
                                alignment: Alignment.center,
                                height: 55,
                                color: Colors.white,
                                child: Text('取消',style: Utils.getCustomTextStyle(),),
                              ),
                              onTap: () {
                                Navigator.pop(context);
                              },
                            )
                          ],
                        ),
                      ),
                    ),
                    // 关键代码
                    onVerticalDragUpdate: (e) => false,
                  );
                });
          });

    }

  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: RaisedButton(
        child: Text('点我'),
        onPressed: () {
          tapAction('show');
        },
      ),
    );
  }
}

Iconfont使用

1、下载ttf文件

阿里巴巴矢量图库 -> 当前项目 -> 下载至本地
类似贼个样子：

姐妹们别害臊点它、点它、点它。

2、在pubspec.yaml中添加fonts配置

3、使用

上边代码找找看啦！