在 Flutter 中创建弹出对话框

Question

我需要一种在颤动中创建弹出对话框的方法。

我能够根据需要创建“双色调”设计和一个对话框，但是当用户单击按钮导航到此屏幕时，我无法找到弹出对话框的方法。

创建视图的代码：

class CreateID extends StatelessWidget {
  const CreateID({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: cPrimaryColor,
      body: SafeArea(
        child: Column(
          children: [
            Expanded(
              child: Container(
                width: double.infinity,
              ),
            ),
            Expanded(
              child: Container(
                width: double.infinity,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(20.0),
                    topRight: Radius.circular(20.0)
                  )
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

这是该对话框的代码：

class PopUp extends StatelessWidget {
const PopUp({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
  body: SafeArea(
    child: FutureBuilder<dynamic>(
        future: showDialog(
            context: context,
            builder: (BuildContext context) {
              return AlertDialog(
                content: Stack(
                  overflow: Overflow.visible,
                  children: <Widget>[
                    Positioned(
                      right: -40.0,
                      top: -40.0,
                      child: InkResponse(
                        onTap: () {
                          Navigator.of(context).pop();
                        },
                        child: CircleAvatar(
                          child: Icon(Icons.close),
                          backgroundColor: Colors.red,
                        ),
                      ),
                    ),
                    Form(
//key: _formKey,
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          Padding(
                            padding: EdgeInsets.all(8.0),
                            child: TextFormField(),
                          ),
                          Padding(
                            padding: EdgeInsets.all(8.0),
                            child: TextFormField(),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              );
            }),
        builder: (BuildContext context, AsyncSnapshot<dynamic> 
snapshot) {
          throw UnimplementedError;
        }),
  ),
);
}
}

理想的结果是当用户被“推送”（通过单击按钮）到 CreateID 屏幕时，它将弹出该对话框。

Answer 1

尝试下面的代码希望对您有帮助。

您的小部件：

Center(
  child: TextButton(
    onPressed: () {
      showDataAlert();
    },
    child: Text(
      'Pressed',
    ),
  ),

您的警报功能：

showDataAlert() {
  showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(
              Radius.circular(
                20.0,
              ),
            ),
          ),
          contentPadding: EdgeInsets.only(
            top: 10.0,
          ),
          title: Text(
            "Create ID",
            style: TextStyle(fontSize: 24.0),
          ),
          content: Container(
            height: 400,
            child: SingleChildScrollView(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(
                      "Mension Your ID ",
                    ),
                  ),
                  Container(
                    padding: const EdgeInsets.all(8.0),
                    child: TextField(
                      decoration: InputDecoration(
                          border: OutlineInputBorder(),
                          hintText: 'Enter Id here',
                          labelText: 'ID'),
                    ),
                  ),
                  Container(
                    width: double.infinity,
                    height: 60,
                    padding: const EdgeInsets.all(8.0),
                    child: ElevatedButton(
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                      style: ElevatedButton.styleFrom(
                        primary: Colors.black,
                        // fixedSize: Size(250, 50),
                      ),
                      child: Text(
                        "Submit",
                      ),
                    ),
                  ),
                  Container(
                    padding: const EdgeInsets.all(8.0),
                    child: Text('Note'),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(
                      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt'
                      ' ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud'
                      ' exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
                      ' Duis aute irure dolor in reprehenderit in voluptate velit esse cillum '
                      'dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,'
                      ' sunt in culpa qui officia deserunt mollit anim id est laborum.',
                      style: TextStyle(fontSize: 12),
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      });
}

关于警报对话框设计，请参阅我的答案

您的结果屏幕->