advanced_wrap 0.1.0

A production-ready, UX-first Flutter package that extends Flutter Wrap with powerful overflow strategies, controller-driven expand/collapse, responsive behavior, and accessibility features.

example/lib/main.dart

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AdvancedWrap Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const ExamplePage(),
    );
  }
}

class ExamplePage extends StatefulWidget {
  const ExamplePage({super.key});

  @override
  State<ExamplePage> createState() => _ExamplePageState();
}

class _ExamplePageState extends State<ExamplePage> {
  final AdvancedWrapController _controller = AdvancedWrapController();
  final List<String> _tags = [
    'Flutter',
    'Dart',
    'Mobile Development',
    'Cross Platform',
    'UI/UX',
    'Material Design',
    'iOS',
    'Android',
    'Web Development',
    'Desktop Apps',
    'State Management',
    'Widgets',
    'Animation',
    'Performance',
    'Testing',
    'Debugging',
    'Hot Reload',
    'Package Development',
    'Open Source',
    'Google',
  ];

  OverflowStrategy _selectedStrategy = OverflowStrategy.count;
  int _maxRows = 2;

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('AdvancedWrap Example'),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _buildControls(),
            const SizedBox(height: 24),
            _buildBasicExample(),
            const SizedBox(height: 32),
            _buildItemBuilderExample(),
            const SizedBox(height: 32),
            _buildControllerExample(),
            const SizedBox(height: 32),
            _buildCustomOverflowExample(),
          ],
        ),
      ),
    );
  }

  Widget _buildControls() {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Controls',
              style: Theme.of(context).textTheme.titleLarge,
            ),
            const SizedBox(height: 16),
            Row(
              children: [
                const Text('Overflow Strategy: '),
                const SizedBox(width: 8),
                DropdownButton<OverflowStrategy>(
                  value: _selectedStrategy,
                  onChanged: (value) {
                    if (value != null) {
                      setState(() {
                        _selectedStrategy = value;
                      });
                    }
                  },
                  items: OverflowStrategy.values.map((strategy) {
                    return DropdownMenuItem(
                      value: strategy,
                      child: Text(strategy.name),
                    );
                  }).toList(),
                ),
              ],
            ),
            const SizedBox(height: 8),
            Row(
              children: [
                const Text('Max Rows: '),
                const SizedBox(width: 8),
                SizedBox(
                  width: 100,
                  child: Slider(
                    value: _maxRows.toDouble(),
                    min: 1,
                    max: 5,
                    divisions: 4,
                    label: _maxRows.toString(),
                    onChanged: (value) {
                      setState(() {
                        _maxRows = value.round();
                      });
                    },
                  ),
                ),
                Text(_maxRows.toString()),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildBasicExample() {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Basic Example with Children',
              style: Theme.of(context).textTheme.titleLarge,
            ),
            const SizedBox(height: 16),
            AdvancedWrap(
              maxRows: _maxRows,
              spacing: 8,
              runSpacing: 8,
              overflowStrategy: _selectedStrategy,
              children: _tags.map((tag) => Chip(label: Text(tag))).toList(),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildItemBuilderExample() {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'ItemBuilder Example',
              style: Theme.of(context).textTheme.titleLarge,
            ),
            const SizedBox(height: 16),
            AdvancedWrap(
              itemCount: _tags.length,
              itemBuilder: (context, index) {
                return Container(
                  padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
                  decoration: BoxDecoration(
                    color: Colors.blue.withOpacity(0.1),
                    borderRadius: BorderRadius.circular(20),
                    border: Border.all(color: Colors.blue.withOpacity(0.3)),
                  ),
                  child: Text(
                    _tags[index],
                    style: const TextStyle(color: Colors.blue),
                  ),
                );
              },
              maxRows: _maxRows,
              spacing: 8,
              runSpacing: 8,
              overflowStrategy: _selectedStrategy,
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildControllerExample() {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: [
                Text(
                  'Controller Example',
                  style: Theme.of(context).textTheme.titleLarge,
                ),
                const Spacer(),
                ElevatedButton(
                  onPressed: _controller.toggle,
                  child: AnimatedBuilder(
                    animation: _controller,
                    builder: (context, child) {
                      return Text(
                        _controller.isExpanded ? 'Collapse' : 'Expand',
                      );
                    },
                  ),
                ),
              ],
            ),
            const SizedBox(height: 16),
            AdvancedWrap(
              controller: _controller,
              maxRows: 2,
              spacing: 8,
              runSpacing: 8,
              overflowStrategy: OverflowStrategy.expand,
              children: _tags.map((tag) {
                return ActionChip(
                  label: Text(tag),
                  onPressed: () {
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(content: Text('Tapped: $tag')),
                    );
                  },
                );
              }).toList(),
            ),
            const SizedBox(height: 8),
            StreamBuilder<int>(
              stream: _controller.onOverflowChanged,
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return Text(
                    'Hidden items: ${snapshot.data}',
                    style: Theme.of(context).textTheme.bodySmall,
                  );
                }
                return const SizedBox.shrink();
              },
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildCustomOverflowExample() {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Custom Overflow Builder',
              style: Theme.of(context).textTheme.titleLarge,
            ),
            const SizedBox(height: 16),
            AdvancedWrap(
              maxRows: 2,
              spacing: 8,
              runSpacing: 8,
              overflowStrategy: OverflowStrategy.custom,
              children: _tags.map((tag) => Chip(label: Text(tag))).toList(),
              overflowBuilder: (context, restCount, hiddenChildren) {
                return GestureDetector(
                  onTap: () {
                    showModalBottomSheet(
                      context: context,
                      builder: (context) => Container(
                        padding: const EdgeInsets.all(16),
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              'Hidden Items ($restCount)',
                              style: Theme.of(context).textTheme.titleLarge,
                            ),
                            const SizedBox(height: 16),
                            Wrap(
                              spacing: 8,
                              runSpacing: 8,
                              children: hiddenChildren,
                            ),
                          ],
                        ),
                      ),
                    );
                  },
                  child: Container(
                    padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                    decoration: BoxDecoration(
                      gradient: const LinearGradient(
                        colors: [Colors.purple, Colors.blue],
                      ),
                      borderRadius: BorderRadius.circular(20),
                    ),
                    child: Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        const Icon(Icons.more_horiz, color: Colors.white, size: 16),
                        const SizedBox(width: 4),
                        Text(
                          '$restCount more',
                          style: const TextStyle(
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ],
                    ),
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}