Product Grid

A responsive product collection grid that switches from a single-column layout on small screens to a multi-column row layout on medium screens and above.

• Overview
• Code Walkthrough
• Key Patterns
• Related Documentation

import 'package:flutter/material.dart';
import 'package:fluttersdk_wind/fluttersdk_wind.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: wColor('gray', shade: 200),
      body: WFlexContainer(
        className: 'flex-col md:flex-row gap-4 p-4',
        children: [
          collectionCard(
            imageUrl: 'https://picsum.photos/400/300',
            title: 'Desk and Office',
            description: 'Work from home accessories',
          ),
          collectionCard(
            imageUrl: 'https://picsum.photos/400/300',
            title: 'Self-Improvement',
            description: 'Journals and note-taking',
          ),
          collectionCard(
            imageUrl: 'https://picsum.photos/400/300',
            title: 'Travel',
            description: 'Daily commute essentials',
          ),
        ],
      ),
    );
  }

  Widget collectionCard({
    required String imageUrl,
    required String title,
    required String description,
  }) {
    return WFlexContainer(
      className: 'flex-1 flex-col gap-2',
      children: [
        WContainer(
          className: 'rounded-lg bg-white',
          child: Image.network(imageUrl, fit: BoxFit.cover),
        ),
        WText(title, className: 'text-base font-bold text-gray-900'),
        WText(description, className: 'text-sm text-gray-500'),
      ],
    );
  }
}

Overview

This example builds a product collection grid using only Wind utility classes. The layout stacks cards vertically by default (flex-col) and switches to a horizontal row (md:flex-row) once the screen reaches the md breakpoint (768 px). No manual MediaQuery calls are needed.

Code Walkthrough

Outer container

WFlexContainer(
  className: 'flex-col md:flex-row gap-4 p-4',
  ...
)

• flex-col — stacks children vertically on small screens.
• md:flex-row — switches to horizontal layout at 768 px and wider.
• gap-4 — uniform spacing between the three collection cards.
• p-4 — page padding on all sides.

Collection card

WFlexContainer(
  className: 'flex-1 flex-col gap-2',
  ...
)

• flex-1 — each card grows to fill an equal share of the available row space.
• flex-col — stacks the image, title, and description vertically.
• gap-2 — tight spacing between card elements.

Image container

WContainer(
  className: 'rounded-lg bg-white',
  child: Image.network(imageUrl, fit: BoxFit.cover),
)

• rounded-lg — applies the theme's large corner radius.
• bg-white — white background for the image card.

Key Patterns

Related Documentation

• Flex Direction — flex-col and flex-row
• Flex X — flex-1 and proportional sizing
• Gap — spacing between flex children
• Responsive Design — breakpoint prefixes like md:
• WFlexContainer — the flex layout widget
• WContainer — the container widget used for the image card