First of all that was so hard to me 😵 But we got it 😊 Preview
[Screenshot_1649614315.png]Name: Masonrygrid
Package Link: https://pub.dev/packages/masonry_grid
DetailsCurrently no parameters needed, but you can add list of images for example
Dependency: masonry_grid: ^1.0.0
Codeimport 'package:masonry_grid/masonry_grid.dart';
class Masonrygrid extends StatefulWidget {
const Masonrygrid({
Key key,
this.width,
this.height,
}) : super(key: key);
final double width;
final double height;
@override
_MasonrygridState createState() => _MasonrygridState();
}//Images to use in mansory grid bellow
List myImages = [
"https://cdn.mos.cms.futurecdn.net/p5quSf4dZXctG9WFepXFdR.jpg",
"https://photographychef.com/wp-content/uploads/2020/02/stock-photo-88195029.jpg",
"https://i.pinimg.com/236x/a3/ac/1e/a3ac1ed5abaedffd9947face7901e14c.jpg",
"https://images.unsplash.com/photo-1611310424006-42cf1e064288?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8c2VsZiUyMHBvcnRyYWl0fGVufDB8fDB8fA%3D%3D&w=1000&q=80",
"https://cdn.pixabay.com/photo/2015/01/06/16/14/woman-590490__340.jpg",
"https://i.pinimg.com/564x/7f/ed/d8/7fedd865ab68b401303c07d61f64be97.jpg",
"https://format-com-cld-res.cloudinary.com/image/private/s--OYWIWo79--/c_limit,g_center,h_65535,w_1200/fl_keep_iptc.progressive,q_95/48342-2833547-portraits-of-strangers-8059.jpg",
"https://i.guim.co.uk/img/static/sys-images/Guardian/Pix/pictures/2015/9/21/1442843884161/b61f186c-10f6-4fea-ae94-245e0f9f676d-1528x2040.jpeg?width=700&quality=85&auto=format&fit=max&s=b39ab1611fd42b6e61ac12a414cbc9fc",
];
class _MasonrygridState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: MasonryGrid(
column: 2,
children: myImages
.map((item) => ConstrainedBox(
constraints: BoxConstraints(minWidth: double.infinity),
child: Image.network(
item,
fit: BoxFit.cover,
),
))
.toList(),
)),
],
));
}
}