Flutter 在应用程序主屏幕上显示警报对话框在颤振中自动加载
我想根据条件显示警报对话框。不基于用户交互,例如按钮按下事件 如果在应用程序状态数据警报对话框中设置了标志,则不会显示该标志 下面是我想显示的示例警报对话框Flutter 在应用程序主屏幕上显示警报对话框在颤振中自动加载,flutter,android-alertdialog,flutter-layout,Flutter,Android Alertdialog,Flutter Layout,我想根据条件显示警报对话框。不基于用户交互,例如按钮按下事件 如果在应用程序状态数据警报对话框中设置了标志,则不会显示该标志 下面是我想显示的示例警报对话框 void _showDialog() { // flutter defined function showDialog( context: context, builder: (BuildContext context) { // return object of type Dia
void _showDialog() {
// flutter defined function
showDialog(
context: context,
builder: (BuildContext context) {
// return object of type Dialog
return AlertDialog(
title: new Text("Alert Dialog title"),
content: new Text("Alert Dialog body"),
actions: <Widget>[
// usually buttons at the bottom of the dialog
new FlatButton(
child: new Text("Close"),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}
void\u showDialog(){
//颤振定义函数
显示对话框(
上下文:上下文,
生成器:(BuildContext上下文){
//返回对话框类型的对象
返回警报对话框(
标题:新文本(“警报对话框标题”),
内容:新文本(“警报对话框正文”),
行动:[
//通常是对话框底部的按钮
新扁平按钮(
子项:新文本(“关闭”),
已按下:(){
Navigator.of(context.pop();
},
),
],
);
},
);
}
我试图在主屏幕小部件的构建方法中调用该方法,但它给了我错误-
The context used to push or pop routes from the Navigator must be that of a widget that is a descendant of a Navigator widget.
E/flutter ( 3667): #0 Navigator.of.<anonymous closure> (package:flutter/src/widgets/navigator.dart:1179:9)
E/flutter ( 3667): #1 Navigator.of (package:flutter/src/widgets/navigator.dart:1186:6)
E/flutter ( 3667): #2 showDialog (package:flutter/src/material/dialog.dart:642:20)
用于从导航器推送或弹出路由的上下文必须是导航器小部件的后代小部件的上下文。
E/颤振(3667):#0.of。(包:flatter/src/widgets/navigator.dart:1179:9)
E/flatter(3667):#1 Navigator.of(包:flatter/src/widgets/Navigator.dart:1186:6)
电子/颤振(3667):#2显示对话框(包装:颤振/src/material/dialog.dart:642:20)
问题是我不知道应该从哪里调用这个_showDialog方法?您必须将内容包装到另一个
小部件中(最好是无状态的)
示例:
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Trial',
home: Scaffold(
appBar: AppBar(title: Text('List scroll')),
body: Container(
child: Text("Hello world"),
)));
}
}
import 'dart:async';
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Trial',
home: Scaffold(
appBar: AppBar(title: Text('List scroll')), body: new MyHome()));
}
}
class MyHome extends StatelessWidget { // Wrapper Widget
@override
Widget build(BuildContext context) {
Future.delayed(Duration.zero, () => showAlert(context));
return Container(
child: Text("Hello world"),
);
}
void showAlert(BuildContext context) {
showDialog(
context: context,
builder: (context) => AlertDialog(
content: Text("hi"),
));
}
}
更改自:
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Trial',
home: Scaffold(
appBar: AppBar(title: Text('List scroll')),
body: Container(
child: Text("Hello world"),
)));
}
}
import 'dart:async';
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Trial',
home: Scaffold(
appBar: AppBar(title: Text('List scroll')), body: new MyHome()));
}
}
class MyHome extends StatelessWidget { // Wrapper Widget
@override
Widget build(BuildContext context) {
Future.delayed(Duration.zero, () => showAlert(context));
return Container(
child: Text("Hello world"),
);
}
void showAlert(BuildContext context) {
showDialog(
context: context,
builder: (context) => AlertDialog(
content: Text("hi"),
));
}
}
对此:
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Trial',
home: Scaffold(
appBar: AppBar(title: Text('List scroll')),
body: Container(
child: Text("Hello world"),
)));
}
}
import 'dart:async';
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Trial',
home: Scaffold(
appBar: AppBar(title: Text('List scroll')), body: new MyHome()));
}
}
class MyHome extends StatelessWidget { // Wrapper Widget
@override
Widget build(BuildContext context) {
Future.delayed(Duration.zero, () => showAlert(context));
return Container(
child: Text("Hello world"),
);
}
void showAlert(BuildContext context) {
showDialog(
context: context,
builder: (context) => AlertDialog(
content: Text("hi"),
));
}
}
注意:请参阅在Future.delayed(Duration.zero,…)
中包装显示警报,我会将其置于状态的initState
(属于StatefulWidget
)中
将其放置在无状态小部件的构建方法中很有诱惑力,但这会多次触发您的警报
在下面的示例中,当设备未连接到Wifi时,它会显示警报,如果未连接,则会显示[重试]按钮
import 'package:flutter/material.dart';
import 'package:connectivity/connectivity.dart';
void main() => runApp(MaterialApp(title: "Wifi Check", home: MyPage()));
class MyPage extends StatefulWidget {
@override
_MyPageState createState() => _MyPageState();
}
class _MyPageState extends State<MyPage> {
bool _tryAgain = false;
@override
void initState() {
super.initState();
_checkWifi();
}
_checkWifi() async {
// the method below returns a Future
var connectivityResult = await (new Connectivity().checkConnectivity());
bool connectedToWifi = (connectivityResult == ConnectivityResult.wifi);
if (!connectedToWifi) {
_showAlert(context);
}
if (_tryAgain != !connectedToWifi) {
setState(() => _tryAgain = !connectedToWifi);
}
}
@override
Widget build(BuildContext context) {
var body = Container(
alignment: Alignment.center,
child: _tryAgain
? RaisedButton(
child: Text("Try again"),
onPressed: () {
_checkWifi();
})
: Text("This device is connected to Wifi"),
);
return Scaffold(
appBar: AppBar(title: Text("Wifi check")),
body: body
);
}
void _showAlert(BuildContext context) {
showDialog(
context: context,
builder: (context) => AlertDialog(
title: Text("Wifi"),
content: Text("Wifi not detected. Please activate it."),
)
);
}
}
导入“包装:颤振/材料.省道”;
导入“package:connectivity/connectivity.dart”;
void main()=>runApp(MaterialApp(标题:“Wifi检查”,主页:MyPage());
类MyPage扩展了StatefulWidget{
@凌驾
_MyPageState createState()=>\u MyPageState();
}
类MyPageState扩展了状态{
bool _tryAgain=false;
@凌驾
void initState(){
super.initState();
_检查WiFi();
}
_checkWifi()异步{
//下面的方法返回一个Future
var connectivityResult=await(新建连接().checkConnectivity());
bool connectedToWifi=(connectivityResult==connectivityResult.wifi);
如果(!connectedToWifi){
_showAlert(上下文);
}
如果(_tryAgain!=!connectedToWifi){
设置状态(()=>_tryAgain=!connectedToWifi);
}
}
@凌驾
小部件构建(构建上下文){
var body=容器(
对齐:对齐.center,
孩子:_tryAgain
?升起按钮(
子项:文本(“重试”),
已按下:(){
_检查WiFi();
})
:Text(“此设备已连接到Wifi”),
);
返回脚手架(
appBar:appBar(标题:文本(“Wifi检查”),
身体:身体
);
}
void\u showAlert(BuildContext上下文){
显示对话框(
上下文:上下文,
生成器:(上下文)=>AlertDialog(
标题:文本(“Wifi”),
内容:文本(“未检测到Wifi。请激活它。”),
)
);
}
}
我用颤振社区开发的软件包解决了这个问题。这里
将此添加到您的pubspec.yaml
after_layout: ^1.0.7+2
然后尝试下面的例子
import 'package:after_layout/after_layout.dart';
import 'package:flutter/material.dart';
class DialogDemo extends StatefulWidget {
@override
_DialogDemoState createState() => _DialogDemoState();
}
class _DialogDemoState extends State<DialogDemo>
with AfterLayoutMixin<DialogDemo> {
@override
void initState() {
super.initState();
}
@override
void afterFirstLayout(BuildContext context) {
_neverSatisfied();
}
@override
Widget build(BuildContext context) {
return SafeArea(
child: Container(
decoration: BoxDecoration(color: Colors.red),
),
);
}
Future<void> _neverSatisfied() async {
return showDialog<void>(
context: context,
barrierDismissible: false, // user must tap button!
builder: (BuildContext context) {
return AlertDialog(
title: Text('Rewind and remember'),
content: SingleChildScrollView(
child: ListBody(
children: <Widget>[
Text('You will never be satisfied.'),
Text('You\’re like me. I’m never satisfied.'),
],
),
),
actions: <Widget>[
FlatButton(
child: Text('Regret'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}
}
import'package:after_layout/after_layout.dart';
进口“包装:颤振/材料.省道”;
类DialogDemo扩展StatefulWidget{
@凌驾
_DialogDemoState createState();
}
类_对话框DemoState扩展状态
与AfterLayoutMixin{
@凌驾
void initState(){
super.initState();
}
@凌驾
void afterFirstLayout(BuildContext上下文){
_永不满足();
}
@凌驾
小部件构建(构建上下文){
返回安全区(
子:容器(
装饰:盒子装饰(颜色:Colors.red),
),
);
}
Future\u neversatified()异步{
返回显示对话框(
上下文:上下文,
barrierDismissible:false,//用户必须点击按钮!
生成器:(BuildContext上下文){
返回警报对话框(
标题:文本(“倒带并记住”),
内容:SingleChildScrollView(
子:列表体(
儿童:[
Text('你永远不会满意'),
文本('你和我一样,我从来都不满足'),
],
),
),
行动:[
扁平按钮(
儿童:文本(“遗憾”),
已按下:(){
Navigator.of(context.pop();
},
),
],
);
},
);
}
}
只需覆盖initState
并调用\u showDialog
中的Timer.run()方法
这就是我如何以一种简单的方式实现的:
加
在主屏幕(或任何所需小部件)的构建方法上方:
然后在小部件的初始状态上:
@override
void initState() {
super.initState();
WidgetsBinding.instance.addPostFrameCallback((_) => checkFirstRun(context));
}
这确保了该函数在小部件构建后运行。您是否尝试过initState()
?initState中无法使用上下文我猜我似乎是一种黑客行为,但我喜欢这种解决方案。谢谢,我同意。但我找不到更好的解决办法。我研究了showDialog
和Navigator.of
的文档/实现。没有运气放置的问题