Question 223229 in Flutter Question posted in
The official Flutter documentation can be found here.

How can i create an Image Grid using Flutter

i am trying to achieve this using flutter, there can be a lot of images but i cant find the right component to get it done… please who has an idea which component achieves this or how it can be done, specifically in Dart, flutter..

and if there is any Dart package that can achieve this, please, and thanks in advance..

find the reference image below.. enter image description here

Tags:

2

Answers


  1. 0

    There are already some gallery builder plugins, that you can probably check on pub.dev, like the flutter_staggered_grid_view or the staggered_grid_view_flutter

    Anyway, if you want to try to create a different gallery or a custom grid design, probably you should create your own widget.

    For your example, my approach would not be a grid but a List View.
    Each row would have your custom layout, loading multiple images, (up to 4 photos according to your example), or more depending on other layout designs you might implement.

    you can also create this effect using 2 Columns with 2 rows inside or
    with rows and containers or SizedBox.

    Login or Signup to reply.
  2. 0

    You can use flutter_staggered_grid_view, you need to play with mainAxisCellCount. While 4 items are in a group, it will be

    mainAxisCellCount: switch (i % 4) {
  0 || 3 => .25,
  _ => .75,
},

    You can play with this widget.

    class Stg4 extends StatelessWidget {
  const Stg4({super.key});

  @override
  Widget build(BuildContext context) {
    final items = List.generate(10, (index) => "path $index");
    List<Widget> children = [
      for (int i = 0; i < items.length; i++)
        StaggeredGridTile.count(
          crossAxisCellCount: 1,
          mainAxisCellCount: switch (i % 4) {
            0 || 3 => .25,
            _ => .75,
          },
          child: ColoredBox(color: Colors.cyanAccent, child: Text(items[i])),
        ),
    ];
    return Scaffold(
      body: StaggeredGrid.count(
        crossAxisCount: 2,
        mainAxisSpacing: 4,
        crossAxisSpacing: 4,
        children: children,
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search