Flutter Hacker Pocket IDE – Build a Cyber Command Mobile IDE
Demo :
Click Video 👇👇👇
Features :
• Cyber command UI
• Mobile IDE
• Neon terminal
• File manager
• Live code preview
• Threat monitor illusion
• Glass blur panels
• Scanline HUD
• Multi-theme engine
Code :
import 'dart:async';
import 'dart:math';
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:animate_do/animate_do.dart';
void main() {
runApp(const HackerPocketIde());
}
class HackerPocketIde extends StatelessWidget {
const HackerPocketIde({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Hacker Pocket IDE',
debugShowCheckedModeBanner: false,
theme: CyberTheme.theme,
home: const ScanlineOverlay(
child: HomeDashboard(),
),
routes: {
'/editor': (context) => const ScanlineOverlay(child: CodeEditor()),
'/files': (context) => const ScanlineOverlay(child: Scaffold(body: FileSystemView())),
},
);
}
}
// --- THEME ---
class AppColors {
static const Color black = Color(0xFF020202);
static const Color darkGrey = Color(0xFF0A0A0A);
static const Color neonGreen = Color(0xFF00FF41);
static const Color neonCyan = Color(0xFF00F3FF);
static const Color neonRed = Color(0xFFFF2A2A);
static const Color darkGreen = Color(0xFF003B00);
static const Color glassBorder = Color(0x3300FF41);
static const Color glassBackground = Color(0x1100FF41);
// Terminal colors
static const Color terminalText = Color(0xFFE0E0E0);
static const Color comment = Color(0xFF6A6A6A);
}
class CyberTheme {
static ThemeData get theme {
return ThemeData.dark().copyWith(
scaffoldBackgroundColor: AppColors.black,
primaryColor: AppColors.neonGreen,
colorScheme: const ColorScheme.dark(
primary: AppColors.neonGreen,
secondary: AppColors.neonCyan,
surface: AppColors.darkGrey,
background: AppColors.black,
error: AppColors.neonRed,
),
textTheme: GoogleFonts.shareTechMonoTextTheme(ThemeData.dark().textTheme).apply(
bodyColor: AppColors.terminalText,
displayColor: AppColors.neonGreen,
),
iconTheme: const IconThemeData(
color: AppColors.neonGreen,
),
);
}
}
// --- WIDGETS ---
class CyberContainer extends StatelessWidget {
final Widget child;
final double? width;
final double? height;
final EdgeInsetsGeometry padding;
final bool showGrid;
const CyberContainer({
super.key,
required this.child,
this.width,
this.height,
this.padding = const EdgeInsets.all(16.0),
this.showGrid = false,
});
@override
Widget build(BuildContext context) {
return ClipRRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
child: Container(
width: width,
height: height,
padding: padding,
decoration: BoxDecoration(
color: AppColors.glassBackground,
border: Border.all(color: AppColors.glassBorder, width: 1),
boxShadow: [
BoxShadow(
color: AppColors.neonGreen.withOpacity(0.1),
blurRadius: 10,
spreadRadius: 1,
)
],
),
child: Stack(
children: [
if (showGrid) const Positioned.fill(child: _CyberGrid()),
CustomPaint(
painter: _CornerPainter(color: AppColors.neonGreen),
child: Container(),
),
child,
],
),
),
),
);
}
}
class _CornerPainter extends CustomPainter {
final Color color;
_CornerPainter({required this.color});
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = color
..strokeWidth = 2
..style = PaintingStyle.stroke;
double cornerSize = 10.0;
// Top Left
canvas.drawPath(
Path()
..moveTo(0, cornerSize)
..lineTo(0, 0)
..lineTo(cornerSize, 0),
paint);
// Top Right
canvas.drawPath(
Path()
..moveTo(size.width - cornerSize, 0)
..lineTo(size.width, 0)
..lineTo(size.width, cornerSize),
paint);
// Bottom Right
canvas.drawPath(
Path()
..moveTo(size.width, size.height - cornerSize)
..lineTo(size.width, size.height)
..lineTo(size.width - cornerSize, size.height),
paint);
// Bottom Left
canvas.drawPath(
Path()
..moveTo(cornerSize, size.height)
..lineTo(0, size.height)
..lineTo(0, size.height - cornerSize),
paint);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}
class _CyberGrid extends StatelessWidget {
const _CyberGrid();
@override
Widget build(BuildContext context) {
return CustomPaint(
painter: _GridPainter(),
);
}
}
class _GridPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = AppColors.neonGreen.withOpacity(0.05)
..strokeWidth = 1;
double step = 20;
for (double x = 0; x < size.width; x += step) {
canvas.drawLine(Offset(x, 0), Offset(x, size.height), paint);
}
for (double y = 0; y < size.height; y += step) {
canvas.drawLine(Offset(0, y), Offset(size.width, y), paint);
}
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}
class ScanlineOverlay extends StatefulWidget {
final Widget child;
const ScanlineOverlay({super.key, required this.child});
@override
State<ScanlineOverlay> createState() => _ScanlineOverlayState();
}
class _ScanlineOverlayState extends State<ScanlineOverlay>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this, duration: const Duration(seconds: 4))
..repeat();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Stack(
children: [
widget.child,
IgnorePointer(
child: AnimatedBuilder(
animation: _controller,
builder: (context, child) {
return CustomPaint(
size: Size.infinite,
painter: _ScanlinePainter(progress: _controller.value),
);
},
),
),
],
);
}
}
class _ScanlinePainter extends CustomPainter {
final double progress;
_ScanlinePainter({required this.progress});
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = AppColors.neonGreen.withOpacity(0.03) // Very subtle
..strokeWidth = 1;
// Static lines
for (double y = 0; y < size.height; y += 4) {
canvas.drawLine(Offset(0, y), Offset(size.width, y), paint);
}
// Moving scan bar
final barY = size.height * progress;
final barPaint = Paint()
..shader = LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.transparent,
AppColors.neonGreen.withOpacity(0.1),
Colors.transparent,
],
).createShader(Rect.fromLTWH(0, barY, size.width, 100));
canvas.drawRect(Rect.fromLTWH(0, barY, size.width, 100), barPaint);
}
@override
bool shouldRepaint(covariant _ScanlinePainter oldDelegate) =>
oldDelegate.progress != progress;
}
class CyberButton extends StatefulWidget {
final String text;
final VoidCallback onTap;
final bool isSecondary;
final IconData? icon;
const CyberButton({
super.key,
required this.text,
required this.onTap,
this.isSecondary = false,
this.icon,
});
@override
State<CyberButton> createState() => _CyberButtonState();
}
class _CyberButtonState extends State<CyberButton> {
bool _isHovered = false;
bool _isPressed = false;
@override
Widget build(BuildContext context) {
Color baseColor = widget.isSecondary ? AppColors.neonCyan : AppColors.neonGreen;
return GestureDetector(
onTapDown: (_) => setState(() => _isPressed = true),
onTapUp: (_) => setState(() => _isPressed = false),
onTapCancel: () => setState(() => _isPressed = false),
onTap: widget.onTap,
child: MouseRegion(
onEnter: (_) => setState(() => _isHovered = true),
onExit: (_) => setState(() => _isHovered = false),
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
decoration: BoxDecoration(
color: _isPressed
? baseColor.withOpacity(0.3)
: _isHovered
? baseColor.withOpacity(0.1)
: Colors.transparent,
border: Border.all(
color: _isHovered ? baseColor : baseColor.withOpacity(0.5),
width: 1,
),
boxShadow: _isHovered
? [
BoxShadow(
color: baseColor.withOpacity(0.4),
blurRadius: 8,
spreadRadius: 1,
)
]
: [],
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
if (widget.icon != null) ...[
Icon(widget.icon,
color: _isHovered ? baseColor : baseColor.withOpacity(0.8),
size: 18,
),
const SizedBox(width: 8),
],
Text(
widget.text.toUpperCase(),
style: TextStyle(
color: _isHovered ? baseColor : baseColor.withOpacity(0.8),
fontWeight: FontWeight.bold,
letterSpacing: 1.2,
),
),
],
),
),
),
);
}
}
class StatusLight extends StatefulWidget {
final bool isActive;
final Color color;
const StatusLight({super.key, this.isActive = true, this.color = AppColors.neonGreen});
@override
State<StatusLight> createState() => _StatusLightState();
}
class _StatusLightState extends State<StatusLight> with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _opacity;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this, duration: const Duration(milliseconds: 1000))
..repeat(reverse: true);
_opacity = Tween<double>(begin: 0.5, end: 1.0).animate(_controller);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
if (!widget.isActive) {
return Container(
width: 8,
height: 8,
decoration: BoxDecoration(
color: Colors.grey.withOpacity(0.3),
shape: BoxShape.circle,
),
);
}
return AnimatedBuilder(
animation: _opacity,
builder: (context, child) {
return Container(
width: 8,
height: 8,
decoration: BoxDecoration(
color: widget.color.withOpacity(_opacity.value),
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: widget.color,
blurRadius: 4 * _opacity.value,
spreadRadius: 1,
)
],
),
);
},
);
}
}
class GlitchText extends StatefulWidget {
final String text;
final TextStyle style;
const GlitchText(this.text, {super.key, required this.style});
@override
State<GlitchText> createState() => _GlitchTextState();
}
class _GlitchTextState extends State<GlitchText> with SingleTickerProviderStateMixin {
late String _displayText;
Timer? _timer;
final _chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#\$%^&*()_+-=[]{}|;:,.<>?';
final Random _random = Random();
late AnimationController _controller;
@override
void initState() {
super.initState();
_displayText = widget.text;
_controller = AnimationController(
vsync: this, duration: const Duration(milliseconds: 2000));
_startGlitchLoop();
}
void _startGlitchLoop() {
_timer = Timer.periodic(const Duration(milliseconds: 3000), (timer) {
if (!mounted) return;
_triggerGlitch();
});
}
void _triggerGlitch() {
int count = 0;
Timer.periodic(const Duration(milliseconds: 50), (timer) {
if (!mounted) {
timer.cancel();
return;
}
setState(() {
_displayText = String.fromCharCodes(Iterable.generate(
widget.text.length,
(_) => _chars.codeUnitAt(_random.nextInt(_chars.length)),
));
});
count++;
if (count > 5) {
timer.cancel();
setState(() => _displayText = widget.text);
}
});
}
@override
void dispose() {
_timer?.cancel();
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Text(
_displayText,
style: widget.style,
);
}
}
class AnimatedGridBackground extends StatefulWidget {
const AnimatedGridBackground({super.key});
@override
State<AnimatedGridBackground> createState() => _AnimatedGridBackgroundState();
}
class _AnimatedGridBackgroundState extends State<AnimatedGridBackground>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: const Duration(seconds: 10),
)..repeat();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _controller,
builder: (context, child) {
return CustomPaint(
painter: _BackgroundGridPainter(offset: _controller.value),
size: Size.infinite,
);
},
);
}
}
class _BackgroundGridPainter extends CustomPainter {
final double offset;
_BackgroundGridPainter({required this.offset});
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = AppColors.neonGreen.withOpacity(0.03) // Very faint
..strokeWidth = 1;
double step = 40;
double dy = offset * step;
// Vertical lines
for (double x = 0; x < size.width; x += step) {
canvas.drawLine(Offset(x, 0), Offset(x, size.height), paint);
}
// Horizontal moving lines
for (double y = dy - step; y < size.height; y += step) {
canvas.drawLine(Offset(0, y), Offset(size.width, y), paint);
}
}
@override
bool shouldRepaint(covariant _BackgroundGridPainter oldDelegate) =>
oldDelegate.offset != offset;
}
// --- MODULES ---
class HomeDashboard extends StatelessWidget {
const HomeDashboard({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
const Positioned.fill(child: AnimatedGridBackground()),
SafeArea(
child: Column(
children: [
_buildHeader(),
Expanded(
child: SingleChildScrollView(
padding: const EdgeInsets.all(16),
child: Column(
children: [
FadeInDown(duration: const Duration(milliseconds: 600), child: _buildStatusGrid()),
const SizedBox(height: 16),
FadeInLeft(duration: const Duration(milliseconds: 800), child: _buildActiveSessions()),
const SizedBox(height: 16),
FadeInRight(duration: const Duration(milliseconds: 900), child: _buildCodeLabPreview(context)),
const SizedBox(height: 16),
FadeInUp(duration: const Duration(milliseconds: 1000), child: _buildThreatMonitor()),
],
),
),
),
],
),
),
],
),
);
}
Widget _buildHeader() {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
decoration: const BoxDecoration(
border: Border(bottom: BorderSide(color: AppColors.glassBorder)),
color: AppColors.glassBackground,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Row(
children: [
Icon(Icons.terminal, color: AppColors.neonGreen),
SizedBox(width: 8),
GlitchText('HACKER_OS v1.0', style: TextStyle(fontWeight: FontWeight.bold, letterSpacing: 1.5)),
],
),
Row(
children: [
CyberButton(text: 'LOCK', onTap: (){}, isSecondary: true),
],
)
],
),
);
}
Widget _buildStatusGrid() {
return GridView.count(
shrinkWrap: true,
crossAxisCount: 2,
childAspectRatio: 2.5,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
physics: const NeverScrollableScrollPhysics(),
children: [
_buildStatusCard('CPU LOAD', '12%', AppColors.neonGreen),
_buildStatusCard('MEM USAGE', '84%', AppColors.neonRed),
_buildStatusCard('NET IO', '1.2 GB/s', AppColors.neonCyan),
_buildStatusCard('PROXY', 'SECURE', AppColors.neonGreen),
],
);
}
Widget _buildStatusCard(String label, String value, Color color) {
return CyberContainer(
padding: const EdgeInsets.all(12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(label, style: const TextStyle(fontSize: 10, color: AppColors.comment)),
const SizedBox(height: 4),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(value, style: TextStyle(fontSize: 20, color: color, fontWeight: FontWeight.bold)),
StatusLight(color: color),
],
)
],
),
);
}
Widget _buildActiveSessions() {
return CyberContainer(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text('ACTIVE SESSIONS', style: TextStyle(color: AppColors.neonCyan, letterSpacing: 1.2)),
const SizedBox(height: 12),
_buildSessionRow('Node_Alpha', '192.168.1.4', true),
const Divider(color: AppColors.glassBorder),
_buildSessionRow('Node_Beta', '10.0.0.52', true),
const Divider(color: AppColors.glassBorder),
_buildSessionRow('Node_Gamma', 'DISCONNECTED', false),
],
),
);
}
Widget _buildSessionRow(String name, String ip, bool active) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Icon(Icons.computer, size: 16, color: active ? AppColors.neonGreen : Colors.grey),
const SizedBox(width: 10),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(name, style: const TextStyle(fontWeight: FontWeight.bold)),
Text(ip, style: TextStyle(fontSize: 12, color: active ? AppColors.neonGreen : Colors.grey)),
],
),
],
),
StatusLight(isActive: active, color: active ? AppColors.neonGreen : Colors.red),
],
),
);
}
Widget _buildCodeLabPreview(BuildContext context) {
return CyberContainer(
showGrid: true,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text('LIVE CODE_LAB', style: TextStyle(color: AppColors.neonGreen, letterSpacing: 1.2)),
Icon(Icons.code, color: AppColors.neonGreen.withOpacity(0.5)),
],
),
const SizedBox(height: 12),
Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(color: Colors.black.withOpacity(0.5)),
child: const Text(
'void main() {\n initProtocol(Severity.HIGH);\n bypassFirewall();\n}',
style: TextStyle(fontFamily: 'Courier', fontSize: 12, color: AppColors.terminalText),
),
),
const SizedBox(height: 12),
CyberButton(
text: 'OPEN EDITOR',
onTap: () {
Navigator.pushNamed(context, '/editor');
},
icon: Icons.edit,
),
],
),
);
}
Widget _buildThreatMonitor() {
return CyberContainer(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text('THREAT MONITOR', style: TextStyle(color: AppColors.neonRed, letterSpacing: 1.2)),
const SizedBox(height: 12),
LinearProgressIndicator(value: 0.7, backgroundColor: AppColors.darkGreen, color: AppColors.neonRed),
const SizedBox(height: 4),
const Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('THREAT LEVEL: CRITICAL', style: TextStyle(fontSize: 10, color: AppColors.neonRed)),
Text('70%', style: TextStyle(fontSize: 10, color: AppColors.neonRed)),
],
),
const SizedBox(height: 12),
const Text('Looking for vulnerabilities...', style: TextStyle(fontSize: 12, color: AppColors.terminalText)),
],
),
);
}
}
class CodeEditor extends StatelessWidget {
const CodeEditor({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('MAIN.DART'),
backgroundColor: Colors.transparent,
elevation: 0,
actions: [
IconButton(icon: const Icon(Icons.play_arrow, color: AppColors.neonGreen), onPressed: (){}),
IconButton(icon: const Icon(Icons.save, color: AppColors.neonCyan), onPressed: (){}),
],
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: CyberContainer(
showGrid: true,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Row(
children: [
_buildLineNumbers(),
const SizedBox(width: 16),
const Expanded(
child: Text(
'import "package:cyber_core/exploit.dart";\n\nvoid main() async {\n // Initializing sequence\n await System.breach(Target.GOV_DB);\n \n if (isConnected) {\n download("classified_assets.zip");\n } else {\n forceConnect(Protocol.SSH_OVERRIDE);\n }\n}\n\n// TODO: Obfuscate signature',
style: TextStyle(
fontFamily: 'Courier',
height: 1.5,
fontSize: 14,
color: AppColors.terminalText,
),
),
),
],
),
],
),
),
),
);
}
Widget _buildLineNumbers() {
return Column(
children: List.generate(15, (index) => Text(
'${index + 1}',
style: TextStyle(color: AppColors.neonGreen.withOpacity(0.5), fontFamily: 'Courier', height: 1.5),
)),
);
}
}
class FileSystemView extends StatelessWidget {
const FileSystemView({super.key});
@override
Widget build(BuildContext context) {
return ListView(
padding: const EdgeInsets.all(16),
children: [
_buildFolder('PROJECTS', true),
_buildFile('payload_delivery.dart', '12 KB'),
_buildFile('network_sniffer.dart', '4 KB'),
const Divider(color: AppColors.glassBorder),
_buildFolder('ASSETS', false),
_buildFolder('LOGS', false),
],
);
}
Widget _buildFolder(String name, bool isOpen) {
return ListTile(
leading: Icon(isOpen ? Icons.folder_open : Icons.folder, color: AppColors.neonCyan),
title: Text(name, style: const TextStyle(fontWeight: FontWeight.bold, color: AppColors.neonCyan)),
trailing: isOpen ? const Icon(Icons.arrow_drop_down, color: AppColors.neonCyan) : const Icon(Icons.arrow_right, color: AppColors.neonCyan),
);
}
Widget _buildFile(String name, String size) {
return Padding(
padding: const EdgeInsets.only(left: 32.0),
child: ListTile(
leading: const Icon(Icons.insert_drive_file, color: AppColors.terminalText, size: 18),
title: Text(name, style: const TextStyle(color: AppColors.terminalText)),
trailing: Text(size, style: const TextStyle(color: AppColors.comment, fontSize: 10)),
),
);
}
}
Comments
Post a Comment