Flutter底部弹出盒子

代码如下:

这里使用的是showBottomSheet组件,还有一个showModalBottomSheet组件,它们的区别就是一个带遮罩一个不带.

showBottomShee使用方法

/*

    * @Author       : XiaoLiu
    * @DateTime     : 2020-12-27 15:22:36
    * @LastAuthor   : XiaoLiu
    * @LastTime     : 2020-12-27 16:00:42
    * @FilePath       : BottomSheetDemo.dart
    * @message      : showBottomShee(不带遮罩)
    */
    import 'package:flutter/material.dart';

    class BottomSheetDemo extends StatefulWidget {
      @override
      State<StatefulWidget> createState() => _BottomSheetDemo();
    }

    class _BottomSheetDemo extends State<BottomSheetDemo> {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Column(
          children: <Widget>[
            RaisedButton(
              child: Text('show bottom sheet'),
              onPressed: () => showBottomSheet(
                context: context,
                builder: (_) => Container(
                  height: 200,
                  width: double.infinity,
                  color: Colors.red,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      RaisedButton(
                          child: Text('确认'),
                          onPressed: () {
                            Navigator.of(context).pop();
                          }),
                      RaisedButton(
                          child: Text('取消'),
                          onPressed: () {
                            Navigator.of(context).pop();
                          })
                    ],
                  ),
                ),
              ),
            ),
          ],
        );
      }
    }

 /*
    * @Author       : XiaoLiu
    * @DateTime     : 2020-12-25 16:33:15
    * @LastAuthor   : XiaoLiu
    * @LastTime     : 2020-12-27 16:13:38
    * @FilePath     : /book_keep/lib/view/bookkeep/BottomSheetDemo.dart
    * @message      : showModelBottomShee(带遮罩)
    */
    import 'package:flutter/material.dart';

    class BottomSheetDemo extends StatefulWidget {
      @override
      State<StatefulWidget> createState() => _BottomSheetDemo();
    }

    class _BottomSheetDemo extends State<BottomSheetDemo> {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Column(
          children: <Widget>[
            RaisedButton(
              child: Text('show bottom sheet'),
              onPressed: () => showModalBottomSheet(
                context: context,
                isScrollControlled: false,
                barrierColor: Color.fromRGBO(255, 255, 255, 0),
                backgroundColor: Colors.white,
                // shape: RoundedRectangleBorder(
                //   borderRadius:
                //       BorderRadius.all(Radius.circular(10)),
                // ),
                builder: (BuildContext context) {
                  return Container(
                    color: Colors.red,
                    height: 50, //对话框高度就是此高度
                    child: Center(child: Text("居中文字")),
                  );
                },
              ),
            ),
          ],
        );
      }
    }