如何实现堆叠?

时间:2019-02-01 13:13:26

标签: dart flutter

我想获得以下屏幕截图

这是我的代码

void showShortBioDialog(BuildContext context) {
    showDialog(
        context: context,
        barrierDismissible: true,
        builder: (BuildContext context) {
          return Dialog(
            child: Stack(
              children: <Widget>[
                Container(
                  height: 150,
                  child: Stack(
                    children: <Widget>[
                      Container(
                        child: Padding(
                          padding: const EdgeInsets.fromLTRB(0, 10, 0, 40),
                          child: Text(
                            "Short Bio",
                            textAlign: TextAlign.center,
                            style:
                                TextStyle(color: white, fontFamily: "BarlowBold"),
                          ),
                        ),
                        color: blue2,
                        width: double.infinity,
                      ),
                      Positioned(
                        top: 30,
                        right: -5,
                        left: -5,
                        child: Card(
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(5),
                          ),
                          elevation: 4,
                          child: Container(
                            height: 180,
                            child: Padding(
                              padding: const EdgeInsets.symmetric(horizontal: 10),
                              child: TextField(),
                            ),
                          ),
                        ),
                      ),

                    ],
                  ),
                ),

                Positioned(
                  bottom: 0,
                  right: 0,
                  left: 0,
                  child: IconButton(
                      icon: Image.asset(
                        "images/next_signup.webp",
                        height: 35,
                        width: 35,
                        fit: BoxFit.contain,
                      ),
                      onPressed: () {}),
                )

              ],
            ),
          );
        });
  }

但这是我的输出。

我无法在所需的输出上达到“提交”按钮。 我也尝试过使用单个堆栈,但无法实现Submit按钮的输出? 我究竟做错了什么? 任何帮助将不胜感激

1 个答案:

答案 0 :(得分:1)

您可以通过更改Positioned小部件属性并将overflow的{​​{1}}属性设置为Stack来实现:

Overflow.visible