Jorge SinCodigo
Jorge SinCodigo
Ambassador
 · Top 0.1% Flutterflow Developer

Mansory Grid Widget

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