在Flutter中创建弹出对话框

Question

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

我已经成功创建了所需的“双色”设计和对话框，但我无法找到一种在用户单击按钮导航到此屏幕后弹出对话框的方法。

创建视图的代码：

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;
        }),
  ),
);
}
}

理想的结果是，当用户通过单击按钮被“推送”到创建ID屏幕时，它会弹出对话框。

- bensmith87

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),
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      });
}

参考我在这里的回答，了解警报对话框的设计。

你的结果屏幕->

- Ravindra S. Patil

Answer 2

请参考以下代码

结果

class PopUpExample extends StatefulWidget {
  const PopUpExample({Key key}) : super(key: key);

  @override
  _PopUpExampleState createState() => _PopUpExampleState();
}

class _PopUpExampleState extends State<PopUpExample> {
  TextEditingController _textFieldController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text("Hello World"),
      ),
      body: Column(
        children: [
          InkWell(
            onTap: () {
              popupAlert(
                context: context,
                title: "Create ID",
                onTapofYes: () {},
              );
            },
            child: Container(
              height: 80.0,
              width: 120,
              color: Colors.red,
              child: Center(
                child: Text("Pop up alert"),
              ),
            ),
          ),
        ],
      ),
    );
  }

  void popupAlert({
    BuildContext context,
    title,
    Function onTapofYes,
  }) {
    showGeneralDialog(
      barrierLabel: "Label",
      barrierDismissible: true,
      barrierColor: Colors.black.withOpacity(0.05),
      transitionDuration: Duration(milliseconds: 200),
      context: context,
      pageBuilder: (dialogContext, anim1, anim2) {},
      transitionBuilder: (dialogContext, anim1, anim2, child) {
        return Transform.scale(
          scale: anim1.value,
          child: Padding(
            padding: EdgeInsets.symmetric(
              horizontal: ScreenUtil().setWidth(40.0),
            ),
            child: Align(
              alignment: Alignment.center,
              child: SingleChildScrollView(
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(25.0),
                  child: Material(
                    elevation: 5.0,
                    child: Padding(
                      padding: EdgeInsets.symmetric(
                        horizontal: ScreenUtil().setWidth(24.0),
                        vertical: ScreenUtil().setHeight(23.0),
                      ),
                      child: Container(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            // GestureDetector(
                            //   onTap: () {
                            //     Navigator.pop(dialogContext);
                            //   },
                            //   child: Align(
                            //     alignment: Alignment.topRight,
                            //     child: Icon(
                            //       Icons.close,
                            //       color: Colors.black,
                            //       size: ScreenUtil().setSp(20.0),
                            //     ),
                            //   ),
                            // ),
                            // SizedBox(
                            //   height: ScreenUtil().setHeight(30.0),
                            // ),
                            Align(
                              alignment: Alignment.center,
                              child: Text(
                                title ?? "",
                                textAlign: TextAlign.center,
                              ),
                            ),
                            SizedBox(
                              height: ScreenUtil().setHeight(21.0),
                            ),
                            Text("Mention your ID"),
                           SizedBox(
                              height: ScreenUtil().setHeight(5.0),
                            ),
                            TextField(
                              controller: _textFieldController,
                              decoration: InputDecoration(
                                border: OutlineInputBorder(),
                                labelText: '',
                                hintText: '',
                              ),
                            ),
                            SizedBox(
                              height: ScreenUtil().setHeight(10.0),
                            ),
                            InkWell(
                              onTap: onTapofYes,
                              child: Container(
                                width: MediaQuery.of(context).size.width,
                                padding: EdgeInsets.symmetric(
                                  horizontal: ScreenUtil().setWidth(10.0),
                                  vertical: ScreenUtil().setHeight(13.0),
                                ),
                                decoration: BoxDecoration(
                                  color: Colors.black,
                                  borderRadius: BorderRadius.circular(8.0),
                                ),
                                child: Text(
                                  "Submit",
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                    color: Colors.white,
                                  ),
                                ),
                              ),
                            ),
                            SizedBox(
                              height: ScreenUtil().setHeight(10.0),
                            ),
                            Text("Note:"),
                            Text(
                                "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit vitae mauris eu malesuada. Morbi facilisis nulla vel dolor malesuada efficitur. Nulla faucibus pellentesque tortor, id finibus diam dignissim non. Sed pretium ante nunc, vitae viverra lectus porta in. Sed suscipit libero quis mi sagittis scelerisque. Curabitur rutrum faucibus porttitor. Morbi pretium nisi nec eros posuere pretium. Aliquam a arcu magna.")
                          ],
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
        );
      },
    );
  }
}

- Tejaswini Dev