How to change image view in flutter?

Question

I trying to change view from grid to list view. I used StaggeredGridView for first view but after click change view button it should change into vertical list view .just like instagram gallery view.

Piece of code:

view changing button:

 InkWell(
      child:view
       ?Image.asset('assets/icons/view_by1.png') 
       :Image.asset('assets/icons/view_by3.png'), 
        onTap: (){
           setState(() {
             view = !view;
           });
         }
       )

widget for changing view:

Widget sliverGridWidget(BuildContext context, List<Photos> listPhotoDetail){
    return StaggeredGridView.countBuilder(
        padding: const EdgeInsets.all(8.0),
        crossAxisCount: view?2:6, //if view true make it vertical view otherwise grid view
        itemCount: listPhotoDetail.length,
        itemBuilder: (context, index){
          
          return InkWell(
            onLongPress: (){
              setState(() {
                enable = true;
              });
            },
           
              child: Container(
             
              decoration: BoxDecoration(
                color:Colors.grey[100],

                image: DecorationImage(
                  image: NetworkImage(listPhotoDetail[index].photoDetail.image.fileUrl),
                  fit: BoxFit.cover
                )
              ),
              child:enable? Stack(
                children: <Widget>[
                  Positioned(
                    bottom: 5,
                    right: 3,
                    child: InkWell(
                     child:  listPhotoDetail[index].isSelected
                      ?Image.asset('assets/icons/selected.png') 
                      
                      :Image.asset('assets/icons/select_on_image.png'),
                      onTap: (){
                         setState(() {
                            listPhotoDetail[index].isSelected = !listPhotoDetail[index].isSelected;
                              count= listPhotoDetail[index].isSelected ?count+1:count-1;
                               if(listPhotoDetail[index].isSelected){
                                  selectedPhotostList.add(
                                    Photos(
                                      photoDetail:listPhotoDetail[index].photoDetail ,
                                      //  contact:contactList[index].contact ,
                                      isSelected:listPhotoDetail[index].isSelected) 
                                    
                                    );
                                 }  else{
                                  selectedPhotostList.removeAt(index);
                                 } 
                           
                            // listPhotoDetail[index].isSelected = ! listPhotoDetail[index].isSelected;
                            // count =  listPhotoDetail[index].isSelected ?count+1:count-1;
                         });
                      }, 
                    )
                  )
                ],
              )
              :Container()
            ),
          );
        },
         staggeredTileBuilder: (index) 
         => StaggeredTile.count(2, 2), //Make size as you want.
         mainAxisSpacing: 8.0,
         crossAxisSpacing:8.0,
      );
  }
}

this does not give me satisfied view means i have total14 images and gridview looks perfect and shows all 14 images but when pressed changing view button, it shows only 3 to 4 images as listview.

see :

Here short video

Answer 1

you can take help of this to solve your problem, click on the floating action button to change the view.

import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

void main(){
  runApp(MaterialApp(home: Example01()));
}

List<Widget> _tiles = const <Widget>[
  const _Example01Tile(Colors.green, Icons.widgets),
  const _Example01Tile(Colors.lightBlue, Icons.wifi),
  const _Example01Tile(Colors.amber, Icons.panorama_wide_angle),
  const _Example01Tile(Colors.brown, Icons.map),
  const _Example01Tile(Colors.deepOrange, Icons.send),
  const _Example01Tile(Colors.indigo, Icons.airline_seat_flat),
  const _Example01Tile(Colors.red, Icons.bluetooth),
  const _Example01Tile(Colors.pink, Icons.battery_alert),
  const _Example01Tile(Colors.purple, Icons.desktop_windows),
  const _Example01Tile(Colors.blue, Icons.radio),
  const _Example01Tile(Colors.pink, Icons.radio),
  const _Example01Tile(Colors.yellow, Icons.radio),
  const _Example01Tile(Colors.brown, Icons.map),
  const _Example01Tile(Colors.deepOrange, Icons.send),
  const _Example01Tile(Colors.indigo, Icons.airline_seat_flat),
];

class Example01 extends StatefulWidget {
  @override
  _Example01State createState() => _Example01State();
}

class _Example01State extends State<Example01> {
  bool isList= false;
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text('Example 01'),
        ),
        body: new Padding(
            padding: const EdgeInsets.only(top: 12.0),
            child: new StaggeredGridView.countBuilder(
              crossAxisCount: 6,
              itemCount: _tiles.length,
              itemBuilder: (context,i){
                return _tiles[i];
              },
              staggeredTileBuilder: (i)=> isList ?StaggeredTile.count(6,1):StaggeredTile.count(2,2),
              mainAxisSpacing: 1.0,
              crossAxisSpacing: 1.0,
              padding: const EdgeInsets.all(4.0),
            )),
      floatingActionButton: FloatingActionButton(
        child: isList ?Icon(Icons.grid_on):Icon(Icons.list),
        onPressed:(){
          setState(() {
            isList = !isList;
          });
        },
      ),
    );
  }
}

class _Example01Tile extends StatelessWidget {
  const _Example01Tile(this.backgroundColor, this.iconData);

  final Color backgroundColor;
  final IconData iconData;

  @override
  Widget build(BuildContext context) {
    return new Card(
      color: backgroundColor,
      child: new InkWell(
        onTap: () {},
        child: new Center(
          child: new Padding(
            padding: const EdgeInsets.all(4.0),
            child: new Icon(
              iconData,
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
  }
}