Flutter - Why setstate doesn't work on popup? - flutter

Question

I want to change the text on popup with user interaction but it is not changing. I've tried navigator.pop(context) and relaunch show method. It correctly work but is it a correct way? And can I change value on the popup without Navigator.pop. Why doesn't it work?
Here is my code.
import 'package:flutter/material.dart';
import 'package:rflutter_alert/rflutter_alert.dart';
void main() => runApp(RatelApp());
class RatelApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text('RFlutter Alert by Ratel'),
),
body: Home(),
),
);
}
}
class Home extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
String val = "Deneme";
showAlertDialog(BuildContext context, Function onPressed) {
// set up the button
Widget okButton = FlatButton(
child: Text(val),
onPressed: onPressed,
);
// set up the AlertDialog
AlertDialog alert = AlertDialog(
title: Text("My title"),
content: Text("This is my message."),
actions: [
okButton,
],
);
// show the dialog
showDialog(
context: context,
builder: (BuildContext context) {
return alert;
},
);
}
#override
Widget build(BuildContext context) {
return Container(
child: RaisedButton(
child: Text("Show Popup"),
onPressed: () {
showAlertDialog(context, (){
setState(() {
val = "changed";
});
});
},
),
);
}
}

Answer 1

Dialogs are usually stateless and are also not a part of the state of the calling Widget so calling that setState method isn't doing anything for the dialog. To make a dialog that can have changing contents use a StatefulBuilder.
The docs have an example that shows how to use it in a dialog just like in your application.
Docs example:
await showDialog<void>(
context: context,
builder: (BuildContext context) {
int selectedRadio = 0;
return AlertDialog(
content: StatefulBuilder(
builder: (BuildContext context, StateSetter setState) {
return Column(
mainAxisSize: MainAxisSize.min,
children: List<Widget>.generate(4, (int index) {
return Radio<int>(
value: index,
groupValue: selectedRadio,
onChanged: (int value) {
setState(() => selectedRadio = value);
},
);
}),
);
},
),
);
},
);

Answer 2

You need to wrap your AlertDialog with StatefulBuilder widget.