Qasim Ali
Reputation: 444
How to Manage alert dialog by clicking other areas of Screen in Flutter?
I have an activity in my app. I am using Alert Dialog. when I reach to this activity and Alert Dialog is open, while I click other area of screen it disappears, but the problem is that while I want to click insides of any text field it reappear again and over again. I want this like once it disappears new reappears again until I go to other activity and return to this activity again. I am new to Flutter I am facing this problem from few days, I searched this problem many times but not found and solution to resolve it, any one who can help me, thanks in advance. Code
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'bottomnavigationbar.dart';
class Contact extends StatefulWidget {
@override
_ContactState createState() => _ContactState();
}
class _ContactState extends State<Contact> {
@override
Widget build(BuildContext context) {
AlertDialog dialog = new AlertDialog(
content: Container(
width: 260.0,
height: 187.0,
decoration: new BoxDecoration(
shape: BoxShape.rectangle,
// color: const Color(0xFFFFFF),
borderRadius: new BorderRadius.all(new Radius.circular(50.0)),
),
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.all(1),
),
Container(
child: GestureDetector(
onTap: () {
// Route route =
// MaterialPageRoute(builder: (context) => Payment1());
// Navigator.pushReplacement(context, route);
// Navigator.pushNamed(context, "myRoute");
},
child: new Text(
"For Bikes-979578-6541",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.red,
fontSize: 18,
// fontWeight: FontWeight.w700,
),
),
),
),
Padding(
padding: EdgeInsets.all(1),
),
Divider(
thickness: 1.5,
),
Padding(
padding: EdgeInsets.all(1),
),
Container(
child: GestureDetector(
onTap: () {
// Route route =
// MaterialPageRoute(builder: (context) => Payment1());
// Navigator.pushReplacement(context, route);
// Navigator.pushNamed(context, "myRoute");
},
child: new Text(
"For Boats-979-541-3607",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.red,
fontSize: 18,
//fontWeight: FontWeight.w700,
),
),
),
),
Padding(
padding: EdgeInsets.all(1),
),
Divider(
thickness: 1.5,
),
Padding(
padding: EdgeInsets.all(1),
),
Container(
child: GestureDetector(
onTap: () {
// Route route =
// MaterialPageRoute(builder: (context) => Payment1());
// Navigator.pushReplacement(context, route);
// Navigator.pushNamed(context, "myRoute");
},
child: new Text(
"[email protected]",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.red,
fontSize: 18,
// fontWeight: FontWeight.w700,
),
),
),
),
Padding(
padding: EdgeInsets.all(1),
),
Divider(
thickness: 1.5,
),
Padding(
padding: EdgeInsets.all(1),
),
Container(
child: GestureDetector(
onTap: () {
// Route route =
// MaterialPageRoute(builder: (context) => Payment1());
// Navigator.pushReplacement(context, route);
// Navigator.pushNamed(context, "myRoute");
},
child: new Text(
"Follow Us on Facebook!",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.red,
fontSize: 18,
// fontWeight: FontWeight.w700,
),
),
),
),
Padding(
padding: EdgeInsets.all(1),
),
Divider(
thickness: 1.5,
),
Padding(
padding: EdgeInsets.all(1),
),
Container(
child: GestureDetector(
onTap: () {
// Navigator.pop(dialog);
// Route route =
// MaterialPageRoute(builder: (context) => Payment1());
// Navigator.pushReplacement(context, route);
// Navigator.pushNamed(context, "myRoute");
// Navigator.of(context).pop(false),
},
child: new Text(
"Done",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.red,
fontSize: 18,
//fontWeight: FontWeight.w700,
),
),
),
),
],
),
),
);
Future.delayed(
Duration.zero,
() => showDialog(
context: context, builder: (BuildContext context) => dialog),
);
TextStyle style = TextStyle(
fontFamily: 'Montserrat', color: Colors.white, fontSize: 16.0);
return Scaffold(
appBar: AppBar(
title: Text("Contact"),
centerTitle: true,
actions: <Widget>[
new IconButton(
icon: new Icon(
Icons.more_horiz,
size: 35,
color: Colors.white,
),
// tooltip: 'Closes application',
// onPressed: () => exit(0),
),
],
),
body: SingleChildScrollView(
child: Container(
padding: EdgeInsets.all(1),
color: Colors.black,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.width / 1.6,
// constraints: BoxConstraints.expand(),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/contactpage.png"),
fit: BoxFit.cover),
),
),
Padding(
padding: EdgeInsets.all(8),
),
Text(
"Contact Info",
style: TextStyle(
color: Colors.red,
fontSize: 20,
fontWeight: FontWeight.w400,
),
),
Padding(
padding: EdgeInsets.all(8),
),
Divider(
color: Colors.white,
indent: 40,
endIndent: 40,
),
Padding(
padding: EdgeInsets.all(8),
),
Container(
padding: EdgeInsets.all(16),
child: Column(
//mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"We are a locally owned. family run business providing equipment rentals in Matagorda Country. We are dedicated to making your experience with us go as smoothly as possible. Fill out the form below or call us if you have any questions or concerns.",
style: TextStyle(
color: Colors.white70,
fontSize: 15,
fontWeight: FontWeight.w400,
),
),
Text(
"Mobile No:",
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.w400),
),
TextField(
style: style,
maxLength: 30,
cursorColor: Colors.red,
textAlign: TextAlign.left,
keyboardType: TextInputType.number,
decoration: InputDecoration(
hintText: 'Enter your mobile number',
hintStyle:
TextStyle(fontSize: 16, color: Colors.white),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
filled: true,
fillColor: Color(0xFF1E1E1E),
contentPadding: EdgeInsets.all(16),
),
),
Text(
"Email:",
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.w400),
),
TextField(
style: style,
maxLength: 16,
cursorColor: Colors.red,
textAlign: TextAlign.left,
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
hintText: 'Enter your email',
hintStyle:
TextStyle(fontSize: 16, color: Colors.white),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
filled: true,
fillColor: Color(0xFF1E1E1E),
contentPadding: EdgeInsets.all(16),
),
),
Text(
"Description:",
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.w400),
),
TextField(
keyboardType: TextInputType.text,
maxLines: 8,
maxLength: 1000,
style: style,
cursorColor: Colors.red,
textAlign: TextAlign.left,
decoration: InputDecoration(
hintText: 'Enter Description Here',
hintStyle:
TextStyle(fontSize: 16, color: Colors.white),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
filled: true,
fillColor: Color(0xFF1E1E1E),
contentPadding: EdgeInsets.all(16),
),
),
Material(
elevation: 5.0,
borderRadius: BorderRadius.circular(30.0),
color: Colors.red,
child: MaterialButton(
minWidth: MediaQuery.of(context).size.width,
padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
onPressed: () {
// Route route =
// MaterialPageRoute(builder: (context) => Payment2());
// Navigator.pushReplacement(context, route);
},
child: Text("Submit",
textAlign: TextAlign.center,
style: style.copyWith(
color: Colors.white,
fontWeight: FontWeight.w800)),
),
),
],
))
],
),
),
),
bottomNavigationBar: BottomNavigation(),
);
}
}
Video link [Problem Video][1] [1]: https://drive.google.com/file/d/11i4R9DZAImO8CGw7TwOwQ0wbXXn9yHLr/view?usp=sharing
Upvotes: 1
Views: 2540
Answers (3)
Kennith
Reputation: 373
Flutter got a showDialog() method particularly for dialog widget. You may put the AlertDialog widget inside and call the showDialog() method in initState() which will be called exactly once when a stateful widget is created so it won't be called during rebuilding. If you want to dismiss the dialog when tapping other regions, set the barrierDismissible parameter of showDialog() method to true.
You just need to modify the _ContactState class like this:
class _ContactState extends State<Contact> {
@override
void initState() {
super.initState();
Future.delayed(
Duration.zero,
() => showDialog(
context: context,
barrierDismissible: true,
builder: (_) => AlertDialog(
// content
),
)
);
}
@override
Widget build(BuildContext context) {
//your original code without the AlertDialog widget
}
}
========================== . UPDATED
I made some changes in this code.Now it is working fine 👌
Upvotes: 1
Rahul Kumar Jha
Reputation: 69
Define the alert Dialog outside Widget build & call it when you need it
createAlertDialog(BuildContext){
return AlertDialog( //Your work )
@override Widget build(BuildContext context) {
//Whenver you need alertdialog call createAlertDialog() }```
Upvotes: 1
theCaptainXgod
Reputation: 233
This behavior is caused because you have defined the alert dialog box inside your build method. The build method runs every time the widget is rebuilt or your state changes, hence your Alert Dialog box reappears.
Try to move your AlertDialog dialog variable outside the build method.
Upvotes: 0
Related Questions
- How to make an AlertDialog in Flutter?
- How to show alert dialog in flutter without button click
- AlertDialog without context in Flutter
- Flutter Reopen AlertDialog during on press anybutton
- How to design alert dialog box in flutter
- How to show an alert dialog after the user click the button in flutter
- How to open an AlertDialog in Flutter by Button-Press?
- How to make fullscreen alertDialog in flutter
- How to make Alert Dialog working in flutter
- Show Alert_Dialog in bottom of view