How to automatically close a dialog box without clicking in flutter? - flutter

I have a dialog box, when I click on the Send Again button, I make a request to the server and, if successful, another _emailSentDialog dialog box opens from above. How can I make the first EmailVerifyDialog automatically close when the second _emailSentDialog is opened?
class EmailVerifyDialog extends StatelessWidget {
final CurrentEmailCubit cubit;
const EmailVerifyDialog({Key? key, required this.cubit}) : super(key: key);
#override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
return AlertDialogGradientBorder(
height: size.height * .5,
child: SizedBox(
width: size.width,
child: Padding(
padding: const EdgeInsets.only(bottom: 35),
child: Column(
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 45),
child: RichText(
textAlign: TextAlign.center,
text: TextSpan(
children: [
WidgetSpan(
child: FittedBox(
child: Row(
children: [
const Text(
'Didn’t recieve a link? ',
style: constants.Styles.smallBookTextStyleWhite,
),
TextButton(
style: TextButton.styleFrom(
padding: EdgeInsets.zero),
onPressed: () async {
await cubit
.sendConfirmationCode(
email: cubit.currentEmail)
.then((value) => {
if (value)
{
_emailSentDialog(context),
}
else
{
_errorNotification(context),
}
});
log(cubit.currentEmail);
},
child: const Text(
'Send Again',
style: constants
.Styles.smallBookUnderlineTextStyleWhite,
),
),
],
),
),
),
],
),
),
),
],
),
),
),
);
}
void _closeDialog(BuildContext context) {
Navigator.pop(context);
}
void _emailSentDialog(context) async {
showDialog(
context: context,
builder: (BuildContext context) => const EmailSentDialog(),
);
}

I was referring this way
onPressed: () async {
setState(() {
text = "checking on Server";
});
final showSecondDialog = await serverResult();
if (showSecondDialog) {
if (!mounted) return;
Navigator.of(context).pop();
showDialog2(context);
}
},
class TestDialogActivity extends StatefulWidget {
const TestDialogActivity({Key? key}) : super(key: key);
#override
State<TestDialogActivity> createState() => _TestDialogActivityState();
}
class _TestDialogActivityState extends State<TestDialogActivity> {
showDialog2(context) async {
showDialog(
context: context,
builder: (context) => AlertDialog(
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextButton(
onPressed: () async {
Navigator.of(context).pop();
},
child: Text(" close Second dialog "))
],
),
),
);
}
Future<bool> serverResult() async {
await Future.delayed(Duration(seconds: 1));
return true;
}
showDialog1(context) async {
String text = "sendAgain";
showDialog(
context: context,
builder: (context) => StatefulBuilder(
builder: (context, setState) => AlertDialog(
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextButton(
onPressed: () async {
setState(() {
text = "checking on Server";
});
final showSecondDialog = await serverResult();
if (showSecondDialog) {
if (!mounted) return;
Navigator.of(context).pop();
showDialog2(context);
}
},
child: Text("$text"))
],
),
),
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: () => showDialog1(context),
),
);
}
}

Related

I was trying to show user a feedback message to in password reset by Email, But it's not working

