zeba_academy_comic_ui

pub package License: GPL-3.0

A comic-book inspired Flutter UI package featuring speech bubbles, sketchy buttons, pop animations, and cartoon-style shadows.

Bring the energy of comic books and cartoons into your Flutter applications with reusable widgets, playful animations, and bold visual effects.

✨ Features

✅ Comic Speech Bubbles

✅ Sketchy Comic Buttons

✅ Pop-In Animations

✅ Cartoon Shadows

✅ Comic Cards

✅ Custom Comic Theme

✅ Material 3 Support

✅ Null Safety

✅ Lightweight & Easy to Use

📸 Preview

Create interfaces inspired by comic books:

  • Speech bubbles
  • Cartoon cards
  • Bold shadows
  • Fun button interactions
  • Pop animations

Perfect for:

  • Kids Apps
  • Educational Apps
  • Comics & Storytelling Apps
  • Gaming Interfaces
  • Creative Dashboards

🚀 Installation

Add the dependency to your pubspec.yaml:

dependencies:
  zeba_academy_comic_ui: ^1.0.0

Install packages:

flutter pub get

Import:

import 'package:zeba_academy_comic_ui/zeba_academy_comic_ui.dart';

🎨 Comic Theme

MaterialApp(
  theme: ComicTheme.light(),
  home: const HomePage(),
);

💬 Comic Speech Bubble

ComicSpeechBubble(
  child: Text(
    "POW! Welcome to Comic UI",
    style: TextStyle(
      fontSize: 20,
      fontWeight: FontWeight.bold,
    ),
  ),
)

🔘 Comic Button

ComicButton(
  text: "CLICK ME",
  onPressed: () {
    print("Button pressed");
  },
)

Features

  • Cartoon Press Effect
  • Animated Depth
  • Bold Comic Styling

🎉 Pop Animation

PopAnimation(
  child: Icon(
    Icons.star,
    size: 80,
  ),
)

Features

  • Elastic Animation
  • Attention-Grabbing Effects
  • Great for Onboarding & Rewards

🃏 Comic Card

ComicCard(
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Text("Comic Card Content"),
  ),
)

🌑 Cartoon Shadow

CartoonShadow(
  child: Container(
    padding: EdgeInsets.all(20),
    color: Colors.white,
    child: Text("Cartoon Shadow"),
  ),
)

📱 Complete Example

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ComicTheme.light(),
      home: Scaffold(
        backgroundColor: Colors.orange.shade50,
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              PopAnimation(
                child: ComicSpeechBubble(
                  child: Text(
                    "POW! Welcome!",
                    style: TextStyle(
                      fontSize: 24,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),

              SizedBox(height: 30),

              ComicButton(
                text: "START",
                onPressed: () {},
              ),

              SizedBox(height: 30),

              ComicCard(
                child: Text(
                  "Comic-style card widget",
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

🎯 Roadmap

Version 1.1.0

  • Comic Panels
  • Animated Stickers
  • Explosion Effects
  • BAM/POW Widgets

Version 1.2.0

  • Comic Navigation Bar
  • Comic Dialogs
  • Comic Avatars
  • Interactive Speech Bubbles

Version 2.0.0

  • Full Comic Design System
  • Theme Presets
  • Comic Typography
  • Comic Page Transitions

🤝 Contributing

Contributions, issues, and feature requests are welcome.

If you would like to improve this package:

  1. Fork the repository
  2. Create a feature branch
  3. Commit your changes
  4. 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.

You can learn more about me and my work at:

🌐 https://sufyanism.com

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

Your all-in-one learning hub!

🚀 Explore courses and resources in coding, tech, and development at zeba.academy and code.zeba.academy.

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

Level up your tech game today! 💻✨

Zeba Academy

A learning platform dedicated to coding, technology, and development.

➡ Visit our main site: https://zeba.academy

➡ Explore courses and resources: https://code.zeba.academy

➡ YouTube: https://www.youtube.com/@zeba.academy

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

Thank you for visiting and supporting open-source development! ❤️

Libraries

zeba_academy_comic_ui