bento_layout 0.1.0

A Flutter package for building bento-style grid layouts using the skyline bin-packing algorithm. Tiles of varying sizes are packed without overlap or unnecessary gaps. Width fills the parent; height i [...]

example/lib/main.dart

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'bento_layout example',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.black),
        useMaterial3: true,
      ),
      home: const BentoExamplePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF5F5F5),
      body: BentoGrid(
        padding: const EdgeInsets.all(12),
        unitHeight: 180,
        items: [
          // Full-width hero
          BentoItem(
            size: BentoItemSize.fullTower,
            child: _Tile(
              label: 'fullTower\n1.0 × 2.0',
              color: const Color(0xFF0D0D0D),
            ),
          ),

          // Two half-towers side by side
          BentoItem(
            size: BentoItemSize.halfTower,
            child: _Tile(
              label: 'halfTower\n0.5 × 2.0',
              color: const Color(0xFF1A1A2E),
            ),
          ),
          BentoItem(
            size: BentoItemSize.halfTower,
            child: _Tile(
              label: 'halfTower\n0.5 × 2.0',
              color: const Color(0xFF16213E),
            ),
          ),

          // Full-width section bar
          BentoItem(
            size: BentoItemSize.fullBar,
            child: _Tile(
              label: 'fullBar  1.0 × 0.5',
              color: const Color(0xFFE94560),
            ),
          ),

          // Two half-cards
          BentoItem(
            size: BentoItemSize.halfCard,
            child: _Tile(
              label: 'halfCard\n0.5 × 1.0',
              color: const Color(0xFF533483),
            ),
          ),
          BentoItem(
            size: BentoItemSize.halfCard,
            child: _Tile(
              label: 'halfCard\n0.5 × 1.0',
              color: const Color(0xFF6B2D8B),
            ),
          ),

          // Full-width card
          BentoItem(
            size: BentoItemSize.fullCard,
            child: _Tile(
              label: 'fullCard  1.0 × 1.0',
              color: const Color(0xFF0F3460),
            ),
          ),

          // Two half-bars
          BentoItem(
            size: BentoItemSize.halfBar,
            child: _Tile(
              label: 'halfBar  0.5 × 0.5',
              color: const Color(0xFFC84B31),
            ),
          ),
          BentoItem(
            size: BentoItemSize.halfBar,
            child: _Tile(
              label: 'halfBar  0.5 × 0.5',
              color: const Color(0xFFD4622A),
            ),
          ),

          // Four quarter-cards
          BentoItem(
            size: BentoItemSize.quarterCard,
            child: _Tile(
              label: 'qCard\n0.25×1',
              color: const Color(0xFF1B4F72),
            ),
          ),
          BentoItem(
            size: BentoItemSize.quarterCard,
            child: _Tile(
              label: 'qCard\n0.25×1',
              color: const Color(0xFF2874A6),
            ),
          ),
          BentoItem(
            size: BentoItemSize.quarterCard,
            child: _Tile(
              label: 'qCard\n0.25×1',
              color: const Color(0xFF3498DB),
            ),
          ),
          BentoItem(
            size: BentoItemSize.quarterCard,
            child: _Tile(
              label: 'qCard\n0.25×1',
              color: const Color(0xFF7FB3D3),
            ),
          ),

          // Four quarter-bars
          BentoItem(
            size: BentoItemSize.quarterBar,
            child: _Tile(label: 'qBar', color: const Color(0xFF7D6608)),
          ),
          BentoItem(
            size: BentoItemSize.quarterBar,
            child: _Tile(label: 'qBar', color: const Color(0xFFB7950B)),
          ),
          BentoItem(
            size: BentoItemSize.quarterBar,
            child: _Tile(label: 'qBar', color: const Color(0xFFD4AC0D)),
          ),
          BentoItem(
            size: BentoItemSize.quarterBar,
            child: _Tile(label: 'qBar', color: const Color(0xFFF1C40F)),
          ),

          // Four quarter-towers
          BentoItem(
            size: BentoItemSize.quarterTower,
            child: _Tile(
              label: 'qTower\n0.25×2',
              color: const Color(0xFF2B580C),
            ),
          ),
          BentoItem(
            size: BentoItemSize.quarterTower,
            child: _Tile(
              label: 'qTower\n0.25×2',
              color: const Color(0xFF379237),
            ),
          ),
          BentoItem(
            size: BentoItemSize.quarterTower,
            child: _Tile(
              label: 'qTower\n0.25×2',
              color: const Color(0xFF54C254),
            ),
          ),
          BentoItem(
            size: BentoItemSize.quarterTower,
            child: _Tile(
              label: 'qTower\n0.25×2',
              color: const Color(0xFF82CD47),
            ),
          ),
        ],
      ),
    );
  }
}

/// Simple labelled tile used throughout the example.
class _Tile extends StatelessWidget {
  const _Tile({required this.label, required this.color});

  final String label;
  final Color color;

  @override
  Widget build(BuildContext context) {
    // Pick white or black text based on background luminance.
    final textColor = color.computeLuminance() > 0.35
        ? Colors.black87
        : Colors.white;

    return Container(
      decoration: BoxDecoration(
        color: color,
        borderRadius: BorderRadius.circular(16),
      ),
      padding: const EdgeInsets.all(12),
      child: Center(
        child: Text(
          label,
          textAlign: TextAlign.center,
          style: TextStyle(
            color: textColor,
            fontSize: 12,
            fontWeight: FontWeight.w600,
            height: 1.4,
          ),
        ),
      ),
    );
  }
}