I'm creating a reset password page for my flutter app and I'm using showDialog for giving the feedback to the user to, but while running the code the message does not appear in screen, kindly check the code and tell me is there any mistate which I have made.
If anyone know the solution please help, I was trying to solve it but I can't find any solution.
The code is below:
class ForgotPasswordMailScreen extends StatefulWidget {
const ForgotPasswordMailScreen({Key? key}) : super(key: key);
#override
State<ForgotPasswordMailScreen> createState() =>
_ForgotPasswordMailScreenState();
}
final TextEditingController _email = TextEditingController();
class _ForgotPasswordMailScreenState extends State<ForgotPasswordMailScreen> {
final formKey = GlobalKey<FormState>();
bool loading = false;
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
elevation: 0,
backgroundColor: Colors.transparent,
leading: IconButton(
onPressed: () {
Navigator.pop(context);
},
icon: const Icon(
Icons.arrow_back_ios_new,
color: Colors.blue,
),
),
),
body: SingleChildScrollView(
child: Container(
padding: const EdgeInsets.all(kDefaultSize),
child: Column(
children: [
const SizedBox(height: kDefaultSize * 4),
const FormHeaderWidget(
image: kForgotPasswordImage,
title: kForgotPassword,
subTitle: kForgotEmailTitle,
crossAxisAlignment: CrossAxisAlignment.center,
heightBetween: 10.0,
textAlign: TextAlign.center,
),
const SizedBox(height: kFormHeight),
Form(
key: formKey,
child: Column(
children: [
TextFormField(
controller: _email,
validator: (value) {
if (value!.isEmpty ||
!RegExp(r'^[\w-\.]+#([\w-]+\.)+[a-z]{2,5}$')
.hasMatch(value)) {
return 'Enter a valid email address.';
} else {
return null;
}
},
decoration: const InputDecoration(
label: Text(kEmail),
hintText: kEmail,
prefixIcon: Icon(Icons.mail_outline_rounded),
),
),
const SizedBox(height: 20.0),
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: () async {
if (formKey.currentState!.validate()) {
resetPassword();
formKey.currentState?.reset();
// _email.clear();
}
},
child: const Text(kNext),
),
),
],
),
),
],
),
),
),
),
);
}
// showLoadingScreen() {}
showMessage() {
showDialog(
context: context,
builder: (context) {
return const AlertDialog(
content: Text('Password reset link sent! Check your email.'),
);
});
}
showErrorMessage(String eMsg) {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
content: Text(eMsg),
);
});
}
resetPassword() async {
showDialog(
context: context,
barrierDismissible: false,
builder: (context) => const Center(
child: CircularProgressIndicator(),
),
);
try {
await FirebaseAuth.instance
.sendPasswordResetEmail(email: _email.text.trim())
.then((value) {
Navigator.pop(context);
});
showMessage();
} on FirebaseAuthException catch (e) {
String error = e.message.toString();
showErrorMessage(error);
Navigator.pop(context);
}
}
}

I cant update the UI or widgets even with the StatefulWidget

I want to update the height of the first alertDialog right after I press the "increse the height" in the secoundDialog but it didn't change
this is my code:
class MyWidget extends StatefulWidget {
const MyWidget({super.key});
#override
State<MyWidget> createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
// this is the firt value of the height
double heightSize = 200;
#override
Widget build(BuildContext context) {
return Container(
child: FloatingActionButton(
onPressed: () async {
setState(() {
print('the size0 is $heightSize');
showDialog(
context: context,
builder: (context) {
return StatefulBuilder(
builder: (context, setState) {
return AlertDialog(
title: Container(
padding: EdgeInsets.only(
left: 10, right: 10, top: 5, bottom: 4),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Download File',
style: TextStyle(
color: Color.fromARGB(255, 83, 82, 82),
fontSize: 20),
),
],
),
),
content: Container(
// I want to change to 500 right after I press the button
height: heightSize,
child: Column(
children: [
IconButton(
onPressed: () {
setState(() {
print('the size1 is $heightSize');
showDialog(
context: context,
builder: (context) {
return StatefulBuilder(
builder: (context, setState) {
return AlertDialog(
content: GestureDetector(
child: Text(
'increase the height '),
onTap: () {
setState(() {
// this is the button I want to change to 500
heightSize = 500;
print(
'the size2 is $heightSize');
Navigator.pop(context);
});
},
),
);
},
);
},
);
});
},
icon: Icon(FontAwesomeIcons.paste))
],
),
),
);
},
);
},
);
});
},
),
);
}
}
if I close the two of the alert-dialog and press floating button it work but I want to change right after I press the increase Size button
I try the set state but it doesnt work
Try to use async method like
onPressed: () async {
await showDialog(...);
setState(() {});
print('the size1 is $heightSize');
},
class MyWidget extends StatefulWidget {
const MyWidget({super.key});
#override
State<MyWidget> createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
double heightSize = 200;
#override
Widget build(BuildContext context) {
return Container(
child: FloatingActionButton(
onPressed: () async {
setState(() {
print('the size0 is $heightSize');
showDialog(
context: context,
builder: (context) {
return StatefulBuilder(
builder: (context, setState) {
return AlertDialog(
title: Container(
padding: EdgeInsets.only(
left: 10, right: 10, top: 5, bottom: 4),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Download File',
style: TextStyle(
color: Color.fromARGB(255, 83, 82, 82),
fontSize: 20),
),
],
),
),
content: Container(
// I want to change to 500 right after I press the button
height: heightSize,
child: Column(
children: [
IconButton(
onPressed: () async {
await showDialog(
context: context,
builder: (context) {
return StatefulBuilder(
builder: (context, setState) {
return AlertDialog(
content: GestureDetector(
child:
Text('increase the height '),
onTap: () {
setState(() {
// this is the button I want to change to 500
heightSize = 500;
print(
'the size2 is $heightSize');
Navigator.pop(context);
});
},
),
);
},
);
},
);
setState(() {});
print('the size1 is $heightSize');
},
icon: Icon(Icons.paste))
],
),
),
);
},
);
},
);
});
},
),
);
}
}

