zeba_academy_manga_ui

A powerful Flutter package for building Manga, Comic, and Graphic Novel inspired user interfaces.

Create immersive manga-style experiences with customizable speech bubbles, comic dialogs, manga panels, speed lines, and dynamic panel layouts.

✨ Features

💬 Manga Speech Bubbles
🗨 Comic Dialog Components
🖼 Manga Panel Containers
⚡ Dynamic Speed Line Effects
📖 Comic Story Layouts
🎭 Flexible Panel Grids
🎨 Highly Customizable Styling
📱 Responsive Design Support
🌙 Light & Dark Theme Friendly
🚀 Lightweight & Easy to Use

📸 Included Components

MangaSpeechBubble

Create classic manga-style speech bubbles.

MangaSpeechBubble(
  text: "I will become the strongest!",
)

ComicDialog

Create character conversations and comic dialogue blocks.

ComicDialog(
  character: "Hero",
  dialog: "Watch this ultimate move!",
)

MangaPanel

Create comic and manga panels with bold borders.

MangaPanel(
  child: Image.asset(
    'assets/hero.png',
    fit: BoxFit.cover,
  ),
)

MangaSpeedLines

Add dramatic manga action effects.

MangaSpeedLines(
  lineCount: 80,
  child: Center(
    child: Text("BOOM!"),
  ),
)

MangaPanelLayout

Build complete manga pages.

MangaPanelLayout(
  children: [
    MangaPanel(child: Text('Panel 1')),
    MangaPanel(child: Text('Panel 2')),
    MangaPanel(child: Text('Panel 3')),
    MangaPanel(child: Text('Panel 4')),
  ],
)

🚀 Installation

Add the package to your pubspec.yaml.

dependencies:
  zeba_academy_manga_ui: ^1.0.0

Then run:

flutter pub get

📦 Import

import 'package:zeba_academy_manga_ui/zeba_academy_manga_ui.dart';

🎯 Complete Example

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          title: const Text('Manga UI Demo'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: MangaPanelLayout(
            children: [
              MangaPanel(
                child: MangaSpeechBubble(
                  text: "I will become the strongest!",
                ),
              ),
              MangaPanel(
                child: ComicDialog(
                  character: "Hero",
                  dialog: "Watch this ultimate move!",
                ),
              ),
              MangaPanel(
                child: MangaSpeedLines(
                  child: Center(
                    child: Text(
                      "BOOM!",
                      style: TextStyle(
                        fontSize: 32,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),
              ),
              MangaPanel(
                child: Center(
                  child: Text("Final Panel"),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

🎨 Use Cases

Perfect for:

Manga Reader Apps
Comic Book Apps
Storytelling Applications
Anime Fan Projects
Visual Novel Interfaces
Interactive Fiction
Educational Story Content
Gaming UI Systems

🛣 Roadmap

Future planned features:

Thought Bubbles
Shouting Speech Effects
Manga Sound Effects (SFX)
Diagonal Manga Panels
Dynamic Action Panels
Right-to-Left Reading Mode
Animated Speed Lines
Manga Scene Builder
Character Cards
Visual Novel Components
Manga Themes
Story Page Generator

🤝 Contributing

Contributions, bug reports, feature requests, and pull requests are welcome.

If you discover any issues or have ideas for improvements, feel free to open an issue or submit a pull request.

📄 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.

Learn more about my work:

Website: https://sufyanism.com
LinkedIn: https://www.linkedin.com/in/sufyanism

🎓 Your All-in-One Learning Hub

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

Empower yourself with practical skills through curated tutorials, real-world projects, and hands-on learning.

Resources

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, please consider giving it a star on GitHub and sharing it with the Flutter community.

Thank you for using zeba_academy_manga_ui!