Show alert dialog on app main screen load automatically in flutter
I would place it in initState
of a State
(of a StatefulWidget
).
Placing it in the build
method of a Stateless
widget is tempting, but that will trigger your alert multiple times.
In this example below, it displays an alert when the device is not connected to the Wifi, showing a [try again] button if it's not.
import 'package:flutter/material.dart';
import 'package:connectivity_plus/connectivity_plus.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."),
)
);
}
}
Simply override initState
and call your _showDialog
method inside Future
or Timer
:
@override
void initState() {
super.initState();
// Use either of them.
Future(_showDialog);
Timer.run(_showDialog); // Requires import: 'dart:async'
}
You have to wrap the content inside another Widget
(preferably Stateless).
Example:
Change From:
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"),
)));
}
}
to this:
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"),
));
}
}
Note: Refer here for wrapping show alert inside Future.delayed(Duration.zero,..)