如何根据我的选择设计对话框?

时间:2019-08-02 12:22:44

标签: dart flutter-layout

我是新手,要根据我的选择尝试构建一个对话框 意思是,我希望“取消”按钮应该在堆栈小部件的右上角。

我浏览了它,但是找不到任何完美的解决方案

这是我尝试过的代码 我在堆栈内使用了定位小部件,但无法获得满意的输出

welcomeDialogBox(BuildContext context) {
    return showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(32.0))),
            contentPadding: EdgeInsets.only(top: 10.0),
            content: Stack(
              children: <Widget>[
                Container(
                  width: MediaQuery.of(context).size.width,
                  child:Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      InkWell(
                      child: Container(
                        padding: EdgeInsets.only(top: 15.0, bottom: 15.0),
                        decoration: BoxDecoration(
                          color:Colors.white,
                          borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(32.0),
                              topRight: Radius.circular(32.0)),
                        ),
                      child: Text(
                        "Welcome to Try \n your Luck",
                        style: TextStyle(color: Colors.blue,fontSize: 25.0),
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ),
                  Divider(
                    color: Colors.grey,
                    height: 4.0,
                  ),
                  Center(
                    child:Image.asset("assets/welcome_logo.png")
                  ),
                  SizedBox(
                    height: 32.0,
                    width: 5.0,
                  ),

                ],
              ),
            ),
            Positioned(
              top: 0.0,
              right: 0.0,
              child: FloatingActionButton(
                child: Image.asset("assets/red_cross.png"),
                onPressed: (){
                Navigator.pop(context);
                },
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(80)),
              backgroundColor: Colors.white,
              mini: true,
                elevation: 5.0,
              ),
           ),
              ],
            )
          );
        });
  }

Dialog box

0 个答案:

没有答案