How to change state of programmatically created animatedPositioned widget? - flutter

Question

AnimatedPositioned widget animates when a parameter is changed (left for example). This works well unless I create it programatically. How do I change the parameters after creating it?
If you press a button it adds an AnimatedPositioned to the screen. The 'change' button just changed the variable myLeft which should change the position but it doesn't.
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Home(),
),
);
}
}
class Home extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
double myLeft = 20;
List<Widget> listOfBoxes = [];
_createRect(){
setState(() {
final AnimatedPositioned positioned = AnimatedPositioned(
left: myLeft,
top: 25,
height: 50,
width: 100,
duration: const Duration(milliseconds: 600),
child: Container(color: Colors.black,),
);
listOfBoxes.add(positioned
,);
});
}
_change(){
setState(() {
myLeft =200;
print("listOfBoxes==$listOfBoxes");
});
}
void initState() {
super.initState();
SystemChrome.setEnabledSystemUIOverlays([]);
}
#override
Widget build(BuildContext context) {
var size = MediaQuery.of(context).size;
return Column(
children: [Row(
children: [
RaisedButton(
child: Text('create rect'),
onPressed: _createRect,
),
RaisedButton(
child: Text('change'),
onPressed: _change,
),
],
),
Container(
color: Colors.blue,
height: size.height * .7,
width: double.infinity,
child: Stack(
children: listOfBoxes,
),
),
]
);
}
}

Answer 1

Here's the code doing what I asked based on pskink's comments.
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'dart:async';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Home(),
),
);
}
}
class Home extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
var lefts = [10.0, 20.0];
_change() {
setState(() {
lefts[0] = 200;
});
}
#override
Widget build(BuildContext context) {
var size = MediaQuery.of(context).size;
return Column(children: [
Row(
children: [
RaisedButton(
child: Text('change'),
onPressed: _change,
),
],
),
Container(
color: Colors.blue,
height: size.height * .7,
width: double.infinity,
child: Column(
children: [
Expanded(
child: Stack(children: [
for (var i = 0; i < lefts.length; i++)
AnimatedPositioned(
duration: Duration(milliseconds: 200),
left: lefts[i],
top: i * 100.0,
width: 100,
height: 75,
child: Container(color: Colors.red),
)
]),
),
Row(
children: [
RaisedButton(
child: Text('<<'),
onPressed: () => setState(
() => lefts = lefts.map((e) => e - 50).toList())),
RaisedButton(
child: Text('>>'),
onPressed: () => setState(
() => lefts = lefts.map((e) => e + 50).toList())),
],
),
],
),
),
]);
}
}