how can I make this type of animation to toggle between listview and gridview in flutter. here is my code I am using the hero animation but its now working.
there a custom switch to toggle between both the values but its not working I mean Its switching values
#flutter #animation
In order to use hero-animations you need to actually switch page.
Another option is to use something like local-hero, which may let you easily tag widgets and have them move across the screen on the same page.
I have try like some same as above refer below code hope its help to you.
class ListFilter extends StatefulWidget {
const ListFilter({super.key});
@override
State<ListFilter> createState() => _ListFilterState();
}
class _ListFilterState extends State<ListFilter> {
// Declare bool variables
bool _isGridView = false;
// declare map for items and title
final List<Map<String, dynamic>> itemsMap = [
{
'title': 'Title 1',
'items': [
{
'name': 'Item 1',
'image': 'https://cdn-icons-png.flaticon.com/128/2830/2830289.png',
'description': 'Bank Details',
},
{
'name': 'Item 2',
'image': 'https://cdn-icons-png.flaticon.com/128/1239/1239634.png',
'description': 'Credit Card Information',
},
{
'name': 'Item 3',
'image': 'https://cdn-icons-png.flaticon.com/128/3050/3050465.png',
'description': 'Savings Account',
},
{
'name': 'Item 4',
'image': 'https://cdn-icons-png.flaticon.com/128/1582/1582548.png',
'description': 'Cryptocurrency Wallet',
}
],
},
{
'title': 'Title 2',
'items': [
{
'name': 'Item 6',
'image': 'https://cdn-icons-png.flaticon.com/128/2300/2300784.png',
'description': 'Loan Details',
},
{
'name': 'Item 7',
'image': 'https://cdn-icons-png.flaticon.com/128/2921/2921814.png',
'description': 'Investment Portfolio',
},
{
'name': 'Item 8',
'image': 'https://cdn-icons-png.flaticon.com/128/3208/3208983.png',
'description': 'Mortgage Calculator',
},
{
'name': 'Item 9',
'image': 'https://cdn-icons-png.flaticon.com/128/2912/2912118.png',
'description': 'Expense Tracker',
},
{
'name': 'Item 10',
'image': 'https://cdn-icons-png.flaticon.com/128/2991/2991575.png',
'description': 'Budget Planner',
},
],
},
{
'title': 'Title 3',
'items': [
{
'name': 'Item 11',
'image': 'https://cdn-icons-png.flaticon.com/128/3045/3045705.png',
'description': 'Insurance Policy',
},
{
'name': 'Item 12',
'image': 'https://cdn-icons-png.flaticon.com/128/1610/1610907.png',
'description': 'Tax Returns',
}
],
},
{
'title': 'Title 4',
'items': [
{
'name': 'Item 13',
'image': 'https://cdn-icons-png.flaticon.com/128/2476/2476340.png',
'description': 'Retirement Savings',
},
{
'name': 'Item 14',
'image': 'https://cdn-icons-png.flaticon.com/128/3011/3011184.png',
'description': 'Financial Advisor',
},
{
'name': 'Item 15',
'image': 'https://cdn-icons-png.flaticon.com/128/2722/2722267.png',
'description': 'Stock Market Analysis',
},
],
},
];
// UI
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Toggle View'),
actions: [
// button for change list view
IconButton(
icon: Icon(_isGridView ? Icons.grid_view : Icons.list),
onPressed: () {
setState(() {
_isGridView = !_isGridView;
});
},
),
],
),
body: ListView.builder(
itemCount: itemsMap.length,
shrinkWrap: true,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
itemsMap[index]['title'],
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
// Listview UI after selecation
_isGridView ? buildGridView(index) : buildListView(index),
],
),
);
},
),
);
}
// ListView UI
buildListView(int index) {
return ListView.builder(
itemCount: itemsMap[index]['items'].length,
shrinkWrap: true,
padding: EdgeInsets.zero,
physics: NeverScrollableScrollPhysics(),
itemBuilder: (context, itemIndex) {
return Padding(
padding: EdgeInsets.all(16.0),
child: ListTile(
contentPadding: EdgeInsets.zero,
leading: Container(
height: 50,
width: 50,
child: Image.network(
itemsMap[index]['items'][itemIndex]['image'].toString()),
),
title: Text(itemsMap[index]['items'][itemIndex]['name'].toString()),
subtitle: Text(
itemsMap[index]['items'][itemIndex]['description'].toString()),
),
);
},
);
}
// GridView UI
buildGridView(int index) {
return GridView.builder(
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
itemCount: itemsMap[index]['items'].length,
shrinkWrap: true,
padding: EdgeInsets.zero,
itemBuilder: (context, itemIndex) {
return Column(
children: [
Container(
height: 50,
width: 50,
child: Image.network(
itemsMap[index]['items'][itemIndex]['image'].toString()),
),
SizedBox(
height: 5,
),
Text(itemsMap[index]['items'][itemIndex]['name'].toString()),
],
);
},
);
}
}
Result Screen ->
List Image - 
Grid Image - 