flex_grid_layout 1.0.1

Responsive grid that automatically adjusts its items based on available width.

example/example.dart

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

/// Entry point of the example application.
void main() {
  runApp(const MyApp());
}

/// A simple example that demonstrates how to use the [FlexGridLayout] widget.
///
/// This example shows a grid layout with 10 colored boxes, where the number
/// of items per row adapts based on the available width, with spacing between
/// items and rows.
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FlexGridLayout Example',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('FlexGridLayout Demo'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          // FlexGridLayout dynamically arranges the children into rows
          child: FlexGridLayout(
            minItemWidth: 120, // Minimum width per item
            maxItemsPerRow: 4, // Maximum number of items per row
            spacing: 12, // Horizontal spacing between items
            runSpacing: 12, // Vertical spacing between rows
            children: List.generate(
              10,
              (index) => Container(
                height: 100,
                decoration: BoxDecoration(
                  color: Colors.blueAccent,
                  borderRadius: BorderRadius.circular(12),
                ),
                alignment: Alignment.center,
                child: Text(
                  'Item ${index + 1}',
                  style: const TextStyle(color: Colors.white, fontSize: 16),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}