zeba_academy_bubble_layout

A lightweight Flutter package that automatically arranges widgets into a clean, responsive bubble layout. Perfect for tags, categories, interests, chips, keywords, skills, labels, and any collection of bubble-like widgets.

✨ Features

🎈 Automatic bubble arrangement
📱 Responsive layout for all screen sizes
🎯 Custom horizontal and vertical spacing
🎨 Alignment options (Start, Center, End)
⚡ Smooth animations
🧩 Works with any Flutter widget
🪶 Lightweight with zero third-party dependencies
🔒 Null Safety support
💙 Simple and easy-to-use API

Preview

Replace the preview above with your own package screenshots or GIF before publishing.

Installation

Add the dependency to your pubspec.yaml.

dependencies:
  zeba_academy_bubble_layout: ^0.0.1

Then run:

flutter pub get

Import the package:

import 'package:zeba_academy_bubble_layout/zeba_academy_bubble_layout.dart';

Getting Started

Create a list of BubbleItem widgets and pass them to BubbleLayout.

BubbleLayout(
  items: [
    BubbleItem(
      child: Chip(label: Text("Flutter")),
    ),
    BubbleItem(
      child: Chip(label: Text("Dart")),
    ),
    BubbleItem(
      child: Chip(label: Text("Firebase")),
    ),
  ],
)

Basic Example

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Bubble Layout'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: BubbleLayout(
            alignment: BubbleAlignment.center,
            spacing: 12,
            runSpacing: 12,
            items: List.generate(
              20,
              (index) => BubbleItem(
                child: Chip(
                  label: Text('Bubble $index'),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Using Different Alignments

BubbleLayout(
  alignment: BubbleAlignment.start,
  items: items,
)

BubbleLayout(
  alignment: BubbleAlignment.center,
  items: items,
)

BubbleLayout(
  alignment: BubbleAlignment.end,
  items: items,
)

Refresh Layout

final controller = BubbleLayoutController();

BubbleLayout(
  controller: controller,
  items: items,
);

controller.refresh();

Custom Spacing

BubbleLayout(
  spacing: 16,
  runSpacing: 20,
  items: items,
)

API Reference

BubbleLayout

Property	Type	Default	Description
items	List	required	Bubble widgets
spacing	double	8	Horizontal spacing
runSpacing	double	8	Vertical spacing
alignment	BubbleAlignment	start	Bubble alignment
duration	Duration	300ms	Animation duration
controller	BubbleLayoutController?	null	Refresh controller

BubbleAlignment

BubbleAlignment.start
BubbleAlignment.center
BubbleAlignment.end

BubbleItem

BubbleItem(
  child: Widget,
)

BubbleLayoutController

controller.refresh();

Common Use Cases

Search suggestions
Tags
Categories
Skills
User interests
Hashtags
Product labels
Chat topics
Keyword clouds
Dynamic chip layouts

Why Use zeba_academy_bubble_layout?

Minimal API
Easy integration
Responsive by default
Animated updates
No external dependencies
Supports any widget
Production-ready architecture
Clean Flutter implementation

Roadmap

Future releases may include:

Bubble packing algorithm
Circular bubble layout
Random organic layouts
Physics animations
Drag and reorder support
Bubble selection
Bubble grouping
Interactive bubble effects
Custom layout delegates
Advanced animation presets

Contributing

Contributions are welcome!

You can help by:

Reporting bugs
Improving documentation
Suggesting new features
Submitting pull requests

Please open an issue before making major changes.

License

This project is licensed under the GNU General Public License v3.0 (GPL-3.0).

See the LICENSE file for details.

About Me

✨ I'm Sufyan bin Uzayr, an open-source developer passionate about building and sharing meaningful projects.

You can learn more about me and my work at https://sufyanism.com/ or connect with me on LinkedIn: https://www.linkedin.com/in/sufyanism

Your all-in-one learning hub!

🚀 Explore courses and resources in coding, technology, and software development with Zeba Academy.

Empower yourself through practical tutorials, real-world Flutter projects, and hands-on learning.

🌐 Main Website: https://zeba.academy

💻 Learning Portal: https://code.zeba.academy

▶️ YouTube: https://www.youtube.com/@zeba.academy

📸 Instagram: https://www.instagram.com/zeba.academy/

Support

If you find this package useful, consider:

⭐ Starring the repository
👍 Liking and sharing the package
🐛 Reporting issues
💙 Contributing improvements

Made with ❤️ using Flutter by Zeba Academy.