Build Mobile Hacker IDE in Flutter – Cyberpunk Coding App
Demo :
Click Video 👇👇👇
Features
• Mobile IDE UI
• Neon cyberpunk theme
• Terminal emulator
• File explorer
• Live code editor
• Dashboard charts
• Glass blur UI
Code :
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:flutter_animate/flutter_animate.dart';
import 'package:fl_chart/fl_chart.dart';
// -----------------------------------------------------------------------------
// MAIN ENTRY POINT
// -----------------------------------------------------------------------------
void main() {
WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
statusBarIconBrightness: Brightness.light,
));
runApp(const FuzzuApp());
}
class FuzzuApp extends StatelessWidget {
const FuzzuApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Fuzzu Mobile Hacker IDE',
debugShowCheckedModeBanner: false,
theme: AppTheme.darkTheme,
home: const SplashScreen(),
);
}
}
// -----------------------------------------------------------------------------
// CONSTANTS & THEME
// -----------------------------------------------------------------------------
class AppColors {
static const Color background = Color(0xFF050505);
static const Color surface = Color(0xFF101010);
static const Color neonGreen = Color(0xFF00FF41);
static const Color neonCyan = Color(0xFF00FFFF);
static const Color neonPurple = Color(0xFFBC13FE);
static const Color neonRed = Color(0xFFFF003C);
static const Color textPrimary = Color(0xFFE0E0E0);
static const Color textSecondary = Color(0xFFA0A0A0);
static Color glassBorder = Colors.white.withOpacity(0.1);
static Color glassBackground = Colors.white.withOpacity(0.03);
}
class AppTheme {
static ThemeData get darkTheme {
return ThemeData(
useMaterial3: true,
brightness: Brightness.dark,
scaffoldBackgroundColor: AppColors.background,
primaryColor: AppColors.neonGreen,
colorScheme: const ColorScheme.dark(
primary: AppColors.neonGreen,
secondary: AppColors.neonCyan,
surface: AppColors.surface,
background: AppColors.background,
error: AppColors.neonRed,
),
textTheme: ThemeData.dark().textTheme.apply(
fontFamily: GoogleFonts.getFont('JetBrains Mono').fontFamily,
bodyColor: AppColors.textPrimary,
displayColor: AppColors.textPrimary,
),
appBarTheme: const AppBarTheme(
backgroundColor: Colors.transparent,
elevation: 0,
centerTitle: true,
),
iconTheme: const IconThemeData(
color: AppColors.neonGreen,
),
);
}
}
// -----------------------------------------------------------------------------
// CORE WIDGETS
// -----------------------------------------------------------------------------
class CyberContainer extends StatelessWidget {
final Widget child;
final double? width;
final double? height;
final Color borderColor;
final bool enableGlow;
final EdgeInsetsGeometry? padding;
final EdgeInsetsGeometry? margin;
final BorderRadius? borderRadius;
const CyberContainer({
super.key,
required this.child,
this.width,
this.height,
this.borderColor = AppColors.neonGreen,
this.enableGlow = false,
this.padding,
this.margin,
this.borderRadius,
});
@override
Widget build(BuildContext context) {
return Container(
width: width,
height: height,
margin: margin,
child: ClipRRect(
borderRadius: borderRadius ?? BorderRadius.circular(16),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
child: Container(
padding: padding ?? const EdgeInsets.all(16),
decoration: BoxDecoration(
color: AppColors.glassBackground,
borderRadius: borderRadius ?? BorderRadius.circular(16),
border: Border.all(
color: borderColor.withOpacity(0.5),
width: 1.5,
),
boxShadow: enableGlow
? [
BoxShadow(
color: borderColor.withOpacity(0.2),
blurRadius: 20,
spreadRadius: 2,
)
]
: [],
),
child: child,
),
),
),
);
}
}
class CyberButton extends StatelessWidget {
final String text;
final VoidCallback onPressed;
final IconData? icon;
final Color color;
const CyberButton({
super.key,
required this.text,
required this.onPressed,
this.icon,
this.color = AppColors.neonGreen,
});
@override
Widget build(BuildContext context) {
return InkWell(
onTap: onPressed,
borderRadius: BorderRadius.circular(12),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
decoration: BoxDecoration(
color: color.withOpacity(0.1),
borderRadius: BorderRadius.circular(12),
border: Border.all(color: color, width: 1),
boxShadow: [
BoxShadow(
color: color.withOpacity(0.2),
blurRadius: 10,
offset: const Offset(0, 0),
),
],
),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
if (icon != null) ...[
Icon(icon, color: color, size: 20),
const SizedBox(width: 8),
],
Text(
text.toUpperCase(),
style: TextStyle(
color: color,
fontWeight: FontWeight.bold,
letterSpacing: 1.5,
),
),
],
),
),
);
}
}
class CyberTextField extends StatelessWidget {
final String hint;
final bool obscureText;
final IconData? prefixIcon;
const CyberTextField({
super.key,
required this.hint,
this.obscureText = false,
this.prefixIcon,
});
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: AppColors.surface,
border: Border.all(color: AppColors.glassBorder),
borderRadius: BorderRadius.circular(8),
),
child: TextField(
obscureText: obscureText,
style: const TextStyle(color: AppColors.textPrimary),
decoration: InputDecoration(
hintText: hint,
hintStyle: const TextStyle(color: AppColors.textSecondary),
border: InputBorder.none,
prefixIcon: prefixIcon != null
? Icon(prefixIcon, color: AppColors.neonGreen)
: null,
contentPadding: const EdgeInsets.all(16),
),
),
);
}
}
// -----------------------------------------------------------------------------
// SPLASH & AUTH
// -----------------------------------------------------------------------------
class SplashScreen extends StatefulWidget {
const SplashScreen({super.key});
@override
State<SplashScreen> createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> {
@override
void initState() {
super.initState();
Future.delayed(const Duration(seconds: 4), () {
if (mounted) {
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => const LoginScreen()),
);
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: AppColors.background,
body: Stack(
children: [
Positioned.fill(
child: CustomPaint(
painter: GridPainter(),
),
),
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 120,
height: 120,
decoration: BoxDecoration(
border: Border.all(color: AppColors.neonGreen, width: 2),
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: AppColors.neonGreen.withOpacity(0.5),
blurRadius: 30,
spreadRadius: 5,
),
],
),
child: const Center(
child: Icon(
Icons.code,
size: 60,
color: AppColors.neonGreen,
),
),
).animate()
.scale(duration: 1000.ms, curve: Curves.elasticOut)
.shimmer(delay: 500.ms, duration: 2000.ms, color: AppColors.neonCyan),
const SizedBox(height: 40),
Text(
"FUZZU IDE",
style: TextStyle(
fontSize: 32,
fontWeight: FontWeight.bold,
letterSpacing: 4,
color: AppColors.neonGreen,
shadows: [
Shadow(color: AppColors.neonGreen.withOpacity(0.8), blurRadius: 20),
],
),
).animate()
.fadeIn(delay: 500.ms)
.moveY(begin: 20, end: 0, delay: 500.ms),
const SizedBox(height: 10),
Text(
"MOBILE HACKER ENVIRONMENT",
style: TextStyle(
fontSize: 12,
letterSpacing: 2,
color: AppColors.neonCyan,
),
).animate().fadeIn(delay: 1000.ms),
const SizedBox(height: 60),
SizedBox(
width: 200,
child: LinearProgressIndicator(
backgroundColor: AppColors.surface,
color: AppColors.neonGreen,
),
).animate().fadeIn(delay: 1500.ms),
const SizedBox(height: 20),
Text(
"INITIALIZING CORE SYSTEMS...",
style: TextStyle(
fontSize: 10,
color: AppColors.textSecondary,
),
).animate().fadeIn(delay: 1700.ms),
],
),
),
],
),
);
}
}
class GridPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = AppColors.neonGreen.withOpacity(0.05)
..strokeWidth = 1;
const spacing = 40.0;
for (var i = 0.0; i < size.width; i += spacing) {
canvas.drawLine(Offset(i, 0), Offset(i, size.height), paint);
}
for (var i = 0.0; i < size.height; i += spacing) {
canvas.drawLine(Offset(0, i), Offset(size.width, i), paint);
}
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}
class LoginScreen extends StatelessWidget {
const LoginScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: AppColors.background,
body: SafeArea(
child: Padding(
padding: const EdgeInsets.all(24.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(
Icons.fingerprint,
size: 80,
color: AppColors.neonRed,
).animate(onPlay: (controller) => controller.repeat())
.shimmer(duration: 2000.ms, color: AppColors.neonGreen)
.then()
.fadeIn(),
const SizedBox(height: 10),
Text(
"SECURE ACCESS REQUIRED",
style: TextStyle(
color: AppColors.neonRed,
fontWeight: FontWeight.bold,
letterSpacing: 2,
),
).animate(onPlay: (controller) => controller.repeat(reverse: true))
.fade(duration: 1000.ms, begin: 1.0, end: 0.5),
const SizedBox(height: 60),
const CyberTextField(
hint: "AGENT ID",
prefixIcon: Icons.person_outline,
),
const SizedBox(height: 20),
const CyberTextField(
hint: "ACCESS KEY",
obscureText: true,
prefixIcon: Icons.lock_outline,
),
const SizedBox(height: 40),
SizedBox(
width: double.infinity,
child: CyberButton(
text: "AUTHENTICATE",
onPressed: () {
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => const DashboardLayout()),
);
},
),
),
const SizedBox(height: 20),
TextButton(
onPressed: () {},
child: Text(
"BYPASS PROTOCOLS",
style: TextStyle(
color: AppColors.textSecondary,
decoration: TextDecoration.underline,
),
),
),
],
),
),
),
);
}
}
// -----------------------------------------------------------------------------
// DASHBOARD & SCREENS
// -----------------------------------------------------------------------------
class DashboardLayout extends StatefulWidget {
const DashboardLayout({super.key});
@override
State<DashboardLayout> createState() => _DashboardLayoutState();
}
class _DashboardLayoutState extends State<DashboardLayout> {
int _currentIndex = 0;
final List<Widget> _screens = [
const HomeScreen(),
const EditorScreen(),
const FilesScreen(),
const TerminalScreen(),
const SettingsScreen(),
];
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: AppColors.background,
appBar: AppBar(
leading: Icon(Icons.code, color: AppColors.neonGreen),
title: Text(
"FUZZU IDE",
style: TextStyle(
color: AppColors.neonGreen,
fontWeight: FontWeight.bold,
letterSpacing: 2
)
),
actions: [
IconButton(
icon: Icon(Icons.notifications_outlined, color: AppColors.neonCyan),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.hub, color: AppColors.neonPurple),
onPressed: () {},
),
],
flexibleSpace: ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
child: Container(color: Colors.transparent),
),
),
),
body: _screens[_currentIndex],
bottomNavigationBar: Container(
decoration: BoxDecoration(
border: Border(top: BorderSide(color: AppColors.neonGreen.withOpacity(0.2))),
),
child: BottomNavigationBar(
currentIndex: _currentIndex,
onTap: (index) => setState(() => _currentIndex = index),
backgroundColor: AppColors.background,
type: BottomNavigationBarType.fixed,
selectedItemColor: AppColors.neonGreen,
unselectedItemColor: AppColors.textSecondary,
selectedFontSize: 10,
unselectedFontSize: 10,
items: const [
BottomNavigationBarItem(icon: Icon(Icons.dashboard_outlined), label: "DASH"),
BottomNavigationBarItem(icon: Icon(Icons.edit_outlined), label: "CODE"),
BottomNavigationBarItem(icon: Icon(Icons.folder_open), label: "FILES"),
BottomNavigationBarItem(icon: Icon(Icons.terminal), label: "TERM"),
BottomNavigationBarItem(icon: Icon(Icons.settings_outlined), label: "SETS"),
],
),
),
floatingActionButton: _currentIndex == 1 ? FloatingActionButton(
onPressed: () {},
backgroundColor: AppColors.neonGreen,
child: const Icon(Icons.play_arrow, color: Colors.black),
) : null,
);
}
}
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Expanded(
child: CyberContainer(
height: 100,
enableGlow: true,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.shield_outlined, color: AppColors.neonGreen, size: 30),
Text("SYSTEM SECURE", style: TextStyle(color: AppColors.neonGreen)),
],
),
),
),
const SizedBox(width: 16),
Expanded(
child: CyberContainer(
height: 100,
borderColor: AppColors.neonRed,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.warning_amber_rounded, color: AppColors.neonRed, size: 30),
Text("THREATS: 0", style: TextStyle(color: AppColors.neonRed)),
],
),
),
),
],
),
const SizedBox(height: 24),
const Text("NETWORK TRAFFIC", style: TextStyle(color: AppColors.textSecondary)),
const SizedBox(height: 8),
SizedBox(
height: 200,
child: LineChart(
LineChartData(
gridData: FlGridData(show: false),
titlesData: FlTitlesData(show: false),
borderData: FlBorderData(show: false),
lineBarsData: [
LineChartBarData(
spots: [
const FlSpot(0, 3),
const FlSpot(1, 1),
const FlSpot(2, 4),
const FlSpot(3, 2),
const FlSpot(4, 5),
const FlSpot(5, 3),
const FlSpot(6, 4),
],
isCurved: true,
color: AppColors.neonCyan,
barWidth: 3,
dotData: FlDotData(show: false),
belowBarData: BarAreaData(
show: true,
color: AppColors.neonCyan.withOpacity(0.1),
),
),
],
),
),
),
const SizedBox(height: 24),
const Text("ACTIVE MODULES", style: TextStyle(color: AppColors.textSecondary)),
const SizedBox(height: 8),
_buildModuleItem("Brute Force Engine", true),
_buildModuleItem("SQL Injector", false),
_buildModuleItem("Network Sniffer", true),
],
),
);
}
Widget _buildModuleItem(String title, bool isActive) {
return Container(
margin: const EdgeInsets.only(bottom: 12),
child: CyberContainer(
padding: const EdgeInsets.all(12),
borderColor: isActive ? AppColors.neonGreen : AppColors.textSecondary,
child: Row(
children: [
Icon(
Icons.circle,
size: 10,
color: isActive ? AppColors.neonGreen : AppColors.textSecondary,
),
const SizedBox(width: 12),
Text(title, style: const TextStyle(color: AppColors.textPrimary)),
const Spacer(),
Text(isActive ? "RUNNING" : "STOPPED", style: TextStyle(color: isActive ? AppColors.neonGreen : AppColors.textSecondary, fontSize: 10)),
],
),
),
);
}
}
class EditorScreen extends StatelessWidget {
const EditorScreen({super.key});
@override
Widget build(BuildContext context) {
return Column(
children: [
// Toolbar
Container(
color: AppColors.surface,
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Row(
children: [
const Icon(Icons.file_present, color: AppColors.neonCyan, size: 16),
const SizedBox(width: 8),
const Text("exploit.py", style: TextStyle(color: AppColors.textPrimary)),
const Spacer(),
IconButton(onPressed: () {}, icon: const Icon(Icons.play_arrow, color: AppColors.neonGreen)),
IconButton(onPressed: () {}, icon: const Icon(Icons.save, color: AppColors.textSecondary)),
],
),
),
Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Line Numbers
Container(
width: 40,
color: AppColors.surface,
padding: const EdgeInsets.symmetric(vertical: 16),
child: Column(
children: List.generate(
20,
(index) => Text(
"${index + 1}",
style: const TextStyle(color: AppColors.textSecondary, fontFamily: 'monospace'),
),
),
),
),
// Code Area
Expanded(
child: Container(
padding: const EdgeInsets.all(16),
color: AppColors.background,
child: const TextField(
maxLines: null,
style: TextStyle(
color: AppColors.neonGreen,
fontFamily: 'monospace',
),
decoration: InputDecoration(
border: InputBorder.none,
),
controller: null,
),
),
),
],
),
),
],
);
}
}
class FilesScreen extends StatelessWidget {
const FilesScreen({super.key});
@override
Widget build(BuildContext context) {
return ListView(
padding: const EdgeInsets.all(16),
children: [
_buildFileItem("projects", isFolder: true),
_buildFileItem(" exploits", isFolder: true),
_buildFileItem(" brute_force.py", isFolder: false),
_buildFileItem(" payload_inject.js", isFolder: false),
_buildFileItem("logs", isFolder: true),
_buildFileItem(" system.log", isFolder: false),
_buildFileItem("config.yaml", isFolder: false),
],
);
}
Widget _buildFileItem(String name, {required bool isFolder}) {
return Container(
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: AppColors.glassBorder)),
),
child: Row(
children: [
Icon(
isFolder ? Icons.folder : Icons.insert_drive_file,
color: isFolder ? AppColors.neonPurple : AppColors.textSecondary,
),
const SizedBox(width: 16),
Text(name, style: const TextStyle(color: AppColors.textPrimary)),
const Spacer(),
if (!isFolder) Text("2KB", style: TextStyle(color: AppColors.textSecondary, fontSize: 10)),
],
),
);
}
}
class TerminalScreen extends StatelessWidget {
const TerminalScreen({super.key});
@override
Widget build(BuildContext context) {
return Container(
color: Colors.black,
padding: const EdgeInsets.all(8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: ListView(
children: [
_buildTerminalLine("root@fuzzu:~\$ initializing daemon...", false),
_buildTerminalLine("root@fuzzu:~\$ connected to port 8080", false),
_buildTerminalLine("root@fuzzu:~\$ ./hack_satellite.sh", false),
_buildTerminalLine("Scanning targets...", true),
_buildTerminalLine("Target found: 192.168.1.105", true),
_buildTerminalLine("[SUCCESS] Access Granted", false, color: AppColors.neonGreen),
],
),
),
Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
border: Border(top: BorderSide(color: AppColors.neonGreen.withOpacity(0.3))),
),
child: Row(
children: [
Text("root@fuzzu:~\$ ", style: TextStyle(color: AppColors.neonGreen)),
Expanded(
child: Container(
height: 20,
color: AppColors.neonGreen,
width: 10,
),
),
],
),
),
],
),
);
}
Widget _buildTerminalLine(String text, bool isSystem, {Color? color}) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 2),
child: Text(
text,
style: TextStyle(
color: color ?? (isSystem ? AppColors.textSecondary : AppColors.neonGreen),
fontFamily: 'monospace',
fontSize: 12,
),
),
);
}
}
class SettingsScreen extends StatelessWidget {
const SettingsScreen({super.key});
@override
Widget build(BuildContext context) {
return ListView(
padding: const EdgeInsets.all(16),
children: [
_buildSectionHeader("SECURITY"),
_buildSwitch("Biometric Auth", true),
_buildSwitch("VPN Connection", false),
_buildSwitch("Incognito Mode", true),
const SizedBox(height: 24),
_buildSectionHeader("APPEARANCE"),
_buildSwitch("Animations", true),
_buildSwitch("Hacker Font", true),
const SizedBox(height: 40),
CyberButton(
text: "SELF DESTRUCT",
onPressed: () {},
color: AppColors.neonRed,
icon: Icons.delete_forever,
),
],
);
}
Widget _buildSectionHeader(String title) {
return Padding(
padding: const EdgeInsets.only(bottom: 16),
child: Text(
title,
style: TextStyle(
color: AppColors.neonCyan,
fontWeight: FontWeight.bold,
letterSpacing: 2,
),
),
);
}
Widget _buildSwitch(String title, bool value) {
return Padding(
padding: const EdgeInsets.only(bottom: 16),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(title, style: const TextStyle(color: AppColors.textPrimary)),
Switch(
value: value,
onChanged: (v) {},
activeColor: AppColors.neonGreen,
activeTrackColor: AppColors.neonGreen.withOpacity(0.2),
),
],
),
);
}
}
Comments
Post a Comment