Flutter - Animation when switch between grid view and listview

PulkitDubey
September 20, 2024
197 views
0 votes
2 Answers

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

Answers

- JoachimB252low
- September 2, 2024 at 9:07 pm
- 0 votes
0
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.

Login or Signup to reply.

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()),
          ],
        );
      },
    );
  }
}

Flutter – Animation when switch between grid view and listview

Answers