Flutter AnimatedList and AnimatedController - flutter

Question

One of them should open and close. But when pressed, animatedcontainers all open. How can I fix?
I placed the AnimatedContainer in AnimatedList. All of them don't look nice when opened.
The list slips when they all open.
I set the height and width in two setstate. But I cannot adjust this situation.
It should be very simple but I couldn't see it.
I think it will be useful if edited.
Thank you. For read.
import 'package:flutter/material.dart';
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(
),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
double _width = 0;
double _height = 0;
int _a=0;
final GlobalKey<AnimatedListState> _key =GlobalKey();
double _state(){
setState(() {
_width=25;
_height=20;
});
}
double _state2(){
setState(() {
_width=0;
_height=0;
});
}
List<String> _controll1=[
"a",
"b",
"c",
"d",
"e",
"f",
"g",
];
#override
void initState() {
// TODO: implement initState
super.initState();
}
#override
void dispose() {
// TODO: implement dispose
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("AppBar"),
),
body: AnimatedList(
key: _key,
initialItemCount: _controll1.length,
itemBuilder: (context, index, animation){
return _buildItem(_controll1[index], animation,index);
}
),
);
}
Widget _buildItem(String item, Animation animation, int index){
return SizeTransition(
sizeFactor: animation,
child: Container(
width: 300,
child: Card(
elevation: 2,
child: Column(
children: [
Container(
child: RaisedButton(
color: Colors.black,
child: Text("${index}. button",style: TextStyle(color: Colors.white),),
onPressed: (){
for(;;) {
if (_a == 0) {
_state();
_a = 1;
return;
}
if (_a == 1) {
_state2();
_a = 0;
return;
}
}
},
),
),
AnimatedContainer(duration: Duration(milliseconds: 5),
width: _width,
height: _height,
color: Colors.black,
),
],
)
),
),
);
}
}

Answer 1

From what i understood, you need not use any animation at all.
And what you missed was just that, you were passing same size to all the widgets, so when you click one all would change.
I tried to recreate your use case and achieved it without any animation
class MyApp2 extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp2> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<String> _controll1 = [
"a",
"b",
"c",
"d",
"e",
"f",
"g",
];
List<Size> _size;
#override
void initState() {
_size = [
Size(0, 0),
Size(0, 0),
Size(0, 0),
Size(0, 0),
Size(0, 0),
Size(0, 0),
Size(0, 0),
];
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("AppBar"),
),
body: ListView.builder(
itemCount: _controll1.length,
itemBuilder: (context, index) {
return _buildItem(_controll1[index], index);
}),
);
}
Widget _buildItem(String item, int index) {
return Container(
width: 300,
child: Card(
elevation: 2,
child: Column(
children: [
Container(
child: RaisedButton(
color: Colors.black,
child: Text(
"${index}. button",
style: TextStyle(color: Colors.white),
),
onPressed: () {
if (_size[index] == Size(0, 0)) {
setState(() {
_size[index] = Size(25, 30);
});
} else if (_size[index] == Size(25, 30)) {
setState(() {
_size[index] = Size(0, 0);
});
}
},
),
),
Container(
width: _size[index].width,
height: _size[index].height,
color: Colors.black,
),
],
)),
);
}
}

Answer 2

I wanted to do this. Your code has been very useful Nitesh. Thank you. I did.
import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
double _width = 0;
double _height = 0;
int _a = 0;
var duration = Duration(seconds: 1);
final GlobalKey<AnimatedListState> _key = GlobalKey();
int _c = 0;
int _b = 0;
List<String> _controll1 = [
"a",
"b",
"c",
"d",
"e",
"f",
"g",
"a",
"b",
"c",
"d",
"e",
"f",
"g",
"a",
"b",
"c",
"d",
"e",
"f",
"g",
];
#override
void initState() {
// TODO: implement initState
_a = 0;
_b = 0;
_width = 0;
_height = 0;
_c = 1;
duration = Duration(seconds: 1);
super.initState();
}
#override
void dispose() {
// TODO: implement dispose
super.dispose();
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home:Scaffold(
appBar: AppBar(
title: Text("AppBar"),
),
body: AnimatedList(
controller: ScrollController(initialScrollOffset: 5),
scrollDirection: Axis.vertical,
key: _key,
initialItemCount: _controll1.length,
itemBuilder: (context, index, animation) {
return _buildItem(_controll1[index], animation, index);
}),
),
);
}
Widget _buildItem(String item, Animation animation, int index) {
return SizeTransition(
sizeFactor: animation,
child: Center(
child: Column(
children: [
Center(
child: RaisedButton(
color: Colors.black,
onPressed: () {
print(index);
if(_a==0){
setState(() {
duration=Duration(seconds: 2);
_b=index;
_width=80.0;
_height=30.0;
_a=1;
_c=index;
});
}else if(_a==1&&_c==index){
setState(() {
Duration(seconds: 2);
_b=index;
_width=0;
_height=0;
_a=0;
});
}else if(_a==1&&_c!=index){
setState(() {
Duration(seconds: 2);
_b=index;
_width=80;
_height=30;
_a=1;
_c=index;
});
}
},
child: Text(
"${index}. button",
style: TextStyle(color: Colors.white),
),
),
),
AnimatedContainer(
duration: duration,
width: _b!=index?0:_width,
height: _b!=index?0:_height,
curve: Curves.fastOutSlowIn,
decoration: BoxDecoration(
color: Colors.black,
),
child: RaisedButton(
child: Text("Delete"),
onPressed: (){
setState(() {
_removeItem(index);
_b=index;
duration=Duration(seconds: 0);
_width=0;
_height=0;
_a=0;
});
},
),
),
],
),
),
);
}
void _removeItem(int i) {
String removeItem = _controll1.removeAt(i);
AnimatedListRemovedItemBuilder builder = (context, animation) {
return _buildItem(removeItem, animation, i);
};
_key.currentState.removeItem(i, builder);
}
}