zeba_academy_card_effects

A modern Flutter UI package that provides beautiful and reusable card effects including:

✨ Glassmorphism 🎨 Neumorphism 🖱 Hover Effects 🌑 Shadow Presets 🎬 Animated Cards

Build stunning modern interfaces with minimal effort.

Features

✅ Glassmorphism cards ✅ Neumorphic UI cards ✅ Hover animations for desktop/web ✅ Reusable shadow presets ✅ Interactive animated cards ✅ Lightweight & customizable ✅ Flutter Web supported ✅ Responsive design friendly

Installation

Add this to your pubspec.yaml:

dependencies:
  zeba_academy_card_effects: ^1.0.0

Then run:

flutter pub get

Import

import 'package:zeba_academy_card_effects/zeba_academy_card_effects.dart';

Glassmorphism Card

GlassCard(
  child: const Text(
    "Glass Card",
    style: TextStyle(color: Colors.white),
  ),
)

Neumorphism Card

NeumorphicCard(
  child: const Text("Neumorphic Card"),
)

Hover Effect Card

HoverCard(
  child: const Text("Hover Me"),
)

Animated Card

AnimatedCard(
  child: Container(
    padding: const EdgeInsets.all(24),
    decoration: BoxDecoration(
      color: Colors.blue,
      borderRadius: BorderRadius.circular(20),
    ),
    child: const Text(
      "Animated Card",
      style: TextStyle(color: Colors.white),
    ),
  ),
)

Shadow Presets

Container(
  decoration: BoxDecoration(
    color: Colors.white,
    boxShadow: ZebaShadowPresets.soft,
  ),
)

Available presets:

ZebaShadowPresets.soft
ZebaShadowPresets.medium
ZebaShadowPresets.hard
ZebaShadowPresets.glow(color)

Full Example

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const DemoPage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF1E1E1E),
      body: Center(
        child: SingleChildScrollView(
          padding: const EdgeInsets.all(24),
          child: Column(
            children: [
              GlassCard(
                child: const Text(
                  "Glassmorphism Card",
                  style: TextStyle(color: Colors.white),
                ),
              ),

              const SizedBox(height: 30),

              NeumorphicCard(
                child: const Text("Neumorphism Card"),
              ),

              const SizedBox(height: 30),

              HoverCard(
                child: const Text("Hover Me"),
              ),

              const SizedBox(height: 30),

              AnimatedCard(
                child: Container(
                  padding: const EdgeInsets.all(24),
                  decoration: BoxDecoration(
                    color: Colors.blue,
                    borderRadius: BorderRadius.circular(20),
                  ),
                  child: const Text(
                    "Animated Card",
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Platform Support

Platform	Supported
Android	✅
iOS	✅
Web	✅
Windows	✅
macOS	✅
Linux	✅

Additional Information

This package is designed for developers who want modern UI effects without heavy dependencies.

Perfect for:

Portfolio apps
Dashboard UIs
Admin panels
SaaS interfaces
Modern mobile apps
Web applications

Roadmap

Upcoming features:

3D Tilt Cards
Magnetic Hover Effects
Gradient Borders
Parallax Motion
Liquid Glass Effects
Interactive Glow Effects
GPU Shader Animations

Contributing

Contributions are welcome!

Feel free to open issues or submit pull requests to improve the package.

License

This project is licensed under the GPL License.

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 sufyanism.com or connect with me on LinkedIn

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

Zeba Academy is a learning platform dedicated to coding, technology, and development.

➡ Visit our main site: https://zeba.academy ➡ Explore hands-on courses and resources at: https://code.zeba.academy ➡ Check out our YouTube for more tutorials: https://www.youtube.com/@zeba.academy ➡ Follow us on Instagram: https://www.instagram.com/zeba.academy/