Flutter Sqflite Toggling between Screens based on Login Status creates null operator used on null value error

I am trying to toggle between Login Screen and HomeScreen based on the user status. The logic seems to be working as long as I don't put HomeScreen.
I replaced HomeScreen with a different screen to check and the app works as it should. It displays different screens on hot restart based on the user's login status. But as soon as I try to put HomeScreen I get null operator used on null value error.
Here is the toggle logic.
class Testing extends StatefulWidget {
const Testing({super.key});
#override
State<Testing> createState() => _TestingState();
}
class _TestingState extends State<Testing> {
#override
Widget build(BuildContext context) {
return FutureBuilder(
future: TodoServiceHelper().checkifLoggedIn(),
builder: ((context, snapshot) {
if (!snapshot.hasData) {
return Container(
child: Center(
child: CircularProgressIndicator(),
),
);
}
if (snapshot.hasError) {
print(snapshot.hasError);
return Container(
child: Center(
child: CircularProgressIndicator(),
),
);
}
if (snapshot.data!.isNotEmpty) {
print(snapshot.data);
return RegisterPage();
// returning HomePage gives null check operator used on null value error
} else
return Login();
}),
);
}
}
Here is the HomeScreen
class HomePage extends StatefulWidget {
String? username;
HomePage({this.username});
#override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final GlobalKey<FormState> formKey = GlobalKey();
TextEditingController termController = TextEditingController();
void clearText() {
termController.clear();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
actions: <Widget>[
IconButton(
onPressed: () {
User loginUser =
User(username: widget.username.toString(), isLoggedIn: false);
TodoServiceHelper().updateUserName(loginUser);
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (BuildContext context) => Login()));
},
icon: Icon(Icons.logout),
color: Colors.white,
)
],
title: FutureBuilder(
future: TodoServiceHelper().getTheUser(widget.username!),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Container(
child: Center(
child: CircularProgressIndicator(),
),
);
}
return Text(
'Welcome ${snapshot.data!.username}',
style: TextStyle(color: Colors.white),
);
}),
),
body: SingleChildScrollView(
child: Column(children: [
Column(
children: [
Padding(
padding: const EdgeInsets.all(12.0),
child: Form(
key: formKey,
child: Column(
children: <Widget>[
TextFormField(
controller: termController,
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
enabledBorder: OutlineInputBorder(),
labelText: 'search todos',
),
),
TextButton(
onPressed: () async {
await Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ShowingSerachedTitle(
userNamee: widget.username!,
searchTerm: termController.text,
)),
);
print(termController.text);
clearText();
setState(() {});
},
child: Text(
'Search',
)),
Divider(
thickness: 3,
),
],
),
),
),
],
),
Container(
child: Stack(children: [
Positioned(
bottom: 0,
child: Text(
' done Todos',
style: TextStyle(fontSize: 12),
),
),
IconButton(
onPressed: () async {
await Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
CheckingStuff(userNamee: widget.username!)),
);
setState(() {});
},
icon: Icon(Icons.filter),
),
]),
),
Divider(
thickness: 3,
),
Container(
child: TodoListWidget(name: widget.username!),
height: 1000,
width: 380,
)
]),
),
floatingActionButton: FloatingActionButton(
backgroundColor: Color.fromARGB(255, 255, 132, 0),
onPressed: () async {
await showDialog(
barrierDismissible: false,
context: context,
builder: ((context) {
return AddNewTodoDialogue(name: widget.username!);
}),
);
setState(() {});
},
child: Icon(Icons.add),
),
);
}
}
The function used to return user with loginStatus true
Future<List<User>> checkifLoggedIn() async {
final Database db = await initializeDB();
final List<Map<String, Object?>> result = await db.query(
'users',
where: 'isLoggedIn = ?',
whereArgs: ['1'],
);
List<User> filtered = [];
for (var item in result) {
filtered.add(User.fromMap(item));
}
return filtered;
}
the problem is here
you used ! sign on a nullable String , and this string is nullable,
try to use this operation (??) so make it
widget.username??"" by this line you will check if the user name is null it will be replaced by an empty string.

