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!