Flutter - FloatingActionButton 中的 SimpleDialog
Flutter - SimpleDialog in FloatingActionButton
我试图在点击 FloatingActionButton
后创建一个 SimpleDialog
,但是当按下该按钮时没有任何反应。
我做错了什么?
import "package:flutter/material.dart";
void main() {
runApp(new ControlleApp());
}
class ControlleApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new HomePage(),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) => new Scaffold(
appBar: new AppBar(
backgroundColor: new Color(0xFF26C6DA),
),
floatingActionButton: new FloatingActionButton(
tooltip: 'Add',
child: new Icon(Icons.add),
backgroundColor: new Color(0xFFF44336),
onPressed: (){
new SimpleDialog(
title: new Text('Test'),
children: <Widget>[
new RadioListTile(
title: new Text('Testing'), value: null, groupValue: null, onChanged: (value) {},
)
],
);
}
),
);
}
您需要将其包装在显示操作对话框中。
showDialog(context: context, builder: (BuildContext context) {
return new AlertDialog(
title: new Text("My Super title"),
content: new Text("Hello World"),
);
}
我注意到接受的答案是将 child
用于 showDialog
,这实际上已被弃用,因此我建议避免使用它。您应该改用 builder
,我提供了一个示例:
onPressed: () {
showDialog(
context: context,
builder: (_) => AlertDialog(
title: Text('Dialog Title'),
content: Text('This is my content'),
)
);
}
在显示来自 floatingActionButton
的对话框时,有一个特定的场景需要注意
如果你这样写代码
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: () {
showDialog(
context: context,
builder: (ctxt) => new AlertDialog(
title: Text("Text Dialog"),
)
);
}),
)
);
}
}
它不会显示警告对话框但会抛出异常"No MaterialLocalizations found."
当 MaterialApp
不是调用对话框的根目录时会发生这种情况。在这种情况下,根小部件是应用程序。但是,如果我们将代码更改为
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyAppImpl()
);
}
}
class MyAppImpl extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: () {
showDialog(
context: context,
builder: (ctxt) => new AlertDialog(
title: Text("Text Dialog"),
)
);
}),
);
}
}
MaterialApp
成为根,一切正常。在这种情况下,flutter 会自动创建 Material 本地化,否则需要手动创建。
我在官方文档中没有找到任何相同的文档。
希望对您有所帮助
要做到这一点,请遵循下面给出的代码
首先在你的 pubspec.yaml
文件中添加 rflutter_alert
依赖项
dependencies:
rflutter_alert: ^1.0.3
将它导入你想使用的地方
import 'package:rflutter_alert/rflutter_alert.dart';
并创建函数打开
confirmationPopup(BuildContext dialogContext) {
var alertStyle = AlertStyle(
animationType: AnimationType.grow,
overlayColor: Colors.black87,
isCloseButton: true,
isOverlayTapDismiss: true,
titleStyle: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
descStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: 16),
animationDuration: Duration(milliseconds: 400),
);
Alert(
context: dialogContext,
style: alertStyle,
title: "Detete?",
desc: "Are you sure you want to delete this Gatekeeper?",
buttons: [
DialogButton(
child: Text(
"Cancel",
style: TextStyle(color: Colors.white, fontSize: 18),
),
onPressed: () {
Navigator.pop(context);
},
color: appThemeColor,
),
DialogButton(
child: Text(
"Delete",
style: TextStyle(color: Colors.white, fontSize: 18),
),
onPressed: () {
Navigator.pop(context);
},
color: appThemeColor,
)
]).show();
}
在你想打开的地方调用这个
onTap: () {
confirmationPopup(context);
},
我试图在点击 FloatingActionButton
后创建一个 SimpleDialog
,但是当按下该按钮时没有任何反应。
我做错了什么?
import "package:flutter/material.dart";
void main() {
runApp(new ControlleApp());
}
class ControlleApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new HomePage(),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) => new Scaffold(
appBar: new AppBar(
backgroundColor: new Color(0xFF26C6DA),
),
floatingActionButton: new FloatingActionButton(
tooltip: 'Add',
child: new Icon(Icons.add),
backgroundColor: new Color(0xFFF44336),
onPressed: (){
new SimpleDialog(
title: new Text('Test'),
children: <Widget>[
new RadioListTile(
title: new Text('Testing'), value: null, groupValue: null, onChanged: (value) {},
)
],
);
}
),
);
}
您需要将其包装在显示操作对话框中。
showDialog(context: context, builder: (BuildContext context) {
return new AlertDialog(
title: new Text("My Super title"),
content: new Text("Hello World"),
);
}
我注意到接受的答案是将 child
用于 showDialog
,这实际上已被弃用,因此我建议避免使用它。您应该改用 builder
,我提供了一个示例:
onPressed: () {
showDialog(
context: context,
builder: (_) => AlertDialog(
title: Text('Dialog Title'),
content: Text('This is my content'),
)
);
}
在显示来自 floatingActionButton
如果你这样写代码
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: () {
showDialog(
context: context,
builder: (ctxt) => new AlertDialog(
title: Text("Text Dialog"),
)
);
}),
)
);
}
}
它不会显示警告对话框但会抛出异常"No MaterialLocalizations found."
当 MaterialApp
不是调用对话框的根目录时会发生这种情况。在这种情况下,根小部件是应用程序。但是,如果我们将代码更改为
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyAppImpl()
);
}
}
class MyAppImpl extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: () {
showDialog(
context: context,
builder: (ctxt) => new AlertDialog(
title: Text("Text Dialog"),
)
);
}),
);
}
}
MaterialApp
成为根,一切正常。在这种情况下,flutter 会自动创建 Material 本地化,否则需要手动创建。
我在官方文档中没有找到任何相同的文档。
希望对您有所帮助
要做到这一点,请遵循下面给出的代码
首先在你的 pubspec.yaml
文件中添加 rflutter_alert
依赖项
dependencies:
rflutter_alert: ^1.0.3
将它导入你想使用的地方
import 'package:rflutter_alert/rflutter_alert.dart';
并创建函数打开
confirmationPopup(BuildContext dialogContext) {
var alertStyle = AlertStyle(
animationType: AnimationType.grow,
overlayColor: Colors.black87,
isCloseButton: true,
isOverlayTapDismiss: true,
titleStyle: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
descStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: 16),
animationDuration: Duration(milliseconds: 400),
);
Alert(
context: dialogContext,
style: alertStyle,
title: "Detete?",
desc: "Are you sure you want to delete this Gatekeeper?",
buttons: [
DialogButton(
child: Text(
"Cancel",
style: TextStyle(color: Colors.white, fontSize: 18),
),
onPressed: () {
Navigator.pop(context);
},
color: appThemeColor,
),
DialogButton(
child: Text(
"Delete",
style: TextStyle(color: Colors.white, fontSize: 18),
),
onPressed: () {
Navigator.pop(context);
},
color: appThemeColor,
)
]).show();
}
在你想打开的地方调用这个
onTap: () {
confirmationPopup(context);
},