How to change image view in flutter? - 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,
),
),
),
),
);
}
}