confused about setState inside onTap Flutter - flutter

Question

I've been trying to learn Flutter and this part got me really confused. Thanks a million for your help.
I wanted to return data (an object) to the first screen from the second screen. I did successfully thanks to posts I read from the internet but haven't managed to fully understand. Specifically: Why do I need to assign categoryData to the returned object then again assign it to categoryCard? Why can't I do it directly by assigning categoryCard to the returned Object? This is code that works:
First screen:
SizedBox(
height: 95,
child: GestureDetector(
onTap: () async {
final categoryData =
await Navigator.pushNamed(context, '/EditCategory');
setState(() => categoryCard = categoryData);
},
child: categoryCard),
),
Second screen:
return Card(
child: ListTile(
title: Text('${myText[index]}'),
leading: myIcon[index],
trailing: Icon(Icons.arrow_forward_ios),
onTap: () {
Navigator.pop(
context,
CategoryCard(
categoryIcon: myIcon[index],
categoryText: Text(
'${myText[index]}',
style: TextStyle(fontSize: 20),
)));
},
),
);
Code I think should work but doesn't
First screen:
SizedBox(
height: 95,
child: GestureDetector(
onTap: () {
setState(() async {
CategoryCard categoryCard =
await Navigator.pushNamed(context, '/EditCategory');
});
},
child: categoryCard),
),
Second screen is the same
This is the entire code of the first and second screen in case you'd like to know:
First:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'MyApp.dart';
class Input extends StatefulWidget {
#override
_InputState createState() => _InputState();
}
class _InputState extends State<Input> {
CategoryCard categoryCard = CategoryCard();
final _formKey = GlobalKey<FormState>();
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color.fromRGBO(210, 234, 251, 1),
appBar: appBarInEx(),
body: TabBarView(
children: [
ListView(
children: [
Form(
key: _formKey,
child: Column(
children: [
TextFormField(
validator: (value) {
if (value.isEmpty) {
return 'Please enter the value';
}
return null;
},
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
child: ElevatedButton(
onPressed: () {
if (_formKey.currentState.validate()) {
Scaffold.of(context).showSnackBar(
SnackBar(content: Text('Processing Data')));
}
},
child: Text('Submit'),
),
),
],
),
),
SizedBox(
height: 150,
child: Card(
color: Color.fromRGBO(254, 228, 194, 1),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
SizedBox(
height: 20,
),
Text(
'Amount',
style: TextStyle(fontSize: 30),
),
SizedBox(
height: 15,
),
Text(r'0$',
style: TextStyle(
fontSize: 30,
)),
Text('_____________________________________',
style: TextStyle(
fontSize: 15,
))
],
),
),
),
),
SizedBox(
height: 95,
child: GestureDetector(
onTap: () async {
final categoryData =
await Navigator.pushNamed(context, '/EditCategory');
setState(() => categoryCard = categoryData);
},
child: categoryCard),
),
SizedBox(
height: 95,
child: Card(
color: Color.fromRGBO(254, 228, 194, 1),
child: ListTile(
contentPadding:
EdgeInsets.symmetric(vertical: 18, horizontal: 16),
title: Text(
'Note',
style: TextStyle(fontSize: 20),
),
leading: Icon(Icons.description_outlined, size: 40),
trailing: Icon(
Icons.arrow_forward_ios_outlined,
size: 30,
),
),
),
),
SizedBox(
height: 95,
child: Card(
color: Color.fromRGBO(254, 228, 194, 1),
child: ListTile(
contentPadding:
EdgeInsets.symmetric(vertical: 18, horizontal: 16),
title: Text(
'Date',
style: TextStyle(fontSize: 20),
),
leading: Icon(Icons.event, size: 40),
trailing: Icon(
Icons.arrow_forward_ios_outlined,
size: 30,
),
),
),
),
Container(
margin: EdgeInsets.fromLTRB(30, 70, 30, 0),
child: Padding(
padding: const EdgeInsets.all(18.0),
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(color: Colors.red)),
elevation: 10,
color: Colors.lime,
onPressed: () {
Navigator.pushNamed(context, '/');
},
textColor: Colors.white,
child: Text(
'Save',
style: TextStyle(fontSize: 40),
),
),
),
)
],
),
Container()
],
),
);
}
}
class CategoryCard extends StatelessWidget {
final Text categoryText;
final Icon categoryIcon;
CategoryCard(
{Key key,
this.categoryText = const Text(
'Category',
style: TextStyle(fontSize: 20),
),
this.categoryIcon = const Icon(
Icons.category_outlined,
size: 40,
)})
: super(key: key);
#override
Widget build(BuildContext context) {
return Card(
color: Color.fromRGBO(254, 228, 194, 1),
child: ListTile(
contentPadding: EdgeInsets.symmetric(vertical: 18, horizontal: 16),
title: categoryText,
leading: categoryIcon,
trailing: Icon(
Icons.arrow_forward_ios_outlined,
size: 30,
),
),
);
}
}
Second:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:material_floating_search_bar/material_floating_search_bar.dart';
import 'Input.dart';
import 'MyApp.dart';
class EditCategory extends StatefulWidget {
#override
_EditCategoryState createState() => _EditCategoryState();
}
class _EditCategoryState extends State<EditCategory> {
List<String> myText = [
'Add Category',
'Cosmetic',
'Education',
'Clothes',
'Food',
'Cosmetic',
'Education',
'Clothes',
'Food'
];
List<Widget> myIcon = [
Icon(Icons.add_circle_outline),
Icon(Icons.no_food_outlined),
Icon(Icons.face),
Icon(Icons.book_outlined),
Icon(Icons.g_translate),
Icon(Icons.no_food_outlined),
Icon(Icons.face),
Icon(Icons.book_outlined),
Icon(Icons.g_translate),
];
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
backgroundColor: Color.fromRGBO(210, 234, 251, 1),
appBar: appBarInEx(),
body: TabBarView(
children: [
Column(
children: [
FloatingSearchAppBar(
title: const Text('Enter Category Name'),
transitionDuration: const Duration(milliseconds: 800),
color: Colors.orangeAccent.shade100,
colorOnScroll: Colors.greenAccent.shade200,
height: 55,
),
Expanded(
child: ListView.builder(
itemCount: myText.length,
itemBuilder: (context, index) {
if (index == 0) {
return SizedBox(
height: 90,
child: Card(
child: ListTile(
title: Text('${myText[index]}'),
leading: myIcon[index],
trailing: Icon(Icons.arrow_forward_ios),
),
));
}
return Card(
child: ListTile(
title: Text('${myText[index]}'),
leading: myIcon[index],
trailing: Icon(Icons.arrow_forward_ios),
onTap: () {
Navigator.pop(
context,
CategoryCard(
categoryIcon: myIcon[index],
categoryText: Text(
'${myText[index]}',
style: TextStyle(fontSize: 20),
)));
},
),
);
},
)),
],
),
Container()
],
),
),
);
}
}

Answer 1

The good code waits for the onTap and assign the result into a local variable. Then it uses setState to assign the local variable into the instance field.
Why do I need to assign categoryData to the returned object then again assign it to categoryCard? Why can't I do it directly by assigning categoryCard to the returned Object?
You can do that actually, this will work:
GestureDetector(
onTap: () async {
categoryData = await Navigator.push(...);
setState(() {});
},
),
Basically setState tells Flutter to rebuild your widget, it's not strictly required to perform state setting within the callback.
Regarding bad code: you use setState with an async callback so Flutter will just rebuild your widget immediately at that moment, it doesn't wait for your async operation to complete. At the time of rebuild, categoryData has the old value so nothing changes on the screen. When user triggers onTap on the second screen and pops back to the first, categoryData is updated with the new value but your widget is not rebuilt so it still shows outdated data.