如何使用带有颤动的关闭图标来设计自定义对话框?

问题描述 投票:1回答:2

我有对话框的图像,并尝试将其设计为与图像下方的图像相同。

enter image description here

我尝试过,但与图片上方不一样我只想在图像的右上角设置十字按钮。我使用了Stack,并在Positionedtop:0.0处放置了right:0.0小部件。

CODE:

 customDialogBox(BuildContext context) {
    return showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            backgroundColor: Colors.red,
            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>[
                  SizedBox(
                    height: 20.0,
                  ),
                  Center(
                    child: Padding(
                      padding: const EdgeInsets.all(10.0),
                      child: new Text("Sorry please try \n again tomorrow", style:TextStyle(fontSize: 30.0,color: Colors.white)),
                    )//
                  ),

                  SizedBox(
                    height: 20.0,
                    width: 5.0,
                  ),
                  Divider(
                    color: Colors.grey,
                    height: 4.0,
                  ),

                 InkWell(
                    child: Container(
                      padding: EdgeInsets.only(top: 15.0, bottom: 15.0),
                      decoration: BoxDecoration(
                        color:Colors.white,
                        borderRadius: BorderRadius.only(
                        bottomLeft: Radius.circular(32.0),
                        bottomRight: Radius.circular(32.0)),
                      ),
                      child:  Text(
                       "OK",
                        style: TextStyle(color: Colors.blue,fontSize: 25.0),
                        textAlign: TextAlign.center,
                      ),
                    ),
                    onTap:(){
                      Navigator.pop(context);
                    },
                  ),
                ],
              ),
            ),
            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,
              ),
            ),
          ],
        )
      );
    });
  }

这是我的对话框:enter image description here

flutter dart flutter-layout
2个回答
2
投票

尝试一下将很完美。

    import 'package:flutter/material.dart';

    import 'custom_dialog.dart';

    void main() {
    runApp(MyApp());
    }

    class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
        title: 'Flutter Demo',
        home: HomePage(),
        );
    }
    }

    class HomePage extends StatefulWidget {
    @override
    _HomePageState createState() => _HomePageState();
    }

    class _HomePageState extends State<HomePage> {
    @override
    Widget build(BuildContext context) {
        return Scaffold(
        appBar: AppBar(),
        body: Center(
            child: RaisedButton(
            onPressed: () {
                showDialog(context: context, builder: (BuildContext context) => CustomDialog());
            },
            child: Text('show custom dialog'),
            ),
        ),
        );
    }
    }

Dialog Widget:

    import 'package:flutter/material.dart';

    class CustomDialog extends StatelessWidget {

    @override
    Widget build(BuildContext context) {
        return Dialog(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16.0)),
        elevation: 0.0,
        backgroundColor: Colors.transparent,
        child: dialogContent(context),
        );
    }

    Widget dialogContent(BuildContext context) {
        return Container(
        margin: EdgeInsets.only(left: 0.0,right: 0.0),
        child: Stack(
            children: <Widget>[
            Container(
                padding: EdgeInsets.only(
                top: 18.0,
                ),
                margin: EdgeInsets.only(top: 13.0,right: 8.0),
                decoration: BoxDecoration(
                    color: Colors.red,
                    shape: BoxShape.rectangle,
                    borderRadius: BorderRadius.circular(16.0),
                    boxShadow: <BoxShadow>[
                    BoxShadow(
                        color: Colors.black26,
                        blurRadius: 0.0,
                        offset: Offset(0.0, 0.0),
                    ),
                    ]),
                child: Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                    SizedBox(
                    height: 20.0,
                    ),
                    Center(
                        child: Padding(
                        padding: const EdgeInsets.all(10.0),
                        child: new Text("Sorry please try \n again tomorrow", style:TextStyle(fontSize: 30.0,color: Colors.white)),
                        )//
                    ),
                    SizedBox(height: 24.0),
                    InkWell(
                    child: Container(
                        padding: EdgeInsets.only(top: 15.0,bottom:15.0),
                        decoration: BoxDecoration(
                        color:Colors.white,
                        borderRadius: BorderRadius.only(
                            bottomLeft: Radius.circular(16.0),
                            bottomRight: Radius.circular(16.0)),
                        ),
                        child:  Text(
                        "OK",
                        style: TextStyle(color: Colors.blue,fontSize: 25.0),
                        textAlign: TextAlign.center,
                        ),
                    ),
                    onTap:(){
                        Navigator.pop(context);
                    },
                    )
                ],
                ),
            ),
            Positioned(
                right: 0.0,
                child: GestureDetector(
                onTap: (){
                    Navigator.of(context).pop();
                },
                child: Align(
                    alignment: Alignment.topRight,
                    child: CircleAvatar(
                    radius: 14.0,
                    backgroundColor: Colors.white,
                    child: Icon(Icons.close, color: Colors.red),
                    ),
                ),
                ),
            ),
            ],
        ),
        );
    }
    }

enter image description here

方法2:

    void showFancyCustomDialog(BuildContext context) {
            Dialog fancyDialog = Dialog(
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(12.0),
            ),
            child: Container(
                decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20.0),
                ),
                height: 300.0,
                width: 300.0,
                child: Stack(
                children: <Widget>[
                    Container(
                    width: double.infinity,
                    height: 300,
                    decoration: BoxDecoration(
                        color: Colors.grey[100],
                        borderRadius: BorderRadius.circular(12.0),
                    ),
                    ),
                    Container(
                    width: double.infinity,
                    height: 50,
                    alignment: Alignment.bottomCenter,
                    decoration: BoxDecoration(
                        color: Colors.red,
                        borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(12),
                        topRight: Radius.circular(12),
                        ),
                    ),
                    child: Align(
                        alignment: Alignment.center,
                        child: Text(
                        "Dialog Title!",
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 20,
                            fontWeight: FontWeight.w600),
                        ),
                    ),
                    ),
                    Align(
                    alignment: Alignment.bottomCenter,
                    child: InkWell(
                        onTap: () {
                        Navigator.pop(context);
                        },
                        child: Container(
                        width: double.infinity,
                        height: 50,
                        decoration: BoxDecoration(
                            color: Colors.blue[300],
                            borderRadius: BorderRadius.only(
                            bottomLeft: Radius.circular(12),
                            bottomRight: Radius.circular(12),
                            ),
                        ),
                        child: Align(
                            alignment: Alignment.center,
                            child: Text(
                            "Okay let's go!",
                            style: TextStyle(
                                color: Colors.white,
                                fontSize: 20,
                                fontWeight: FontWeight.w600),
                            ),
                        ),
                        ),
                    ),
                    ),
                    Align(
                    // These values are based on trial & error method
                    alignment: Alignment(1.05, -1.05),
                    child: InkWell(
                        onTap: () {
                        Navigator.pop(context);
                        },
                        child: Container(
                        decoration: BoxDecoration(
                            color: Colors.grey[200],
                            borderRadius: BorderRadius.circular(12),
                        ),
                        child: Icon(
                            Icons.close,
                            color: Colors.black,
                        ),
                        ),
                    ),
                    ),
                ],
                ),
            ),
            );
    showDialog(
        context: context, builder: (BuildContext context) => fancyDialog);
}

enter image description here


1
投票

为了构建自定义对话框,我必须自定义所有内容。我仍然使用堆栈,但没有使用内置的DialogBox,而是使用了实际的图标替换了图标的图像,并按照预期的结果将其加粗了。

希望这符合您的需求。

Container
推荐问答
热门问答
最新问答