How to Change the label of an existing chip in flutter?

I'm using chips in my code when I tap on chip a counter is displayed, I want to update the chip label with when count is added.
Widget returnWidget() {
return InkWell(
child: Chip(
label: Text(temp!),
),
onTap: () {
print(temp);
_showMyDialog();
},
);
}
This is the widget I'm using to add multiple chips.
Future<void> _showMyDialog() async {
return showDialog<void>(
context: context,
barrierDismissible: false, // user must tap button!
builder: (BuildContext context) {
return AlertDialog(
scrollable: false,
title: const Text('Add Count'),
content: Container(
height: 50,
width: 50,
alignment: Alignment.center,
padding: const EdgeInsets.all(3),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
AddCount(),
],
),
),
actions: <Widget>[
TextButton(
child: const Text('Cancel'),
onPressed: () {
{
setState(() {
_itemCount = 0;
});
}
Navigator.of(context).pop();
},
),
TextButton(
child: const Text('Add'),
onPressed: () {
if(count==0) {
setState((){
temp = temp! + _itemCount.toString();
Text(temp!);
count++;
});
}
print(text);
},
),
],
);
},
);
}
This is the code block which is showing a counter dialog. I want to update chip label on add.
Hello here I have a solution, I did not see more details about your code but here I did a working solution, the variable you want to update should be located inside the classed where is used but you can also use state management or InheritedWidget to update variables globally:
class App extends StatelessWidget {
const App({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Example(),
);
}
}
class Example extends StatefulWidget {
const Example({Key? key}) : super(key: key);
#override
State<Example> createState() => _ExampleState();
}
class _ExampleState extends State<Example> {
int temp = 0; // declare the variable inside the class you want to update it
Future<void> _showMyDialog() async {
return showDialog<void>(
context: context,
barrierDismissible: false,
builder: (BuildContext context) {
return AlertDialog(
scrollable: false,
title: const Text('Add Count'),
content: Container(
height: 50,
width: 50,
alignment: Alignment.center,
padding: const EdgeInsets.all(3),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
// AddCount(),
],
),
),
actions: <Widget>[
TextButton(
child: const Text('Cancel'),
onPressed: () {
Navigator.of(context).pop();
},
),
TextButton(
child: const Text('Add'),
onPressed: () {
setState((){
temp = temp += 1; // update the chip UI
});
Navigator.of(context).pop();
},
),
],
);
},
);
}
Widget returnWidget() {
return InkWell(
child: Chip(
label: Text("count $temp"), // <-- new change
),
onTap: () {
print(temp);
_showMyDialog();
},
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.red,
body: Center(
child: Container(
margin: const EdgeInsets.all(32),
child: returnWidget(),
),
),
);
}
}

Showing selected image in alert dialog in flutter

