Flutter 如何在Flatter中的showModalBottomSheet上添加按钮（或其他小部件）？

左边是设计图。在右侧，我要构建此设计的颤振应用程序：

不管我怎么做，我都不会把按钮放在最上面

我最后尝试的是堆叠小部件：

showModalBottomSheet(
  context: context,
  shape: RoundedRectangleBorder(
    ...
  ),
  builder: (BuildContext context) {
    return Stack(
      alignment: AlignmentDirectional.topCenter,
      children: <Widget>[
        Container(
          width: 50,
          height: 50,
          child: Image.asset('assets/images/add.png'),
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: <Color>[
                CustomColors.PurpleLight,
                CustomColors.PurpleDark,
              ],
            ),
            borderRadius: BorderRadius.all(
              Radius.circular(50.0),
            ),
            boxShadow: [
              BoxShadow(
                color: CustomColors.PurpleShadow,
                blurRadius: 10.0,
                spreadRadius: 5.0,
                offset: Offset(0.0, 0.0),
              ),
            ],
          ),
        ),
        Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            SizedBox(height: 50),
            Text('Add new task'),
            RaisedButton(
              onPressed: () {
                Navigator.pop(context);
              },
              textColor: Colors.white,
              padding: const EdgeInsets.all(0.0),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(8.0),
              ),
              child: Container(),
            ),
            SizedBox(height: 20),
          ],
        ),
      ],
    );
  },
);

showModalBottomSheet(
上下文：上下文，
形状：圆形矩形边框(
...
),
生成器：（BuildContext上下文）{
返回堆栈(
对齐：对齐方向.topCenter，
儿童：[
容器(
宽度：50，
身高：50，
子级：Image.asset（'assets/images/add.png'），
装饰：康斯特盒子装饰(
梯度：线性梯度(
开始：Alignment.topLeft，
结束：对齐。右下角，
颜色：[
自定义颜色。紫光，
CustomColors.PurpleDark，
],
),
borderRadius:borderRadius.all(
圆形半径（50.0），
),
boxShadow：[
箱形阴影(
颜色：CustomColor.PurpleShadow，
半径：10.0，
扩展半径：5.0，
偏移量：偏移量（0.0,0.0），
),
],
),
),
纵队(
mainAxisSize:mainAxisSize.min，
儿童：[
尺寸箱（高度：50），
文本（“添加新任务”），
升起的按钮(
已按下：（）{
Navigator.pop（上下文）；
},
textColor:Colors.white，
填充：常量边集全部（0.0），
形状：圆形矩形边框(
边界半径：边界半径。圆形（8.0），
),
子级：容器（），
),
尺寸箱（高度：20），
],
),
],
);
},
);

---

我希望您能提供一些提示或一个好的解决方案：）

不要使用showModalBottomSheet参数的形状，而是将showModalBottomSheet设置为透明，然后将背景作为子项之一添加到堆栈中并更改其形状。你可以把按钮放在柱子里面

导入“包装：颤振/材料.省道”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“颤振演示”，
主题：主题数据(
主样本：颜色。蓝色，
),
家：脚手架(
正文：安全区(
子：MyHomePage（），
),
),
);
}
}
类MyHomePage扩展StatefulWidget{
@凌驾
_MyHomePageState createState（）=>\u MyHomePageState（）；
}
类_MyHomePageState扩展状态{
_onPressed（）{
showModalBottomSheet(
背景颜色：颜色。透明，
上下文：上下文，
生成器：（BuildContext上下文）{
返回堆栈(
对齐：对齐.center，
儿童：[
定位(
顶部：MediaQuery.of（context）.size.height/2-100，
子：容器(
身高：200，
宽度：MediaQuery.of（context）.size.width，
装饰：盒子装饰(
颜色：颜色，白色，
边界半径：边界半径。垂直（顶部：半径。椭圆形（150,30）），
),
),
),
定位(
底部：0，
子：列(
儿童：[
容器(
宽度：50，
身高：50，
子级：Image.asset（'assets/images/add.png'），
装饰：康斯特盒子装饰(
梯度：线性梯度(
开始：Alignment.topLeft，
结束：对齐。右下角，
颜色：[
颜色，红色，
颜色，蓝色，
],
),
borderRadius:borderRadius.all(
圆形半径（50.0），
),
boxShadow：[
箱形阴影(
颜色：颜色，紫色，
半径：10.0，
扩展半径：5.0，
偏移量：偏移量（0.0,0.0），
),
],
),
),
尺寸箱（高度：50），
文本（“添加新任务”），
升起的按钮(
已按下：（）{
Navigator.pop（上下文）；
},
textColor:Colors.white，
填充：常量边集全部（0.0），
形状：圆形矩形边框(
边界半径：边界半径。圆形（8.0），
),
子级：容器（），
),
],
),
),
],
);
},
);
}
@凌驾
小部件构建（构建上下文）{
返回容器(
孩子：升起按钮(
onPressed:_onPressed，
));
}
}

太棒了！这么简单。起初我只是在底部使用了“RoundedRectangleBorder”，因为它是特别新的。欢迎光临，如果答案好的话，请投上一票。stackoverflow评分系统不计算特定标签评分中已接受的答案。我希望我能给你多投一票！

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: SafeArea(
          child: MyHomePage(),
        ),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  _onPressed() {
    showModalBottomSheet(
      backgroundColor: Colors.transparent,
      context: context,
      builder: (BuildContext context) {
        return Stack(
          alignment: Alignment.center,
          children: <Widget>[
            Positioned(
              top: MediaQuery.of(context).size.height / 2 - 100,
              child: Container(
                height: 200,
                width: MediaQuery.of(context).size.width,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.vertical(top: Radius.elliptical(150, 30)),
                ),
              ),
            ),
            Positioned(
              bottom: 0,
              child: Column(
                children: <Widget>[
                  Container(
                    width: 50,
                    height: 50,
                    child: Image.asset('assets/images/add.png'),
                    decoration: const BoxDecoration(
                      gradient: LinearGradient(
                        begin: Alignment.topLeft,
                        end: Alignment.bottomRight,
                        colors: <Color>[
                          Colors.red,
                          Colors.blue,
                        ],
                      ),
                      borderRadius: BorderRadius.all(
                        Radius.circular(50.0),
                      ),
                      boxShadow: [
                        BoxShadow(
                          color: Colors.purple,
                          blurRadius: 10.0,
                          spreadRadius: 5.0,
                          offset: Offset(0.0, 0.0),
                        ),
                      ],
                    ),
                  ),
                  SizedBox(height: 50),
                  Text('Add new task'),
                  RaisedButton(
                    onPressed: () {
                      Navigator.pop(context);
                    },
                    textColor: Colors.white,
                    padding: const EdgeInsets.all(0.0),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(8.0),
                    ),
                    child: Container(),
                  ),
                ],
              ),
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        child: RaisedButton(
      onPressed: _onPressed,
    ));
  }
}