gridyview_flutter 0.0.1

A responsive grid system for Flutter. Supports breakpoints, columns, nested grids, spacing, alignment, and more.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:responsivegrid/grid.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Responsive Grid Demo',
      home: Scaffold(
        appBar: AppBar(title: const Text("Responsive Grid By Vikas")),
        body: GridRow(
          padding: const EdgeInsets.all(16),
          rowGap: 16,
          colGap: 16,
          justify: MainAxisAlignment.start,
          children: [
            GridCol(
              xs: 12,
              sm: 6,
              md: 4,
              lg: 3,
              xl: 2,
              xxl: 1,
              child: Container(
                height: 120,
                color: Colors.amber,
                child: const Center(child: Text("Responsive Box 1")),
              ),
            ),
            GridCol(
              xs: 12,
              sm: 6,
              md: 8,
              lg: 9,
              xl: 10,
              xxl: 11,
              child: Container(
                height: 120,
                color: Colors.teal,
                child: const Center(child: Text("Responsive Box 2")),
              ),
            ),
          ],
        ),
      ),
    );
  }
}