zeba_academy_cyberpunk_ui #

A futuristic Flutter UI package inspired by cyberpunk aesthetics. Build immersive interfaces with neon glow effects, glitch animations, HUD panels, animated borders, and dashboard components.

✨ Features #

• 🌆 Cyberpunk-inspired design system
• ⚡ Glitch text animations
• 💎 Neon glowing cards
• 🎯 HUD (Heads-Up Display) widgets
• 🔥 Animated neon borders
• 📊 Futuristic dashboard layouts
• 🌈 Custom cyberpunk color palette
• 🎨 Dark futuristic backgrounds
• 📱 Responsive Flutter widgets
• 🚀 Easy integration into existing projects

📦 Installation #

Add the package to your pubspec.yaml:

dependencies:
  zeba_academy_cyberpunk_ui: ^1.0.0

Then run:

flutter pub get

Import:

import 'package:zeba_academy_cyberpunk_ui/zeba_academy_cyberpunk_ui.dart';

🚀 Quick Start #

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CyberpunkBackground(
          child: Center(
            child: NeonCard(
              child: GlitchText(
                text: "CYBERPUNK UI",
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Components #

NeonCard #

Create glowing futuristic cards.

NeonCard(
  glowColor: Colors.cyan,
  child: const Text(
    "Neon Card",
    style: TextStyle(color: Colors.white),
  ),
)

GlitchText #

Animated cyberpunk glitch effect.

const GlitchText(
  text: "SYSTEM ONLINE",
  fontSize: 36,
)

AnimatedNeonBorder #

Animated color-changing border.

AnimatedNeonBorder(
  child: Container(
    padding: const EdgeInsets.all(20),
    child: const Text("Protected Panel"),
  ),
)

HudPanel #

Futuristic HUD-style information panel.

HudPanel(
  title: "SYSTEM STATUS",
  child: const Text(
    "ONLINE",
    style: TextStyle(color: Colors.white),
  ),
)

FuturisticDashboard #

Cyberpunk dashboard layout.

FuturisticDashboard(
  children: const [
    Center(child: Text("CPU")),
    Center(child: Text("RAM")),
    Center(child: Text("NETWORK")),
    Center(child: Text("SECURITY")),
  ],
)

CyberpunkBackground #

Cyberpunk gradient background.

CyberpunkBackground(
  child: YourWidget(),
)

🎨 Cyberpunk Color Palette #

CyberpunkColors.cyan
CyberpunkColors.pink
CyberpunkColors.purple
CyberpunkColors.yellow
CyberpunkColors.dark

Example:

Container(
  color: CyberpunkColors.dark,
)

📱 Complete Example #

Scaffold(
  body: CyberpunkBackground(
    child: Padding(
      padding: EdgeInsets.all(20),
      child: Column(
        children: [
          SizedBox(height: 50),

          GlitchText(
            text: 'ZEBA CYBERPUNK',
          ),

          SizedBox(height: 30),

          Expanded(
            child: FuturisticDashboard(
              children: [
                Center(child: Text('CPU 85%')),
                Center(child: Text('RAM 67%')),
                Center(child: Text('NETWORK')),
                Center(child: Text('SECURITY')),
              ],
            ),
          ),
        ],
      ),
    ),
  ),
);

🛣 Roadmap #

Version 1.1.0 #

• RGB animated gradients
• Cyberpunk buttons
• Holographic cards
• Terminal widgets
• Matrix rain effect
• Radar scanner
• Circular HUD indicators
• AI assistant panels
• Neon navigation rail
• Scan-line overlays

Version 2.0.0 #

• Full cyberpunk theme system
• Cyberpunk charts
• 3D dashboard widgets
• Advanced particle effects
• Hologram animations
• Interactive futuristic controls

🤝 Contributing #

Contributions, issues, and feature requests are welcome.

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Open a Pull Request

📄 License #

This project is licensed under the GNU General Public License v3.0 (GPL-3.0).

You are free to:

• Use
• Modify
• Distribute
• Share

Under the terms of the GPL v3 License.

See the LICENSE file for full 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, technology, and development at Zeba Academy.

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

Useful Links #

• Main Website: https://zeba.academy
• Coding Portal: https://code.zeba.academy
• YouTube: https://www.youtube.com/@zeba.academy
• Instagram: https://www.instagram.com/zeba.academy/
• Personal Website: https://sufyanism.com
• LinkedIn: https://www.linkedin.com/in/sufyanism

Built with ❤️ using Flutter #

Thank you for visiting and supporting open-source development!