In the above image i have one horizontal list view. by selecting any one of the numbers from the listview i want to update the items of AnimatedList view according to the number is selected from the horizontal listview.
when i am taping any one of the number
onTap: () {
setState(() {
selectedIndex = index;
print(selectedIndex);
});
},
Code for my AnimatedList
Expanded(
child: AnimatedList(
key: key,
initialItemCount: selectedIndex + 1,
itemBuilder: (context, index, animation) =>
buildItem(items[index], index, animation),
),
),
Widget buildItem(item, int index, Animation<double> animation) =>
ExerciseItemWidget(
item: item, animation: animation, onClicked: () => removeItem(index));
In my ExerciseItemWidget
class ExerciseItemWidget extends StatelessWidget {
final ExerciseItem item;
final Animation animation;
final VoidCallback onClicked;
const ExerciseItemWidget({
@required this.item,
@required this.animation,
@required this.onClicked,
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) => ScaleTransition(
scale: animation,
child:
Container(
margin: EdgeInsets.only(left: 30, right: 10, top: 10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
color: Colors.transparent,
),
child: Row(
children: [
Container(
width: 40,
child:
IconButton(
padding: EdgeInsets.only(right: 10),
icon: Icon(Icons.check_box_outlined, color: Colors.yellow, size: 32),
onPressed: onClicked,
),),
Expanded(
child: Container(
margin:
EdgeInsets.only(right: 10),
height: 40,
child: Align(
alignment: Alignment.center,
child: Text(
'',
style: TextStyle(
fontWeight: FontWeight.w300,
color: Colors.black,
fontFamily: "Kanit"),
textAlign: TextAlign.center,
)),
decoration: BoxDecoration(
color: Colors.black,
),
)),
Expanded(
child: Container(
margin:
EdgeInsets.only(right: 10),
height: 40,
child: Align(
alignment: Alignment.center,
child: Text(
"",
style: TextStyle(
fontWeight: FontWeight.w300,
color: Colors.black,
fontFamily: "Kanit"),
textAlign: TextAlign.center,
)),
decoration: BoxDecoration(
color: Colors.black,
),
)),
Expanded(
child: Container(
margin:
EdgeInsets.only(right: 10),
height: 40,
child: Align(
alignment: Alignment.center,
child: Text(
"",
style: TextStyle(
fontWeight: FontWeight.w300,
color: Colors.black,
fontFamily: "Kanit"),
textAlign: TextAlign.center,
)),
decoration: BoxDecoration(
color: Colors.black,
),
)),
Container(
width: 40,
child:
IconButton(
padding: EdgeInsets.only(right: 10),
icon: Icon(Icons.delete_rounded, color: Colors.yellow, size: 32),
onPressed: onClicked,
),),
],
),
),
);
}
initialItemCount
property must to setitems.lenght
you have to resizeitems
list. I dont recommend clear the list:items = []
instead use this method:on number selected:
sorry, my english is basic :P