auto_responsive_layout 0.0.1

A Flutter package that provides responsive flex layouts

example/lib/main.dart

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Auto Responsive Layout Example',
      home: Scaffold(
        appBar: AppBar(title: const Text('Auto Responsive Layout Example')),
        body: Padding(
          padding: const EdgeInsets.all(20),
          child: AutoResponsiveLayout(
            breakpoint: 800,
            spacing: 10,
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Flexible(
                flex: 2,
                child: Container(
                  color: Colors.red,
                  child: Column(
                    children: [
                      Container(height: 50, color: Colors.green),
                      Container(height: 50, color: Colors.black54),
                    ],
                  ),
                ),
              ),

              // 🔵 Box 2
              Flexible(
                child: Container(
                  height: 150,
                  color: Colors.blue,
                  child: const Center(child: Text('Box 2')),
                ),
              ),

              // 🟡 Box 3 (fixed to be responsive)
              Flexible(
                child: Container(
                  height: 150,
                  color: Colors.yellow,
                  child: AutoResponsiveLayout(
                    breakpoint: 800,
                    spacing: 5,
                    children: [
                      Flexible(child: Container(color: Colors.black54, height: 100)),
                      Flexible(child: Container(color: Colors.green, height: 100)),
                      Flexible(child: Container(color: Colors.black54, height: 100)),
                      Flexible(child: Container(color: Colors.green, height: 100)),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}