Zenith Protocol – Build a Futuristic Hacker Focus System UI in Flutter (Single File)
Demo :
Click Video 👇👇👇
✨ Features :
-
Single
main.dartarchitecture -
Responsive on all screens
-
Cyberpunk HUD design
-
Focus lock simulation
-
Animation-heavy UI
-
No backend / safe demo
Code :
import 'dart:async';
import 'dart:math' as math;
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
SystemChrome.setSystemUIOverlayStyle(
const SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
statusBarIconBrightness: Brightness.light,
systemNavigationBarColor: Colors.black,
),
);
runApp(const FuzzuTechApp());
}
class FuzzuTechApp extends StatelessWidget {
const FuzzuTechApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'ZENITH OS',
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: Colors.black,
colorScheme: const ColorScheme.dark(
primary: Colors.cyanAccent,
secondary: Colors.purpleAccent,
surface: Color(0xFF050505),
),
textTheme: const TextTheme(
displayLarge: TextStyle(fontFamily: 'Courier', fontWeight: FontWeight.bold),
bodyLarge: TextStyle(fontFamily: 'Courier'),
bodyMedium: TextStyle(fontFamily: 'Courier'),
),
),
home: const ZenithCyberDeck(),
);
}
}
class ZenithCyberDeck extends StatefulWidget {
const ZenithCyberDeck({super.key});
@override
State<ZenithCyberDeck> createState() => _ZenithCyberDeckState();
}
class _ZenithCyberDeckState extends State<ZenithCyberDeck> with TickerProviderStateMixin {
late AnimationController _pulseController;
late AnimationController _rotationController;
late AnimationController _glitchController;
// Simulation State
bool _isFocusModeActive = false;
final int _focusDuration = 25 * 60; // 25 minutes
int _currentTimer = 25 * 60;
Timer? _timer;
double _neuralSync = 0.0;
@override
void initState() {
super.initState();
_pulseController = AnimationController(
vsync: this,
duration: const Duration(seconds: 2),
)..repeat(reverse: true);
_rotationController = AnimationController(
vsync: this,
duration: const Duration(seconds: 10),
)..repeat();
_glitchController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 200),
);
// Simulate Neural Sync Loading
Future.delayed(const Duration(seconds: 1), () {
_startNeuralSimulation();
});
}
void _startNeuralSimulation() {
Timer.periodic(const Duration(milliseconds: 100), (timer) {
if (!mounted) {
timer.cancel();
return;
}
setState(() {
_neuralSync = (_neuralSync + 0.01) % 1.0;
});
});
}
void _toggleFocusProtocol() {
// Haptic and visual feedback
HapticFeedback.heavyImpact();
_glitchController.forward(from: 0.0);
setState(() {
_isFocusModeActive = !_isFocusModeActive;
});
if (_isFocusModeActive) {
_currentTimer = _focusDuration;
_timer = Timer.periodic(const Duration(seconds: 1), (timer) {
setState(() {
if (_currentTimer > 0) {
_currentTimer--;
} else {
_completeProtocol();
}
});
});
} else {
_timer?.cancel();
}
}
void _completeProtocol() {
_timer?.cancel();
_isFocusModeActive = false;
// Success animation logic here
}
@override
void dispose() {
_pulseController.dispose();
_rotationController.dispose();
_glitchController.dispose();
_timer?.cancel();
super.dispose();
}
String get _timerString {
final minutes = (_currentTimer ~/ 60).toString().padLeft(2, '0');
final seconds = (_currentTimer % 60).toString().padLeft(2, '0');
return '$minutes:$seconds';
}
@override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
final isPortrait = size.height > size.width;
return Scaffold(
body: Stack(
children: [
// 1. Background Grid & Particles
Positioned.fill(
child: CustomPaint(
painter: CyberGridPainter(
animationValue: _rotationController.value,
),
),
),
// 2. Main Interface
Center(
child: SingleChildScrollView( // For responsiveness
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// Title
AnimatedBuilder(
animation: _glitchController,
builder: (context, child) {
double offset = 0;
if (_glitchController.isAnimating) {
offset = math.Random().nextDouble() * 5;
}
return Transform.translate(
offset: Offset(offset, 0),
child: Text(
"ZENITH PROTOCOL",
style: TextStyle(
fontSize: isPortrait ? 24 : 32,
letterSpacing: 8,
color: Colors.cyanAccent,
shadows: [
Shadow(color: Colors.blue, blurRadius: 10),
Shadow(color: Colors.white, blurRadius: 2),
],
),
),
);
},
),
const SizedBox(height: 10),
Text(
_isFocusModeActive ? "SYSTEM LOCKED: DO NOT DISTURB" : "STATUS: IDLE",
style: TextStyle(
color: _isFocusModeActive ? Colors.redAccent : Colors.grey,
letterSpacing: 2,
),
),
const SizedBox(height: 40),
// The HUD Core
SizedBox(
height: 300,
width: 300,
child: Stack(
alignment: Alignment.center,
children: [
// Rotating Rings
AnimatedBuilder(
animation: _rotationController,
builder: (context, child) {
return Transform.rotate(
angle: _rotationController.value * 2 * math.pi,
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.cyanAccent.withValues(alpha: 0.3),
width: 1,
),
),
),
);
},
),
AnimatedBuilder(
animation: _rotationController,
builder: (context, child) {
return Transform.rotate(
angle: -_rotationController.value * 2 * math.pi,
child: Container(
width: 260,
height: 260,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.purpleAccent.withValues(alpha: 0.3),
width: 2,
style: BorderStyle.none,
),
),
child: CustomPaint(
painter: ArcPainter(),
),
),
);
},
),
// Center Timer/Button
GestureDetector(
onTap: _toggleFocusProtocol,
child: AnimatedContainer(
duration: const Duration(milliseconds: 300),
width: 200,
height: 200,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.black,
boxShadow: [
BoxShadow(
color: _isFocusModeActive
? Colors.redAccent.withValues(alpha: 0.4)
: Colors.cyanAccent.withValues(alpha: 0.2),
blurRadius: 20,
spreadRadius: 5,
),
],
border: Border.all(
color: _isFocusModeActive ? Colors.redAccent : Colors.cyanAccent,
width: 2,
),
),
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
_isFocusModeActive ? Icons.lock : Icons.power_settings_new,
color: _isFocusModeActive ? Colors.redAccent : Colors.cyanAccent,
size: 40,
),
const SizedBox(height: 10),
Text(
_timerString,
style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.bold,
color: Colors.white,
fontFamily: 'Courier',
),
),
Text(
_isFocusModeActive ? "ACTIVE" : "START",
style: TextStyle(
color: _isFocusModeActive ? Colors.redAccent : Colors.cyanAccent,
letterSpacing: 2,
),
),
],
),
),
),
],
),
),
const SizedBox(height: 50),
// Neural Sync Stats
Padding(
padding: const EdgeInsets.symmetric(horizontal: 40),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text("NEURAL SYNC", style: TextStyle(color: Colors.cyanAccent)),
Text("${(_neuralSync * 100).toInt()}%", style: const TextStyle(color: Colors.cyanAccent)),
],
),
const SizedBox(height: 5),
LinearProgressIndicator(
value: _neuralSync,
backgroundColor: Colors.grey[900],
valueColor: AlwaysStoppedAnimation<Color>(
Color.lerp(Colors.cyanAccent, Colors.purpleAccent, _neuralSync)!,
),
),
const SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
_StatItem(label: "CPU", value: "34%"),
_StatItem(label: "RAM", value: "12GB"),
_StatItem(label: "NET", value: "SECURE"),
],
),
],
),
),
],
),
),
),
// 3. Scanlines Overlay (Optional vintage effect)
IgnorePointer(
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.black.withValues(alpha: 0.1),
Colors.transparent,
Colors.black.withValues(alpha: 0.1),
],
stops: const [0.0, 0.5, 1.0],
),
),
),
),
],
),
);
}
}
class _StatItem extends StatelessWidget {
final String label;
final String value;
const _StatItem({required this.label, required this.value});
@override
Widget build(BuildContext context) {
return Column(
children: [
Text(value, style: const TextStyle(color: Colors.white, fontSize: 18, fontWeight: FontWeight.bold)),
Text(label, style: TextStyle(color: Colors.grey[600], fontSize: 12)),
],
);
}
}
// Painters for high-tech look
class CyberGridPainter extends CustomPainter {
final double animationValue;
CyberGridPainter({required this.animationValue});
@override
void paint(Canvas canvas, Size size) {
final Paint paint = Paint()
..color = Colors.cyan.withValues(alpha: 0.1)
..strokeWidth = 1;
// Draw Grid
double gridSize = 40;
for (double i = 0; i < size.width; i += gridSize) {
canvas.drawLine(Offset(i, 0), Offset(i, size.height), paint);
}
for (double i = 0; i < size.height; i += gridSize) {
canvas.drawLine(Offset(0, i), Offset(size.width, i), paint);
}
// Draw Random Particles
final random = math.Random(42); // Seed for consistency
final particlePaint = Paint()
..color = Colors.purpleAccent.withValues(alpha: 0.4)
..style = PaintingStyle.fill;
for(int i=0; i< 20; i++) {
double x = random.nextDouble() * size.width;
double y = (random.nextDouble() * size.height + animationValue * 100) % size.height;
canvas.drawCircle(Offset(x, y), 2, particlePaint);
}
}
@override
bool shouldRepaint(covariant CyberGridPainter oldDelegate) {
return oldDelegate.animationValue != animationValue;
}
}
class ArcPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = Colors.purpleAccent
..strokeWidth = 3
..style = PaintingStyle.stroke
..strokeCap = StrokeCap.round;
final rect = Rect.fromLTWH(0, 0, size.width, size.height);
// Draw interrupted arcs to look mechanical
canvas.drawArc(rect, 0, math.pi / 2, false, paint);
canvas.drawArc(rect, math.pi, math.pi / 3, false, paint);
canvas.drawArc(rect, 1.5 * math.pi, math.pi / 6, false, paint);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}
Comments
Post a Comment