Setstate cannot update the value - flutter

Question

I am a new starter for flutter, Currently I have a problem that Setstate cannot update the value.
If the user after select the date using date picker, it should be update the "_value" and display under "new Text('Current Date')".
It is successful to Setstate if I separate in Widget build, but it cannot update in List.
Where I got wrong?
import 'dart:convert';
import 'package:flutter/material.dart';
class AddFieldDynamicTest extends StatefulWidget {
#override
_AddFieldDynamicTest createState() => _AddFieldDynamicTest();
}
class _AddFieldDynamicTest extends State<AddFieldDynamicTest> {
Map<String, String> _formdata = {};
var _myPets = List<Widget>();
int _index = 1;
String _value = '';
Future _selectDate() async {
DateTime picked = await showDatePicker(
context: context,
initialDate: new DateTime.now(),
firstDate: new DateTime(2000),
lastDate: new DateTime(2100)
);
if(picked != null) setState(() => _value = picked.toString());
}
void _add() {
int keyValue = _index;
_myPets = List.from(_myPets)
..add(
Column(
key: Key("${keyValue}"),
children: <Widget>[
ListTile(
leading: Text('Pet $_index : '),
title: TextField(
onChanged: (val) => _formdata['pet${keyValue - 1}'] = val,
),
),
ListTile(
leading: Text('Name of Pet $_index : '),
title: TextField(
onChanged: (val) {
_formdata['name${keyValue - 1}'] = val;
},
),
),
new Column(
children: <Widget>[
new Text('Current Date'),
new Text(_value),
new RaisedButton(onPressed: _selectDate, child: new Text('Date picker'),)
],
)
],
));
setState(() => ++_index);
}
#override
void initState() {
// TODO: implement initState
super.initState();
_add();
}
#override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: () => print(json.encode(_formdata)),
child: Text('Save'),
),
appBar: AppBar(
title: Text('Add Test 2'),
actions: <Widget>[
FlatButton(
child: Text('Add another'),
onPressed: _add,
),
],
),
body: ListView(
children: _myPets,
),
);
}
}

Answer 1

In your demo, you use a variable _myPets to store the ListView's children, and at initialization time you add a child into _myPets.
When the "Date Picker" of the child is clicked, the _value is updated and setState is performed, but the data in _myPets remains unchanged, so even if the build is redone, the UI will still remain unchanged.
At this point, if you click "Add Another", a new child will be inserted into _myPets, and since _value has a value, when the build is finished, you will see that the date selected by the last child will be displayed on the new child.
I think you should know more about how setState is used.
The best way to implement this scenario is to have your own setState for each child, as shown below (simplifying your code) :
class AddFieldDynamicTest extends StatefulWidget {
#override
_AddFieldDynamicTest createState() => _AddFieldDynamicTest();
}
class _AddFieldDynamicTest extends State<AddFieldDynamicTest> {
Map<String, String> _formdata = {};
var _myPets = List<Widget>();
int _index = 1;
void _add() {
_myPets = List.from(_myPets)
..add(AddFieldDynamicItem(_index));
setState(() {
_index += 1;
});
}
#override
void initState() {
// TODO: implement initState
super.initState();
_add();
}
#override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: () => print(json.encode(_formdata)),
child: Text('Save'),
),
appBar: AppBar(
title: Text('Add Test 2'),
actions: <Widget>[
FlatButton(
child: Text('Add another'),
onPressed: _add,
),
],
),
body: ListView(
children: _myPets,
),
);
}
}
class AddFieldDynamicItem extends StatefulWidget {
AddFieldDynamicItem(this._index);
final int _index;
#override
_AddFieldDynamicItem createState() => _AddFieldDynamicItem(_index);
}
class _AddFieldDynamicItem extends State<AddFieldDynamicItem> {
_AddFieldDynamicItem(this._index);
String _value = '';
final int _index;
Future _selectDate() async {
DateTime picked = await showDatePicker(
context: context,
initialDate: new DateTime.now(),
firstDate: new DateTime(2000),
lastDate: new DateTime(2100)
);
if(picked != null)
setState(() {
_value = picked.toString();
});
}
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
new Column(
children: <Widget>[
new Text('$_index . Current Date'),
new Text(_value),
new RaisedButton(onPressed: _selectDate, child: new Text('Date picker'),)
],
)
],
);
}
}

Answer 2

When setState is called the framework is notified that the internal state of the object has changed and therefore it might be necessary to rebuild the widget tree. Hence the framework schedules a build for the state.
The build function is called to rebuild the widget tree. However your Text widget [Text(_value)] that you wish to redraw is within a function private function _add(). This function is not called during the build.
However as you have correctly found out that when you place the Text widget Text(_value) within the return of build function it is redrawn everytime setState is called.

Answer 3

I find a hint from this post:
Flutter - Dynamically adding widget that needs to change state as well
They should have their own state
import 'dart:convert';
import 'package:flutter/material.dart';
class AddFieldDynamicTest extends StatefulWidget {
#override
_AddFieldDynamicTest createState() => _AddFieldDynamicTest();
}
class _AddFieldDynamicTest extends State<AddFieldDynamicTest> {
List<Widget> playButtonList;
void initState() {
playButtonList = <Widget>[];
super.initState();
}
var eue='';
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Speech Aid'),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
FlatButton(
child: Text('Add Play Button'),
color: Colors.black26,
onPressed: () {
setState(() {
playButtonList.add(PlayButton());
});
},
),
Expanded(
child: ListView.builder(
itemCount: playButtonList.length,
itemBuilder: (context, index) => playButtonList[index],
),
)
],
),
);
}
}
class PlayButton extends StatefulWidget {
#override
_PlayButtonState createState() => _PlayButtonState();
}
class _PlayButtonState extends State<PlayButton> {
int _index = 0;
#override
void initState() {
super.initState();
}
Map<String, dynamic> _formdata={};
var _value='';
#override
Widget build(BuildContext context) {
int keyValue = _index;
return Column(
key: Key("${keyValue}"),
children: <Widget>[
ListTile(
leading: Text('Pet $_index : '),
title: TextField(
onChanged: (val) => _formdata['pet${keyValue - 1}'] = val,
),
),
ListTile(
leading: Text('Name of Pet $_index : '),
title: TextField(
onChanged: (val) {
_formdata['name${keyValue - 1}'] = val;
},
),
),
new Column(
children: <Widget>[
new Text('Current Date'),
new Text(_value),
new RaisedButton(onPressed: _selectDate, child: new Text('Date picker'),)
],
)
],
);
}
Future _selectDate() async {
DateTime picked = await showDatePicker(
context: context,
initialDate: new DateTime.now(),
firstDate: new DateTime(2000),
lastDate: new DateTime(2100)
);
if(picked != null) setState(() => _value = picked.toString());
}
}