flutter之showModalBottomSheet的使用

类似iOS开发当中的bottomSheet 底部弹出弹窗，用于展示信息或者选择列表

showModalBottomSheet的属性

Future<T> showModalBottomSheet<T>({
  @required BuildContext context,
  @required WidgetBuilder builder,
  Color backgroundColor,
  double elevation,
  ShapeBorder shape,
  Clip clipBehavior,
  bool isScrollControlled = false,
  bool useRootNavigator = false,
}) {
  assert(context != null);
  assert(builder != null);
  assert(isScrollControlled != null);
  assert(useRootNavigator != null);
  assert(debugCheckHasMediaQuery(context));
  assert(debugCheckHasMaterialLocalizations(context));

  final BottomSheetThemeData theme = Theme.of(context).bottomSheetTheme;

  return Navigator.of(context, rootNavigator: useRootNavigator).push(_ModalBottomSheetRoute<T>(
    builder: builder,
    theme: Theme.of(context, shadowThemeOnly: true),
    isScrollControlled: isScrollControlled,
    barrierLabel: MaterialLocalizations.of(context).modalBarrierDismissLabel,
    backgroundColor: backgroundColor ?? theme?.modalBackgroundColor ?? theme?.backgroundColor,
    elevation: elevation ?? theme?.modalElevation ?? theme?.elevation,
    shape: shape,
    clipBehavior: clipBehavior,
  ));
}

主要是在build中编写UI代码,简单使用

showModalBottomSheet(
                    context: context,
                    builder: (BuildContext context) {
                      return Container(
                        height: 200.0,
                        color: Color(0xfff1f1f1),
                        child: Center(
                          child: Text("底部面板,点击消失"),
                        ),
                      );
                    },
                  );
                },
                child: Text("底部面板,点击消失"),
              ),
              RaisedButton(
                onPressed: () {
                  showModalBottomSheet(
                    context: context,
                    builder: (BuildContext context) {
                      return GestureDetector(
                        child: Container(
                          height: 2000.0,
                          color: Color(0xfff1f1f1),
                          child: Center(
                            child: Text("底部面板,点击底部面板不消失"),
                          ),
                        ),
                        onTap: () => false,
                      );
                    },
                  );

顶部切圆角 需要考虑sheet底色的问题，查看源码知道底色是 Colors.black54

showModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return Stack(
          children: <Widget>[
            Container(
              height: 25,
              width: double.infinity,
              color: Colors.black54,
            ),
            Container(
              height: 200,
              width: double.infinity,
              child: Center(child: Text("showModalBottomSheet")),
              decoration: BoxDecoration(
                color: Colors.blueAccent,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(25),
                  topRight: Radius.circular(25),
                ),
              ),
            ),
          ],
        );
      },
    );