zeba_academy_isometric_ui

A modern pseudo-3D isometric UI widget collection for Flutter. Build stunning dashboards, floating interfaces, layered panels, and perspective-driven layouts with ease.

---

✨ Features

• 🎴 Isometric Cards
• 📦 Layered Panels
• 🏗 Perspective Layouts
• ☁️ Floating Widgets
• 📊 Dashboard Components
• 🎨 Customizable Colors & Styling
• ⚡ Lightweight & Easy to Use
• 📱 Responsive Flutter Widgets

---

📸 Preview

Add screenshots or GIF demonstrations here.

assets/demo/isometric_demo.gif

---

🚀 Installation

Add the package to your pubspec.yaml:

dependencies:
  zeba_academy_isometric_ui: ^0.0.1

Then run:

flutter pub get

Import the package:

import 'package:zeba_academy_isometric_ui/zeba_academy_isometric_ui.dart';

---

🎴 Isometric Card

Create beautiful pseudo-3D cards with perspective transforms.

IsometricCard(
  width: 220,
  height: 140,
  color: Colors.blue,
  child: const Center(
    child: Text(
      'Isometric Card',
      style: TextStyle(
        color: Colors.white,
        fontWeight: FontWeight.bold,
      ),
    ),
  ),
)

---

📦 Isometric Panel

Create layered dashboard panels.

IsometricPanel(
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: const [
      Icon(Icons.analytics, color: Colors.white),
      SizedBox(height: 8),
      Text(
        'Analytics Panel',
        style: TextStyle(color: Colors.white),
      ),
    ],
  ),
)

---

☁️ Floating Widget

Add subtle floating animations to your UI.

FloatingWidget(
  child: IsometricCard(
    child: const Center(
      child: Text('Floating Card'),
    ),
  ),
)

---

📊 Dashboard Layout

Build responsive dashboard interfaces.

IsometricDashboard(
  children: [
    IsometricCard(
      child: const Center(
        child: Text('Card 1'),
      ),
    ),
    IsometricCard(
      child: const Center(
        child: Text('Card 2'),
      ),
    ),
  ],
)

---

🎯 Complete Example

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: const Color(0xFF0F172A),
        body: Center(
          child: IsometricDashboard(
            children: [
              FloatingWidget(
                child: IsometricCard(
                  color: Colors.blue,
                  child: const Center(
                    child: Text(
                      'Revenue',
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
              ),
              IsometricPanel(
                child: const Text(
                  'Dashboard Panel',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

---

📚 Widgets Included

Widget	Description
IsometricCard	Pseudo-3D card component
IsometricPanel	Layered dashboard panel
FloatingWidget	Floating animation wrapper
IsometricDashboard	Responsive dashboard layout

---

🎨 Use Cases

• Analytics Dashboards
• Admin Panels
• SaaS Applications
• Fintech Interfaces
• Educational Platforms
• Portfolio Websites
• Gaming UI
• Futuristic App Designs

---

🤝 Contributing

Contributions, issues, and feature requests are welcome.

Feel free to fork the repository and submit pull requests.

---

📄 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 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 is a learning platform dedicated to coding, technology, and development.

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

➡ Explore hands-on 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! ⭐

If you find this package useful, consider giving the repository a star and sharing it with the Flutter community.