How can i show the selected image in my alert dialog ?
In my app, i added an alert dialog which has the camera button. When user clicks the camera button, another alert dialog asks to select file from gallery. After the user selects image file from gallery, i want to show the image in the alert dialog with the camera button, but the image shows only after reopening the alert dialog.
I have posted my code below. I am new to flutter. Please can someone help me? Thanks in advance.
class Test extends StatefulWidget {
#override
_State createState() => new _State();
}
Future<File> imageFile;
class _State extends State<Test> {
Future<void> _openDailog() async {
return showDialog<void>(
context: context,
barrierDismissible: true,
builder: (BuildContext context) {
return AlertDialog(
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)),
title: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text('Click Photo'),
Ink(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(24.0),
color: Colors.blue),
child: IconButton(
color: Colors.white,
icon: Icon(Icons.camera_alt),
onPressed: () {
_cameraOptions();
print("test");
},
),
)
],
),
content: SingleChildScrollView(
child: Container(
width: 300.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
showImage(),
InkWell(
child: Container(
margin: EdgeInsets.only(top: 8.0),
child: RaisedButton(
color: Colors.blue,
child: new Text(
"Send",
style: TextStyle(color: Colors.white),
),
onPressed: () {
Navigator.of(context).pop();
print("test");
},
),
)),
],
),
),
),
);
},
);
}
#override
Widget build(BuildContext context) {
// TODO: implement build
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FloatingActionButton(
heroTag: null,
child: Icon(Icons.insert_drive_file),
onPressed: () {
_openDailog();
},
)
],
);
}
Future<void> _cameraOptions() {
return showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
content: new SingleChildScrollView(
child: new ListBody(
children: <Widget>[
FlatButton(
onPressed: () {
pickImageFromGallery(ImageSource.gallery);
Navigator.of(context).pop();
},
color: Colors.transparent,
child: new Text(
'Select From Gallery',
textAlign: TextAlign.start,
style: new TextStyle(
decoration: TextDecoration.underline,
),
),
),
],
),
),
);
});
}
pickImageFromGallery(ImageSource source) {
setState(() {
imageFile = ImagePicker.pickImage(source: source);
});
}
Widget showImage() {
return FutureBuilder<File>(
future: imageFile,
builder: (BuildContext context, AsyncSnapshot<File> snapshot) {
if (snapshot.connectionState == ConnectionState.done &&
snapshot.data != null) {
return Image.file(
snapshot.data,
width: MediaQuery.of(context).size.width,
height: 100,
);
} else if (snapshot.error != null) {
return const Text(
'Error Picking Image',
textAlign: TextAlign.center,
);
} else {
return const Text(
'No Image Selected',
textAlign: TextAlign.center,
);
}
},
);
}
}
That is because you would need to setState() however you can't do that in an alert dialogue as it doesn't have its own state, the workaround for that would be to have the dialogue be its own stateful widget. Please check out this article as it shows how to do that. If you faced problems let me know!
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:path_provider/path_provider.dart';
void main() {
runApp(new MaterialApp(
home: new MyHomePage(),
));
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _selectedIndex = 0;
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text("StackoverFlow"),
),
body: Container(),
floatingActionButton: FloatingActionButton(
onPressed: () async {
await _dialogCall(context);
},
),
);
}
Future<void> _dialogCall(BuildContext context) {
return showDialog(
context: context,
builder: (BuildContext context) {
return MyDialog();
});
}
}
class MyDialog extends StatefulWidget {
#override
_MyDialogState createState() => new _MyDialogState();
}
class _MyDialogState extends State<MyDialog> {
String imagePath;
Image image;
#override
Widget build(BuildContext context) {
return AlertDialog(
content: new SingleChildScrollView(
child: new ListBody(
children: <Widget>[
Container(child: image!= null? image:null),
GestureDetector(
child: Row(
children: <Widget>[
Icon(Icons.camera),
SizedBox(width: 5),
Text('Take a picture '),
],
),
onTap: () async {
await getImageFromCamera();
setState(() {
});
}),
Padding(
padding: EdgeInsets.all(8.0),
),
],
),
),
);
}
Future getImageFromCamera() async {
var x = await ImagePicker.pickImage(source: ImageSource.camera);
imagePath = x.path;
image = Image(image: FileImage(x));
}
}
Try this solution with GestureDetector() .it works
onTap:()async{
var image = await ImagePicker.pickImage(
source: ImageSource.gallery).whenComplete((){
setState(() {
});
}
);
setState(() {
_image = image;
});
},