How to Create a Custom Grid View for Your FlutterFlow App

Drag a GridView from the Widget Palette onto your page. In the Properties Panel, set crossAxisCount to 2 (two items per row on mobile). Set mainAxisSpacing to 12 (vertical gap between rows) and crossAxisSpacing to 12 (horizontal gap between columns). Set childAspectRatio to 0.75 for portrait-oriented cards or 1.0 for square cards. The aspect ratio controls the height of each cell relative to its width.

Select the crossAxisCount property in the Properties Panel and click the responsive icon (screen sizes icon). Set mobile to 2, tablet to 3, and desktop to 4. This uses FlutterFlow's Responsive Values feature so the grid automatically shows more columns on larger screens. Also adjust childAspectRatio responsively if your items have different ideal proportions on different screens.

Create a new Component called GridItemCard. Build its layout: a Container with borderRadius 12, clipBehavior (clip children to rounded corners). Inside, a Column: top child is an Image widget (fit: cover, takes 60% of height), bottom child is a Padding with Column containing title Text (Body Medium Bold) and price Text (Body Small, Primary color). Add Component Parameters: imageUrl (String), title (String), price (String), onTap (Action). Bind each widget to its parameter.

Select the GridView and add a Backend Query: choose your collection (e.g., products) and set the order (e.g., by createdAt descending). Enable Generate Dynamic Children. Drag your GridItemCard Component as the child template. Map imageUrl to the document's imageUrl field, title to name, price to a formatted price string. Add an On Tap callback that navigates to the product detail page with the document ID as a Route Parameter.

For a Pinterest-style layout where items have different heights, create a Custom Widget. Add the flutter_staggered_grid_view package to Pubspec Dependencies. Create a StatelessWidget that uses MasonryGridView.count with crossAxisCount from a parameter. Each child is a Container with variable height based on content. Pass the items as a JSON List Component Parameter and parse them in the widget to build the children.

1import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
2
3class StaggeredGridWidget extends StatelessWidget {
4  const StaggeredGridWidget({
5    super.key,
6    this.width,
7    this.height,
8    required this.itemCount,
9  });
10
11  final double? width;
12  final double? height;
13  final int itemCount;
14
15  @override
16  Widget build(BuildContext context) {
17    return SizedBox(
18      width: width ?? double.infinity,
19      height: height ?? 600,
20      child: MasonryGridView.count(
21        crossAxisCount: 2,
22        mainAxisSpacing: 12,
23        crossAxisSpacing: 12,
24        itemCount: itemCount,
25        itemBuilder: (context, index) {
26          return Container(
27            height: (index % 3 == 0) ? 200 : 150,
28            decoration: BoxDecoration(
29              color: Colors.grey[200],
30              borderRadius: BorderRadius.circular(12),
31            ),
32          );
33        },
34      ),
35    );
36  }
37}