smart_layout 0.1.0

Intelligent list-to-grid layouts for responsive collection UIs in Flutter.

example/lib/main.dart

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

void main() {
  runApp(const SmartLayoutExampleApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'smart_layout exmple',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(colorSchemeSeed: Colors.teal, useMaterial3: true),
      home: const ExampleHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    // Dummy data: imagine this as meals, products etc.
    final items = List.generate(20, (index) => 'Item #${index + 1}');

    return Scaffold(
      appBar: AppBar(title: const Text('smart_layout demo')),
      body: Column(
        children: [
          // Top bar which shows live layouyt info.
          Material(
            elevation: 1,
            color: Theme.of(context).colorScheme.surface,
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
              child: SmartLayoutBuilder(
                itemCount: items.length,
                builder: (context, layout) {
                  return Wrap(
                    spacing: 12,
                    runSpacing: 8,
                    crossAxisAlignment: WrapCrossAlignment.center,
                    children: [
                      InfoChip(label: 'Device', value: layout.deviceType.name),
                      InfoChip(
                        label: 'Size Class',
                        value: layout.sizeClass.name,
                      ),
                      InfoChip(
                        label: 'Orientation',
                        value: layout.orientation.name,
                      ),
                      InfoChip(
                        label: 'Items',
                        value: (layout.itemCount ?? items.length).toString(),
                      ),
                    ],
                  );
                },
              ),
            ),
          ),
          const Divider(height: 1),

          // The smart list/grid which adapts automatically.
          Expanded(
            child: SmartCollectionLayout(
              itemCount: items.length,
              itemBuilder: (context, index) {
                final item = items[index];
                return DemoCard(title: item);
              },
            ),
          ),
        ],
      ),
    );
  }
}

class InfoChip extends StatelessWidget {
  const InfoChip({super.key, required this.label, required this.value});

  final String label;
  final String value;

  @override
  Widget build(BuildContext context) {
    final colorScheme = Theme.of(context).colorScheme;

    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
      decoration: BoxDecoration(
        color: colorScheme.primaryContainer.withValues(alpha: 0.8),
        borderRadius: BorderRadius.circular(20),
      ),
      child: DefaultTextStyle(
        style: Theme.of(
          context,
        ).textTheme.bodySmall!.copyWith(color: colorScheme.onPrimaryContainer),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('$label: '),
            Text(value, style: const TextStyle(fontWeight: FontWeight.bold)),
          ],
        ),
      ),
    );
  }
}

class DemoCard extends StatelessWidget {
  const DemoCard({super.key, required this.title});

  final String title;

  @override
  Widget build(BuildContext context) {
    final colorScheme = Theme.of(context).colorScheme;

    return Card(
      margin: const EdgeInsets.symmetric(vertical: 6),
      clipBehavior: Clip.antiAlias,
      child: InkWell(
        onTap: () {},
        child: Padding(
          padding: EdgeInsets.all(12),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                width: 56,
                height: 56,
                decoration: BoxDecoration(
                  color: colorScheme.primaryContainer,
                  borderRadius: BorderRadius.circular(12),
                ),
                child: Icon(
                  Icons.fastfood,
                  color: colorScheme.onPrimaryContainer,
                ),
              ),
              const SizedBox(width: 12),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(title, style: Theme.of(context).textTheme.titleMedium),
                    const SizedBox(height: 4),
                    Text(
                      'This is a demo item, Resize the window or rotate the device to see the layout change',
                      style: Theme.of(context).textTheme.bodySmall,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}