我想在弹出窗口中创建一个带有Flutter 的表单,如下图所示:

popup.

我怎么才能用Flutter 翼做到这一点呢?

推荐答案

这就是你要的!showDialog接受WidgetBuilder作为参数,因此您可以返回任何小部件.

   import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new MyApp()));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            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(),
                              ),
                              Padding(
                                padding: const EdgeInsets.all(8.0),
                                child: RaisedButton(
                                  child: Text("Submitß"),
                                  onPressed: () {
                                    if (_formKey.currentState.validate()) {
                                      _formKey.currentState.save();
                                    }
                                  },
                                ),
                              )
                            ],
                          ),
                        ),
                      ],
                    ),
                  );
                });
          },
          child: Text("Open Popup"),
        ),
      ),
    );
  }
}

跳起来有帮助!

Flutter相关问答推荐

如何更改ElevatedButton的 colored颜色 以按下它?

如何使一个悬浮的appbar在flutter?

Android Studio中的Ffltter&;Couchbase:进程C:/Program Files/Git/bin/bash以非零退出值35结束

从外部类动态更改IconButton的图标

Firebase动态链接已弃用,不应在新项目中使用.Flutter 替代方案

Flutter :在后台实现振动

Flutter :执行com.android.build.gradle.internal.tasks.MergeNativeLibsTask$MergeNativeLibsTaskWorkAction时出现故障

如何在Flutter 安全存储器中存储对象值?

dart /长笛中的返回早期模式和拆分方法

Firestore 不会取代 map

点击后,将按钮的 colored颜色 禁用/更改一段时间

Flutter蓝牙 - 如何通过蓝牙从设备中获取文件?

如何删除图像边框半径与其父容器边框半径之间的空白

flutter 在文本字段中更改部分文本选定 colored颜色

java.lang.IncompatibleClassChangeError:找到接口 com.google.android.gms.location.SettingsClient,

如何在 flutter 中同时使用 ButtonStyle() 和 ElevatedButton.styleFrom() ?

如何在 Flutter 中将列小部件添加到行小部件?

Flutter:制作自定义小部件的最佳做法是什么?

为什么 orientation == Orientation.portrait 总是正确的,尽管我的设备已经处于横向

根据索引/变量更改小部件的 colored颜色