flutter实现底部弹出框以及特色功能

今天项目中要实现底部弹出框并且实现圆角功能，先来预览一下

可以看出实现的公告有

底部圆角，以及朋友圈，微信转发等

实现逻辑我直接代码列出

定义

List<String> nameItems = <String>['微信', '朋友圈', 'QQ', 'QQ空间', '微博', '链接'];
  List selects = [];
  int count = 0;

  // 这个urlItems这里没有用到
  List<String> urlItems = <String>[
    'images/wexin_icon.png',
    'images/friend_icon.png',
    'images/qq_icon.png',
    'images/qq_zon_icon.png',
    'images/weibo_icon.png',
    'images/link_icon.png',
  ];

开始操作

  void showBottomSheet() {
    //用于在底部打开弹框的效果
    showModalBottomSheet(
        builder: (BuildContext context) {
          //构建弹框中的内容
          return buildBottomSheetWidget(context);
        },
        backgroundColor: Colors.transparent,//重要
        context: context);
  }

下面

 ///底部弹出框的内容
  Widget buildBottomSheetWidget(BuildContext context) {
    return Container(
        height: 500.w,
        decoration: new BoxDecoration(
            color: Colors.white,
            borderRadius: new BorderRadius.only(
                topLeft: const Radius.circular(25.0),
                topRight: const Radius.circular(25.0))),
        child: new Column(
          children: [
            Text(
              "邀请好友",
              style: TextStyle(
                color: Color(0xFF36393D),
                fontSize: 46.w,
              ),
            ),
           
            commonButtonWidget(
                fontsize: 16,
                txt: "邀请",
                ontap: () {
                  print("11");
                }),
            Container(
              width: MediaQuery.of(context).size.width,
              padding: EdgeInsets.only(left: 10),
              child: Text("去邀请"),
            ),
            Container(
              height: 100,
              child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemBuilder: (BuildContext context, int index) {
                  return InkWell(
                    child: Container(
                      child: new Column(
                        children: <Widget>[
                          new Padding(
                            padding: EdgeInsets.fromLTRB(0.0, 6.0, 0.0, 6.0),
                            child: Image.asset(
                              urlItems[index],
                              width: 48,
                            ),
                          ),
                          new Text(nameItems[index])
                        ],
                      ),
                    ),
                    onTap: () {
                      switch (nameItems[index]) {
                        case '微信':
                          print("微信");
                          break;
                        case '朋友圈':
                          print("朋友圈");
                          break;
                        case 'QQ':
                          print("QQ");
                          break;
                        case 'QQ空间':
                          print("QQ空间");
                          break;
                        case '微博':
                          print("微博");
                          break;
                      }
                    },
                  );
                },
                itemCount: nameItems.length,
              ),
            ),
          ],
        ));
  }

这是邀请按钮的基础上封装的组件

  Widget commonButtonWidget(
      {String txt,
      Color fontcolor,
      Color backcolor,
      double fontsize,
      Function ontap}) {
    String txt = "邀请";
    Color fontcolor = Color(0xFF19D88E);
    Color backcolor = Color(0xFF19D88E).withOpacity(0.2);
    double fontsize = 18;
    return new Center(
      child: new Material(
//INK可以实现装饰容器
        child: new Ink(
          //用ink圆角矩形

          decoration: new BoxDecoration(
            //不能同时”使用Ink的变量color属性以及decoration属性，两个只能存在一个
            color: backcolor,
            //设置圆角
            borderRadius: new BorderRadius.all(new Radius.circular(25.0)),
          ),
          child: new InkWell(
            //圆角设置,给水波纹也设置同样的圆角
            //如果这里不设置就会出现矩形的水波纹效果
            borderRadius: new BorderRadius.circular(25.0),
            //设置点击事件回调
            onTap: () {
              ontap();
            },
            child: new Container(
              width: 300.0,
              height: 36.0,
              //设置child 居中
              alignment: Alignment(0, 0),
              child: Text(
                txt,
                style: TextStyle(color: fontcolor, fontSize: fontsize),
              ),
            ),
          ),
        ),
      ),
    );
  }

当然，代码写的很烂，如果有好的建议，欢迎指出，

最后欢迎大家在一下平台关注我，

主要发布文章包括，flutter，Vue，go，python，等技术，以及每月的读书笔记

哔哩哔哩搜索“Luckly年轻人

公众号：“萌小肆聊编程”

自建博客：https://luckly.work/

哔哩哔哩：https://space.bilibili.com/480883651

CSDN:https://blog.csdn.net/qq_39132095

知乎：https://www.zhihu.com/people/yimi-yang-guang-96-65

简书：https://www.jianshu.com/u/0c43689713e9

掘金：https://juejin.cn/user/3843548384077192