zeba_academy_isometric

A modern Flutter package for building beautiful 3D isometric UI, floating depth effects, perspective transforms, and layered animations with ease.

Create immersive interfaces with elegant motion and smooth depth illusions for mobile, web, and desktop Flutter apps.

---

✨ Features

✅ 3D illusion cards ✅ Floating depth widgets ✅ Perspective transforms ✅ Layered UI animations ✅ Smooth interactive effects ✅ Lightweight & customizable ✅ Flutter Web support ✅ Modern UI experience

---

📦 Installation

Add dependency inside your pubspec.yaml:

dependencies:
  zeba_academy_isometric: ^0.0.1

Then run:

flutter pub get

---

🚀 Import

import 'package:zeba_academy_isometric/zeba_academy_isometric.dart';

---

🧩 Widgets Included

Widget	Description
ZebaIsometricCard	Beautiful 3D illusion cards
ZebaFloatingWidget	Floating animation effect
ZebaPerspective	Perspective transformation widget
ZebaLayeredAnimation	Layered depth animations

---

🎨 ZebaIsometricCard

Create stunning isometric-style cards with perspective depth.

ZebaIsometricCard(
  child: Container(
    color: Colors.deepPurple,
    child: const Center(
      child: Text(
        'Zeba Academy',
        style: TextStyle(
          color: Colors.white,
          fontSize: 24,
          fontWeight: FontWeight.bold,
        ),
      ),
    ),
  ),
)

---

🌊 ZebaFloatingWidget

Add floating motion to any widget.

ZebaFloatingWidget(
  child: Container(
    height: 80,
    width: 80,
    decoration: BoxDecoration(
      color: Colors.cyan,
      borderRadius: BorderRadius.circular(20),
    ),
  ),
)

---

🔄 ZebaPerspective

Apply custom 3D perspective transforms.

ZebaPerspective(
  rotateX: 10,
  rotateY: -10,
  child: Container(
    height: 120,
    width: 120,
    color: Colors.orange,
  ),
)

---

🪄 ZebaLayeredAnimation

Build layered depth animations easily.

ZebaLayeredAnimation(
  layers: [
    Container(
      height: 120,
      width: 120,
      color: Colors.purple,
    ),
    Container(
      height: 90,
      width: 90,
      color: Colors.white,
    ),
  ],
)

---

📱 Complete Example

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: const Color(0xff0F172A),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ZebaIsometricCard(
                child: Container(
                  color: Colors.deepPurple,
                  child: const Center(
                    child: Text(
                      'Zeba Academy',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 28,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),
              ),

              const SizedBox(height: 60),

              ZebaFloatingWidget(
                child: Container(
                  height: 80,
                  width: 80,
                  decoration: BoxDecoration(
                    color: Colors.cyan,
                    borderRadius: BorderRadius.circular(20),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

---

⚙️ Customization

All widgets are highly customizable.

Example:

ZebaIsometricCard(
  rotateX: 15,
  rotateY: -15,
  duration: Duration(milliseconds: 500),
  shadowColor: Colors.black54,
  borderRadius: BorderRadius.circular(32),
  child: YourWidget(),
)

---

🌐 Platform Support

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

---

📁 Package Structure

lib/
│
├── zeba_academy_isometric.dart
│
└── src/
    ├── cards/
    ├── floating/
    ├── perspective/
    ├── layered/
    └── utils/

---

🧪 Running Tests

flutter test

---

📌 Roadmap

Upcoming features:

• Interactive tilt detection
• Gyroscope support
• Advanced parallax layers
• Physics-based animations
• Dynamic lighting effects
• Gesture-driven depth system

---

🤝 Contributing

Contributions are welcome!

Feel free to:

• Open issues
• Suggest features
• Submit pull requests

---

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

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

💻 Level up your tech journey today!

➡ Main Website: https://zeba.academy ➡ Coding Platform: https://code.zeba.academy ➡ YouTube: https://www.youtube.com/@zeba.academy ➡ Instagram: https://www.instagram.com/zeba.academy/

---

❤️ Support

If you like this package, please give it a ⭐ on GitHub and share it with the Flutter community.

---

🔥 Built with Flutter & Passion by Zeba Academy