How to Pass data from showmodalbottomsheet to Previous Page in Flutter - flutter

Question

How i pass data from showmodalbottomsheet to previous page. Below is the sample code, what i have tried is there is a button when i click it displays modalbottomsheet and when i click on Done button it should pass 1 value to previous page and also i have added setState on onTap press but still it is not changing on previous page unless i click on Flutter Hot Reload. How to solve this issue?
class TestPage extends StatefulWidget {
const TestPage({Key? key}) : super(key: key);
#override
_TestPageState createState() => _TestPageState();
}
class _TestPageState extends State<TestPage> {
String textResult = "";
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(textResult),
TextButton(
onPressed: () {
showModalBottomSheet(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topRight: Radius.circular(24.0),
topLeft: Radius.circular(24.0))),
context: context,
builder: (_) => StatefulBuilder(
builder: (BuildContext context, setState) {
return Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
GestureDetector(
onTap: () {
setState(() {
textResult = "1";
});
Navigator.pop(context);
},
child: Text(
'Done',
style: TextStyle(
color: Colors.red,
fontWeight: FontWeight.bold),
),
),
],
),
),
],
),
);
}),
);
},
child: Text('Press'))
],
),
),
),
),
);
}
}

Answer 1

#Canada2000's answer is ok. I'm just extending it.
The use StatefulBuilder inside showDialog() or showModalBottomSheet()+... is these widgets are separated from current context tree.
We use StatefulBuilder when we like to show changes on dialogs. StatefulBuilder has its own state⇾ builder: (BuildContext context, setState) and calling setState is using StatefulBuilder's setstate.
Now let's say you want to change both UI, to do that you need to simply rename StatefulBuilder's state to something like SBsetState inside builder as #Canada2000 said.
to update the _TestPageState use setState((){})
to update on dialog UI, use StatefulBuilder's state like SBsetState((){})
You may can simple ignore StatefulBuilder if you don't want to show any changes on dialog.
Your widget
import 'package:flutter/material.dart';
class TestPage extends StatefulWidget {
const TestPage({Key? key}) : super(key: key);
#override
_TestPageState createState() => _TestPageState();
}
class _TestPageState extends State<TestPage> {
String textResult = "";
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("text Result ${textResult}"),
TextButton(
onPressed: () {
showModalBottomSheet(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topRight: Radius.circular(24.0),
topLeft: Radius.circular(24.0))),
context: context,
builder: (_) => StatefulBuilder(
builder: (BuildContext context, setStateBTS) {
return Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
GestureDetector(
onTap: () {
setState(() {
textResult = "1";
});
Navigator.pop(context);
},
child: Text(
'Done',
style: TextStyle(
color: Colors.red,
fontWeight: FontWeight.bold),
),
),
],
),
),
],
),
);
}),
);
},
child: Text('Press'))
],
),
),
),
),
);
}
}

Answer 2

Try to change this line:
builder: (BuildContext context, setState) {
with this line
builder: (BuildContext context, StateSetter setStateModal) {
Explanation:
The outer widget in the build (Scaffold and its content) and the widget inside the showModalBottomSheet have different setState( ). You have to make sure you call the outer one when you need to update parts of that widget. The idea is to setState( ) of widgets outside your showModalBottomSheet. To be able to do that, you can give the two setState() different names so you know which one you are calling: StateSetter setStateModal