Flutter : how to change text data by bottomSheet? - flutter

Question

I want to change my text, after selecting by bottomsheet text is not changing when i am refreshing then my text is changing.
how to fix this issue.
This is my code.
import 'package:flutter/material.dart';
import '../../../Utils/GlobalColor/global_color.dart';
import '../../../Utils/GlobalTextStyles/global_text_styles.dart';
class NonVegPizzaPage extends StatefulWidget {
const NonVegPizzaPage({Key? key}) : super(key: key);
#override
State<NonVegPizzaPage> createState() => _NonVegPizzaPageState();
}
class _NonVegPizzaPageState extends State<NonVegPizzaPage> {
String itemSize = "Regular";
List itemSizes = [];
#override
void initState() {
super.initState();
itemSizes = [
{
"sizes": "Regular",
},
{
"sizes": "Medium",
},
{
"sizes": "Large",
},
];
}
sizeBottomSheet() {
showModalBottomSheet(
barrierColor: Colors.transparent,
context: context,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(15.0),
topRight: Radius.circular(15.0),
),
),
builder: (context) {
return StatefulBuilder(
builder: (BuildContext context, StateSetter setState1) {
return Container(
decoration: BoxDecoration(
color: MyColor.whiteColor,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(15.0),
topRight: Radius.circular(15.0),
),
boxShadow: [
BoxShadow(
color: MyColor.greyColor.withOpacity(0.8),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 0), // changes position of shadow
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding:
const EdgeInsets.only(left: 43.0, top: 10, bottom: 11),
child: Text(
"Select Size",
style: textStyleWith14500(MyColor.blackColor2),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
ListView.builder(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: itemSizes.length,
itemBuilder: (_, index) {
return Padding(
padding: EdgeInsets.only(
top: 0,
),
child: InkWell(
onTap: () {
Navigator.pop(context);
setState1(() {
itemSize = itemSizes[index]["sizes"];
});
print(itemSize);
},
child: Container(
margin: EdgeInsets.only(left: 2, right: 2),
height: 36,
width: double.infinity,
color: itemSize == itemSizes[index]["sizes"]
? MyColor.lightBlueColor
: MyColor.whiteColor,
child: Padding(
padding:
const EdgeInsets.only(left: 43.0, top: 10),
child: Text(
"${itemSizes[index]["sizes"]}",
style:
textStyleWith12400(MyColor.blackColor3),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
),
),
);
}),
],
),
);
});
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Center(
child: Column(crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("$itemSize"), // here
SizedBox(height: 20,),
InkWell(
onTap: () {
sizeBottomSheet();
},
child: Container(
color: Colors.red,
height: 44,
width: 150,
child: Center(child: Text("show bottomSheet")),
),
)
],
),
),
),
);
}
}

Answer 1

showModalBottomSheet is a future method, you can await to close it and then call setState to update the main ui.
sizeBottomSheet() async {
final result = await showModalBottomSheet(
....
onTap: () {
Navigator.pop(context, itemSizes[index]["sizes"]);
.......
//end of showModalBottomSheet
if (result != null) {
itemSize = result;
setState(() {});
}
Or you can do
child: InkWell(
onTap: () {
setState1(() {
itemSize = itemSizes[index]["sizes"];
});
setState(() {});//updating the parent
Navigator.pop(context);
},