Pinterest like grid in Flutter

I have a list of containers which all have the same width and different heights. I want to fill the screen with them. From top left, to top right, to below, etc.

Similar thing can be seen in Pinterest and also Google Keep. Notice that the screen might resize so I don't know the number of columns.

I have tried flutter_staggered_grid_view. The most similar thing I could find was the Masonry grid. But it changed the width of the containers.

This is an example for pinterest like grid in Flutter. Width of images doesn't change. I hope that helps.

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    double w = MediaQuery.of(context).size.width;
    double itemwidth = 250;
    double crossAxisCount = w / (itemwidth);
    return Scaffold(
        appBar: newMethod(),
        body: Center(
            child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
              Expanded(
                  child: MasonryGridView.count(
                      itemCount: 50,
                      mainAxisSpacing: 10,
                      crossAxisCount: crossAxisCount.toInt(),
                      itemBuilder: (context, index) {
                        int randomHeight = Random().nextInt(6);
                        return UnconstrainedBox(
                            child: Container(
                                width: itemwidth,
                                height: (randomHeight % 5 + 2) * 100,
                                decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(10),
                                    image: DecorationImage(
                                        fit: BoxFit.cover,
                                        image: NetworkImage(
                                            "https://picsum.photos/100/${(randomHeight % 5 + 2) * 100}")))));
                      }))
            ])));
}
}

try adding this extension in your project:

extension Responsive on BuildContext {
  T responsive<T>(
    T defaultVal, {
    T? sm,
    T? md,
    T? lg,
    T? xl,
  }) {
    final wd = MediaQuery.of(this).size.width;
    return wd >= 1280
        ? (xl ?? lg ?? md ?? sm ?? defaultVal)
        : wd >= 1024
            ? (lg ?? md ?? sm ?? defaultVal)
            : wd >= 768
                ? (md ?? sm ?? defaultVal)
                : wd >= 640
                    ? (sm ?? defaultVal)
                    : defaultVal;
  }
}

this extension will listen to changes of screen width and return a matched value, so your gridView would be something like this:

GridView.count(
            crossAxisCount: context.responsive(2, sm: 2, md: 3, lg: 4, xl: 6),
            children: items
                .map(
                  (final e) => Container(
                    padding: const EdgeInsets.all(10),
                    child: Text(e),
                  ),
                )
                .toList(),
          ),

so gridView crossAxisCount will increase as long as the screen width goes larger.

why don't you use sliverGrid ?

it will be something like this :

class MySliverGrid extends StatelessWidget {
  final double width;
  final List<Widget> widgets;
  const MySliverGrid({Key? key, required this.width, required this.widgets})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        SliverGrid(
            delegate: SliverChildListDelegate(widgets),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: MediaQuery.of(context).size.width ~/ width)),
      ],
    );
  }
}

To achieve a Pinterest-like grid layout with containers of the same width but different heights, you can use the flutter_staggered_grid_view package along with SliverGridDelegateWithFixedCrossAxisCount. This combination allows you to create a responsive staggered grid that adjusts the number of columns based on the available screen width.

class PinterestGrid extends StatelessWidget {
  PinterestGrid({super.key});

  //Create a list of container heights (you can replace this with your actual data):
  final List<double> containerHeights = [150, 250, 200, 180, 220, 190];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Pinterest Like Grid'),
      ),
      body: StaggeredGridView.countBuilder(
        crossAxisCount: MediaQuery.of(context).size.width > 600 ? 3 : 2,
        itemCount: containerHeights.length,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            color: Colors.blue,
            height: containerHeights[index],
            child: Center(
              child: Text('$index'),
            ),
          );
        },
        staggeredTileBuilder: (int index) => const StaggeredTile.fit(1),
        mainAxisSpacing: 8.0,
        crossAxisSpacing: 8.0,
      ),
    );
  }
}

Don't forget to add this two

import 'package:staggered_grid_view_flutter/widgets/staggered_grid_view.dart';
import 'package:staggered_grid_view_flutter/widgets/staggered_tile.dart';

You may try something like this: (its in just one file due simplicity, but if it works fine for ya you may use the block of code you may need)

import 'package:flutter/material.dart';

// Assuming this is your data model class with `title` and `height` properties
class Item {
  final String title;
  final double height;

  Item(this.title, this.height);
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    // Sample list of Items
    final List<Item> items = [
      Item('Item 1', 100.0),
      Item('Item 2', 200.0),
      Item('Item 3', 150.0),
      // Add more items here
    ];

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo Home Page'),
        ),
        body: GridView.builder(
          padding: EdgeInsets.all(10),
          // Calculates the number of columns based on the screen width
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: calculateColumns(MediaQuery.of(context).size.width),
            mainAxisSpacing: 10,  // Adjust as needed
            crossAxisSpacing: 10,  // Adjust as needed
          ),
          itemCount: items.length,
          itemBuilder: (BuildContext context, int index) {
            return Container(
              height: items[index].height,
              child: Card(
                child: Center(
                  child: Text('Item ${items[index].title}'),
                ),
              ),
            );
          },
        ),
      ),
    );
  }

  int calculateColumns(double screenWidth) {
    int columns = (screenWidth ~/ 150);  // Adjust the column width as needed
    return columns > 0 ? columns : 1;
  }
}

void main() {
  runApp(MyApp());
}