Flutter Cyber Command Center Dashboard – Real Security Tool UI (Full Source Code)
Demo :
Click Video πππ
✨ Features
• Live animated stats
• Hacker-style cyber UI
• Desktop ready
• Real SOC dashboard design
• Full Flutter source code
• Perfect for college & portfolio
Code :
import 'dart:math';
import 'package:flutter/material.dart';
void main() => runApp(const CommandCenter());
class CommandCenter extends StatelessWidget {
const CommandCenter({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'SYSTEM COMMAND CENTER',
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: const Color(0xFF0A0F1E),
),
home: const Dashboard(),
);
}
}
class Dashboard extends StatefulWidget {
const Dashboard({super.key});
@override
State<Dashboard> createState() => _DashboardState();
}
class _DashboardState extends State<Dashboard> with TickerProviderStateMixin {
late AnimationController pulse;
double integrity = 92;
int access = 12;
int lockedFiles = 43;
@override
void initState() {
super.initState();
pulse = AnimationController(vsync: this, duration: const Duration(seconds: 2))
..repeat(reverse: true);
}
Widget statCard(String title, String value, IconData icon, Color color) {
return Container(
padding: const EdgeInsets.all(18),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
gradient: LinearGradient(colors: [color.withOpacity(.8), color.withOpacity(.2)]),
boxShadow: [BoxShadow(color: color.withOpacity(.4), blurRadius: 20)],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(icon, size: 32),
const SizedBox(height: 12),
Text(title, style: const TextStyle(color: Colors.white70)),
Text(value, style: const TextStyle(fontSize: 28, fontWeight: FontWeight.bold)),
],
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("SYSTEM COMMAND CENTER"),
centerTitle: true,
backgroundColor: Colors.transparent,
elevation: 0,
),
body: Padding(
padding: const EdgeInsets.all(20),
child: Column(
children: [
ScaleTransition(
scale: Tween(begin: .95, end: 1.05).animate(pulse),
child: Container(
padding: const EdgeInsets.all(25),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
gradient: const LinearGradient(colors: [Color(0xFF00E5FF), Color(0xFF1A237E)]),
boxShadow: const [BoxShadow(color: Colors.cyan, blurRadius: 30)],
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(crossAxisAlignment: CrossAxisAlignment.start, children: const [
Text("SECURITY STATUS", style: TextStyle(fontSize: 12)),
Text("SYSTEM LOCKED", style: TextStyle(fontSize: 26, fontWeight: FontWeight.bold))
]),
const Icon(Icons.lock, size: 50),
],
),
),
),
const SizedBox(height: 20),
Expanded(
child: GridView.count(
crossAxisCount: 2,
crossAxisSpacing: 15,
mainAxisSpacing: 15,
children: [
statCard("Locked Files", "$lockedFiles", Icons.lock_outline, Colors.orange),
statCard("Access Attempts", "$access", Icons.warning, Colors.red),
statCard("Integrity Score", "$integrity%", Icons.shield, Colors.green),
statCard("Threat Level", "LOW", Icons.security, Colors.cyan),
],
),
),
Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(18),
color: const Color(0xFF111B3D),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text("INCIDENT TIMELINE", style: TextStyle(fontWeight: FontWeight.bold)),
Divider(color: Colors.cyan),
Text("• 10:21 PM – Unauthorized Access Blocked"),
Text("• 09:50 PM – File Modified"),
Text("• 08:12 PM – USB Device Removed"),
],
),
)
],
),
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.cyan,
onPressed: () {
setState(() {
lockedFiles += Random().nextInt(3);
access += Random().nextInt(4);
integrity = max(85, integrity - Random().nextDouble());
});
},
child: const Icon(Icons.refresh),
),
);
}
}
Comments
Post a Comment