flutter - 如何在弹出窗口中创建表单
flutter - how to create forms in popup
我想在弹出窗口中创建一个表单，如下图所示：
弹出窗口
.
我怎样才能用 flutter 做到这一点？
给你！ showDialog 将 WidgetBuilder 作为参数，因此您可以 return 任何小部件。
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"),
),
),
);
}
}
希望对您有所帮助！
使用 rflutter_alert 插件 rflutter_alert
您必须将库作为项目的依赖项添加。
dependencies:
rflutter_alert: ^1.0.3
要打开一个弹出窗口，让我们成为一个函数并执行以下操作：
_openPopup(context) {
Alert(
context: context,
title: "LOGIN",
content: Column(
children: <Widget>[
TextField(
decoration: InputDecoration(
icon: Icon(Icons.account_circle),
labelText: 'Username',
),
),
TextField(
obscureText: true,
decoration: InputDecoration(
icon: Icon(Icons.lock),
labelText: 'Password',
),
),
],
),
buttons: [
DialogButton(
onPressed: () => Navigator.pop(context),
child: Text(
"LOGIN",
style: TextStyle(color: Colors.white, fontSize: 20),
),
)
]).show();
}
并这样称呼它
onPressed: () {
_openPopup(context),
}
这是一个代码示例，您可以使用它来创建可以产生此类弹出窗口的按钮。
代码 :
RaisedButton(
child: Text("Open Popup"),
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
scrollable: true,
title: Text('Login'),
content: Padding(
padding: const EdgeInsets.all(8.0),
child: Form(
child: Column(
children: <Widget>[
TextFormField(
decoration: InputDecoration(
labelText: 'Name',
icon: Icon(Icons.account_box),
),
),
TextFormField(
decoration: InputDecoration(
labelText: 'Email',
icon: Icon(Icons.email),
),
),
TextFormField(
decoration: InputDecoration(
labelText: 'Message',
icon: Icon(Icons.message ),
),
),
],
),
),
),
actions: [
RaisedButton(
child: Text("Submit"),
onPressed: () {
// your code
})
],
);
});
},
),
输出：
For more options, you would have to manipulate the properties of the
Form widget, the TextField widget or the RaisedButton widget such as
autovalidation, decoration, color etc ... If this is not enough , you
can use the Dialog widget instead of the AlertDialog widget. But in
this case, you will replace the content property with child. And make
the necessary modifications.
我尝试了上面的所有答案，但它说没有 material 小部件错误。然后我试试这个
在图标按钮的地方，你可以使用任何小部件，但你必须使用脚手架背景颜色作为透明和后退或取消按钮
onTap: () {
showDialog(
context: context,
builder: (BuildContext context) {
return Scaffold(
backgroundColor: Colors.transparent,
body: IconButton(
icon: Icon(Icons.ac_unit),
onPressed: () {
Navigator.pop(context);
},
),
);
},
);
},
截图（没有任何第三方包）：
代码：调用这个方法即可：
void showDialogWithFields() {
showDialog(
context: context,
builder: (_) {
var emailController = TextEditingController();
var messageController = TextEditingController();
return AlertDialog(
title: Text('Contact Us'),
content: ListView(
shrinkWrap: true,
children: [
TextFormField(
controller: emailController,
decoration: InputDecoration(hintText: 'Email'),
),
TextFormField(
controller: messageController,
decoration: InputDecoration(hintText: 'Message'),
),
],
),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: Text('Cancel'),
),
TextButton(
onPressed: () {
// Send them to your email maybe?
var email = emailController.text;
var message = messageController.text;
Navigator.pop(context);
},
child: Text('Send'),
),
],
);
},
);
}
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
contentPadding: EdgeInsets.zero,
content: Stack(
overflow: Overflow.visible,
children: <Widget>[
Positioned(
right: -15.0,
top: -15.0,
child: InkResponse(
onTap: () {
Navigator.of(context).pop();
},
child: CircleAvatar(
radius: 12,
child: Icon(Icons.close, size: 18,),
backgroundColor: Colors.red,
),
),
),
Form(
key: _formKey,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
height: 60,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color:Colors.yellow.withOpacity(0.2),
border: Border(
bottom: BorderSide(color: Colors.grey.withOpacity(0.3))
)
),
child: Center(child: Text("Contact Me", style:TextStyle(color: Colors.black54, fontWeight: FontWeight.w700, fontSize: 20, fontStyle: FontStyle.italic, fontFamily: "Helvetica"))),
),
Padding(
padding: EdgeInsets.all(20.0),
child: Container(
height: 50,
decoration: BoxDecoration(
border: Border.all(color: Colors.grey.withOpacity(0.2) )
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
flex:1,
child: Container(
width: 30,
child: Center(child: Icon(Icons.person, size: 35,color:Colors.grey.withOpacity(0.4))),
decoration: BoxDecoration(
border: Border(
right: BorderSide(color: Colors.grey.withOpacity(0.2))
)
),
),
),
Expanded(
flex: 4,
child: TextFormField(
decoration: InputDecoration(
hintText: "Name",
contentPadding: EdgeInsets.only(left:20),
border: InputBorder.none,
focusedBorder: InputBorder.none,
errorBorder: InputBorder.none,
hintStyle: TextStyle(color:Colors.black26, fontSize: 18, fontWeight: FontWeight.w500 )
),
),
)
],
)
),
),
Padding(
padding: const EdgeInsets.all(20.0),
child: RaisedButton(
padding: EdgeInsets.zero,
child: Container(
width:MediaQuery.of(context).size.width,
height: 60,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color(0xffc9880b),
Color(0xfff77f00),
]
)
),
child: Center(child: Text("Submit", style: TextStyle(color:Colors.white70, fontSize: 20, fontWeight: FontWeight.w800),)),
),
onPressed: () {
if (_formKey.currentState.validate()) {
_formKey.currentState.save();
}
},
),
)
],
),
),
],
),
);
});
我想在弹出窗口中创建一个表单，如下图所示： 弹出窗口
我怎样才能用 flutter 做到这一点？
给你！ showDialog 将 WidgetBuilder 作为参数，因此您可以 return 任何小部件。
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"),
),
),
);
}
}
希望对您有所帮助！
使用 rflutter_alert 插件 rflutter_alert
您必须将库作为项目的依赖项添加。
dependencies:
rflutter_alert: ^1.0.3
要打开一个弹出窗口，让我们成为一个函数并执行以下操作：
_openPopup(context) {
Alert(
context: context,
title: "LOGIN",
content: Column(
children: <Widget>[
TextField(
decoration: InputDecoration(
icon: Icon(Icons.account_circle),
labelText: 'Username',
),
),
TextField(
obscureText: true,
decoration: InputDecoration(
icon: Icon(Icons.lock),
labelText: 'Password',
),
),
],
),
buttons: [
DialogButton(
onPressed: () => Navigator.pop(context),
child: Text(
"LOGIN",
style: TextStyle(color: Colors.white, fontSize: 20),
),
)
]).show();
}
并这样称呼它
onPressed: () {
_openPopup(context),
}
这是一个代码示例，您可以使用它来创建可以产生此类弹出窗口的按钮。
代码 :
RaisedButton(
child: Text("Open Popup"),
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
scrollable: true,
title: Text('Login'),
content: Padding(
padding: const EdgeInsets.all(8.0),
child: Form(
child: Column(
children: <Widget>[
TextFormField(
decoration: InputDecoration(
labelText: 'Name',
icon: Icon(Icons.account_box),
),
),
TextFormField(
decoration: InputDecoration(
labelText: 'Email',
icon: Icon(Icons.email),
),
),
TextFormField(
decoration: InputDecoration(
labelText: 'Message',
icon: Icon(Icons.message ),
),
),
],
),
),
),
actions: [
RaisedButton(
child: Text("Submit"),
onPressed: () {
// your code
})
],
);
});
},
),
输出：
For more options, you would have to manipulate the properties of the Form widget, the TextField widget or the RaisedButton widget such as autovalidation, decoration, color etc ... If this is not enough , you can use the Dialog widget instead of the AlertDialog widget. But in this case, you will replace the content property with child. And make the necessary modifications.
我尝试了上面的所有答案，但它说没有 material 小部件错误。然后我试试这个 在图标按钮的地方，你可以使用任何小部件，但你必须使用脚手架背景颜色作为透明和后退或取消按钮
onTap: () {
showDialog(
context: context,
builder: (BuildContext context) {
return Scaffold(
backgroundColor: Colors.transparent,
body: IconButton(
icon: Icon(Icons.ac_unit),
onPressed: () {
Navigator.pop(context);
},
),
);
},
);
},
截图（没有任何第三方包）：
代码：调用这个方法即可：
void showDialogWithFields() {
showDialog(
context: context,
builder: (_) {
var emailController = TextEditingController();
var messageController = TextEditingController();
return AlertDialog(
title: Text('Contact Us'),
content: ListView(
shrinkWrap: true,
children: [
TextFormField(
controller: emailController,
decoration: InputDecoration(hintText: 'Email'),
),
TextFormField(
controller: messageController,
decoration: InputDecoration(hintText: 'Message'),
),
],
),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: Text('Cancel'),
),
TextButton(
onPressed: () {
// Send them to your email maybe?
var email = emailController.text;
var message = messageController.text;
Navigator.pop(context);
},
child: Text('Send'),
),
],
);
},
);
}
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
contentPadding: EdgeInsets.zero,
content: Stack(
overflow: Overflow.visible,
children: <Widget>[
Positioned(
right: -15.0,
top: -15.0,
child: InkResponse(
onTap: () {
Navigator.of(context).pop();
},
child: CircleAvatar(
radius: 12,
child: Icon(Icons.close, size: 18,),
backgroundColor: Colors.red,
),
),
),
Form(
key: _formKey,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
height: 60,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color:Colors.yellow.withOpacity(0.2),
border: Border(
bottom: BorderSide(color: Colors.grey.withOpacity(0.3))
)
),
child: Center(child: Text("Contact Me", style:TextStyle(color: Colors.black54, fontWeight: FontWeight.w700, fontSize: 20, fontStyle: FontStyle.italic, fontFamily: "Helvetica"))),
),
Padding(
padding: EdgeInsets.all(20.0),
child: Container(
height: 50,
decoration: BoxDecoration(
border: Border.all(color: Colors.grey.withOpacity(0.2) )
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
flex:1,
child: Container(
width: 30,
child: Center(child: Icon(Icons.person, size: 35,color:Colors.grey.withOpacity(0.4))),
decoration: BoxDecoration(
border: Border(
right: BorderSide(color: Colors.grey.withOpacity(0.2))
)
),
),
),
Expanded(
flex: 4,
child: TextFormField(
decoration: InputDecoration(
hintText: "Name",
contentPadding: EdgeInsets.only(left:20),
border: InputBorder.none,
focusedBorder: InputBorder.none,
errorBorder: InputBorder.none,
hintStyle: TextStyle(color:Colors.black26, fontSize: 18, fontWeight: FontWeight.w500 )
),
),
)
],
)
),
),
Padding(
padding: const EdgeInsets.all(20.0),
child: RaisedButton(
padding: EdgeInsets.zero,
child: Container(
width:MediaQuery.of(context).size.width,
height: 60,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color(0xffc9880b),
Color(0xfff77f00),
]
)
),
child: Center(child: Text("Submit", style: TextStyle(color:Colors.white70, fontSize: 20, fontWeight: FontWeight.w800),)),
),
onPressed: () {
if (_formKey.currentState.validate()) {
_formKey.currentState.save();
}
},
),
)
],
),
),
],
),
);
});