Flutter showModalBottomSheet 圆半径顶部

在Flutter中，showModalBottomSheet是一个很常用的弹出框组件，它可以在屏幕底部弹出一个模态窗口。但是，默认情况下，模态窗口的顶部是直角的。如果我们想要实现一个圆角顶部的弹出框该怎么办呢？

其实，Flutter提供了一个Container组件的decoration属性，可以让我们很方便地实现圆角顶部的效果。

具体地，我们可以通过如下代码，创建一个定制化的BottomSheet组件：

void _showModalBottomSheet(BuildContext context) {
  showModalBottomSheet(
    context: context,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.vertical(top: Radius.circular(20.0)),
    ),
    builder: (BuildContext context) {
      return Container(
        height: 200.0,
        child: Center(
          child: Text('This is a custom BottomSheet'),
        ),
      );
    },
  );
}

在上面的代码中，我们做了如下修改：

1. 通过shape属性，设置了BottomSheet的形状为圆角顶部，其中，Radius.circular(20.0)表示顶部左右两边的半径都为20.0；
2. 设置了Container的高度为200.0，并在其中放置了一个文本组件。

这样，我们就成功地定制了一个圆角顶部的BottomSheet弹出框。

Markdown格式如下：

# Flutter showModalBottomSheet 圆半径顶部

在Flutter中，`showModalBottomSheet`是一个很常用的弹出框组件，它可以在屏幕底部弹出一个模态窗口。但是，默认情况下，模态窗口的顶部是直角的。如果我们想要实现一个圆角顶部的弹出框该怎么办呢？

其实，Flutter提供了一个`Container`组件的`decoration`属性，可以让我们很方便地实现圆角顶部的效果。

具体地，我们可以通过如下代码，创建一个定制化的`BottomSheet`组件：

void _showModalBottomSheet(BuildContext context) { showModalBottomSheet( context: context, shape: RoundedRectangleBorder( borderRadius: BorderRadius.vertical(top: Radius.circular(20.0)), ), builder: (BuildContext context) { return Container( height: 200.0, child: Center( child: Text('This is a custom BottomSheet'), ), ); }, ); }

在上面的代码中，我们做了如下修改：

1. 通过`shape`属性，设置了`BottomSheet`的形状为圆角顶部，其中，`Radius.circular(20.0)`表示顶部左右两边的半径都为20.0；
2. 设置了`Container`的高度为200.0，并在其中放置了一个文本组件。

这样，我们就成功地定制了一个圆角顶部的`BottomSheet`弹出框。