zeba_academy_cyberpunk_ui 1.0.0
zeba_academy_cyberpunk_ui: ^1.0.0 copied to clipboard
Cyberpunk-inspired Flutter UI package with neon effects, glitch animations, HUD widgets and futuristic dashboards.
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.
- Fork the repository
- Create your feature branch
- Commit your changes
- Push to the branch
- 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!