flutter实现底部弹出框

效果如下：

实现方法：

import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:zmreader/common/index.dart';

/// 底部弹出框
class BottomSheetWidget extends StatefulWidget {
  BottomSheetWidget({Key key, this.list, this.onItemClickListener})
      : assert(list != null),
        super(key: key);
  final list;
  final OnItemClickListener onItemClickListener;

  @override
  _BottomSheetWidgetState createState() => _BottomSheetWidgetState();
}

typedef OnItemClickListener = void Function(int index);

class _BottomSheetWidgetState extends State<BottomSheetWidget> {
  OnItemClickListener onItemClickListener;
  var itemCount;
  double itemHeight = 44;
  double circular = 10;


  @override
  void initState() {
    super.initState();
    onItemClickListener = widget.onItemClickListener;
  }

  @override
  Widget build(BuildContext context) {
    var deviceWidth = Screen.width;
    int listLength=widget.list.length;
    /// 最后还有一个cancel，所以加1
    itemCount = listLength + 1;
    var height ;
    if(listLength==1){
      height = ((listLength + 2) * 48).toDouble();
    }else{
      height = ((listLength + 1) * 48).toDouble();
    }
    var cancelContainer = Container(
        height: itemHeight,
        margin: EdgeInsets.only(left: 10, right: 10),
        decoration: BoxDecoration(
          color: Colors.white, // 底色
          borderRadius: BorderRadius.circular(circular),
        ),
        child: Center(
          child: GestureDetector(
            onTap: () {
              Navigator.pop(context);
            },
            child: Text(
              "取消",
              style: TextStyle(
                  fontFamily: 'Robot',
                  fontWeight: FontWeight.normal,
                  decoration: TextDecoration.none,
                  color: Color(0xff333333),
                  fontSize: 18),
            ),
          ),
        ));
    var listview = ListView.builder(
        itemCount: itemCount,
        itemBuilder: (BuildContext context, int index) {
          if (index == itemCount - 1) {
            return new Container(
              child: cancelContainer,
              margin: const EdgeInsets.only(top: 10),
            );
          }
          return getItemContainer(context, index,listLength);
        });
    var totalContainer = Container(
      child: listview,
      height: height,
      width: deviceWidth * 0.98,
    );
    var stack = Stack(
      alignment: Alignment.center,
      children: <Widget>[
        Positioned(
          bottom: 0,
          child: totalContainer,
        ),
      ],
    );
    return stack;
  }

  Widget getItemContainer(BuildContext context, int index,int listLength) {
    if (widget.list == null) {
      return Container();
    }

    var text = widget.list[index];
    var contentText = Text(
      text,
      style: TextStyle(
          fontWeight: FontWeight.normal,
          decoration: TextDecoration.none,
          color: Color(0xFF333333),
          fontSize: 18),
    );

    var decoration;

    var center;
    var itemContainer;
    center = Center(
      child: contentText,
    );
    var onTap2 = () {
      if (onItemClickListener != null) {
        onItemClickListener(index);
      }
    };
    if(listLength==1){
      decoration = BoxDecoration(
        color: Colors.white, // 底色
        borderRadius: BorderRadius.circular(10),
        border: Border.all(width: 0.5, color: Color(0xffe5e5e5))
      );
    }else if(listLength>1){
      if (index == 0) {
        decoration = BoxDecoration(
          color: Colors.white, // 底色
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(10), topRight: Radius.circular(10)),
          border:Border.all(width: 0.5, color: Color(0xffe5e5e5)),
        );
      } else if (index == listLength - 1) {
        decoration = BoxDecoration(
          color: Colors.white, // 底色
          borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(10), bottomRight: Radius.circular(10)),
          border: Border.all(width: 0.5, color: Color(0xffe5e5e5)),
        );
      } else {
        decoration = BoxDecoration(
          color: Colors.white, // 底色
          border: Border(
              left: BorderSide(color: Colours.white, width: 0.5),
              right: BorderSide(color: Colours.white, width: 0.5),
              bottom: BorderSide(width: 0.5, color: Color(0xffe5e5e5))),
        );
      }
    }
    itemContainer = Container(
        height: itemHeight,
        margin: EdgeInsets.only(left: 10, right: 10),
        decoration: decoration,
        child: center);

    return GestureDetector(
      onTap: onTap2,
      child: itemContainer,
    );
  }
}

调用方法：

showDialog(
    barrierDismissible: true,//是否点击空白区域关闭对话框,默认为true，可以关闭
    context: context,
    builder: (BuildContext context) {
      var list = List();
      list.add('意见与建议');
      list.add('功能问题');
      list.add('内容问题');
      list.add('使用问题');
      list.add('其他问题');
      return BottomSheetWidget(
        list: list,
        onItemClickListener: (index) async {
          print( list[index]);
          Navigator.pop(context);
        },
      );
    });