Flutter 3D Futuristic App Using Only One main.dart | Viral Flutter UI Project
Demo :
Click Video 👇👇👇
⭐ FEATURES :
-
Single main.dart file
-
3D Parallax Flutter UI
-
Glassmorphism Design
-
Cyberpunk Theme
-
Fully Responsive
-
High FPS Animation
-
Beginner + Advanced Friendly
Code :
import 'dart:async';
import 'dart:math';
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:google_fonts/google_fonts.dart';
/// FLUTTER 3D VIRAL APP GENERATOR
///
/// INSTRUCTIONS:
/// 1. Create a new Flutter project.
/// 2. Add dependencies to pubspec.yaml:
/// google_fonts: ^6.1.0
/// 3. Replace lib/main.dart with this code.
/// 4. Run `flutter run`.
void main() {
SystemChrome.setSystemUIOverlayStyle(
const SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
statusBarIconBrightness: Brightness.light,
systemNavigationBarColor: Colors.black,
systemNavigationBarIconBrightness: Brightness.light,
),
);
runApp(const ViralApp());
}
class ViralApp extends StatelessWidget {
const ViralApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'NitroGen 3D',
theme: ThemeData(
useMaterial3: true,
brightness: Brightness.dark,
scaffoldBackgroundColor: const Color(0xFF030303),
primaryColor: const Color(0xFF00F0FF),
colorScheme: const ColorScheme.dark(
primary: Color(0xFF00F0FF),
secondary: Color(0xFF7000FF),
surface: Color(0xFF0A0A0A),
background: Color(0xFF030303),
),
textTheme: GoogleFonts.outfitTextTheme(ThemeData.dark().textTheme),
),
home: const HomeScreen(),
);
}
}
class HomeScreen extends StatefulWidget {
const HomeScreen({super.key});
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> with TickerProviderStateMixin {
// Mouse position for 3D parallax
Offset _mousePos = Offset.zero;
// Dynamic Content Data
final List<Map<String, String>> _ideas = [
{
"title": "Quantum Task Manager",
"desc": "A decentralized AI-driven task manager that predicts your workload using blockchain.",
"tech": "Flutter • Rust • Solana • AI"
},
{
"title": "Holo-Health Monitor",
"desc": "AR-based health tracking app that visualizes body vitals in real-time 3D overlay.",
"tech": "Unity • Flutter • ARKit • Python"
},
{
"title": "Cyber-Security Drone",
"desc": "Autonomous drone software for patrolling server farms with thermal recognition.",
"tech": "C++ • ROS • Flutter Control • OpenCV"
},
{
"title": "Dreamscape VR Social",
"desc": "A social network where users meet inside lucid dreams generated by generative AI.",
"tech": "Unreal Engine • Dart • Web3 • GenAI"
},
{
"title": "Neuro-Link Code Editor",
"desc": "IDE that allows coding via brain-computer interface signals for faster development.",
"tech": "Python • BCI SDK • Electron • Flutter"
},
];
int _currentIndex = 0;
bool _isGenerating = false;
void _generateIdea() async {
setState(() => _isGenerating = true);
await Future.delayed(const Duration(milliseconds: 1500)); // Longer for dramatic effect
setState(() {
_currentIndex = Random().nextInt(_ideas.length);
_isGenerating = false;
});
}
void _onHover(PointerEvent details, Size size) {
final x = (details.position.dx - size.width / 2) / (size.width / 2);
final y = (details.position.dy - size.height / 2) / (size.height / 2);
setState(() {
_mousePos = Offset(x, y);
});
}
void _onExit(PointerEvent details) {
setState(() {
_mousePos = Offset.zero;
});
}
@override
Widget build(BuildContext context) {
final Size size = MediaQuery.of(context).size;
return Scaffold(
body: MouseRegion(
onHover: (details) => _onHover(details, size),
onExit: _onExit,
child: Stack(
children: [
// 1. Deep Space 3D Particle Field
const _StarField3D(),
// 2. Main Content with 3D Tilt
Center(
child: _PerspectiveCard(
mousePos: _mousePos,
isGenerating: _isGenerating,
child: Container(
constraints: const BoxConstraints(maxWidth: 500),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// 3D Text Title
_NeonTitle(mousePos: _mousePos),
const SizedBox(height: 40),
// Glass Card Content
GlassCard(
borderGradient: _isGenerating
? [Colors.blueAccent, Colors.purpleAccent]
: [Colors.white.withOpacity(0.2), Colors.white.withOpacity(0.1)],
child: Column(
children: [
// Header Icons
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
_HoloIcon(
icon: Icons.hub,
color: const Color(0xFF00F0FF),
isSpinning: _isGenerating
),
_HoloIcon(
icon: Icons.wifi_tethering,
color: _isGenerating ? Colors.purpleAccent : Colors.white38,
),
],
),
const SizedBox(height: 30),
// Content Switcher
AnimatedSwitcher(
duration: const Duration(milliseconds: 600),
switchInCurve: Curves.easeOutBack,
switchOutCurve: Curves.easeInBack,
transitionBuilder: (child, animation) {
return FadeTransition(
opacity: animation,
child: SlideTransition(
position: Tween<Offset>(
begin: const Offset(0, 0.2),
end: Offset.zero,
).animate(animation),
child: ScaleTransition(
scale: Tween<double>(begin: 0.9, end: 1.0).animate(animation),
child: child,
),
),
);
},
child: _isGenerating
? const _HoloScanner()
: _ProjectView(
key: ValueKey<int>(_currentIndex),
data: _ideas[_currentIndex],
),
),
const SizedBox(height: 40),
// 3D Button
_Cyber3DButton(
onTap: _generateIdea,
label: "GENERATE NEURAL LINK",
isActive: !_isGenerating,
),
],
),
),
const SizedBox(height: 30),
Text(
"SYSTEM OPTIMAL • 60 FPS",
style: GoogleFonts.shareTechMono(
color: Colors.white24,
fontSize: 10,
letterSpacing: 2
),
),
],
),
),
),
),
],
),
),
);
}
}
// --- 3D & ANIMATION COMPONENTS ---
class _PerspectiveCard extends StatelessWidget {
final Widget child;
final Offset mousePos;
final bool isGenerating;
const _PerspectiveCard({
required this.child,
required this.mousePos,
required this.isGenerating,
});
@override
Widget build(BuildContext context) {
// Limits the tilt angle
final double tilt = isGenerating ? 0.05 : 0.02;
return TweenAnimationBuilder(
duration: const Duration(milliseconds: 200),
curve: Curves.easeOut,
tween: Tween<Offset>(begin: Offset.zero, end: mousePos),
builder: (context, Offset offset, child) {
return Transform(
transform: Matrix4.identity()
..setEntry(3, 2, 0.001) // Perspective
..rotateX(-offset.dy * tilt) // Note the negative sign for natural feel
..rotateY(offset.dx * tilt),
alignment: Alignment.center,
child: child,
);
},
child: child,
);
}
}
class _NeonTitle extends StatelessWidget {
final Offset mousePos;
const _NeonTitle({required this.mousePos});
@override
Widget build(BuildContext context) {
return Transform.translate(
offset: Offset(mousePos.dx * -10, mousePos.dy * -10),
child: Stack(
children: [
// Shadow/Glow behind
Text(
"NITROGEN 3D",
style: GoogleFonts.orbitron(
fontSize: 42,
fontWeight: FontWeight.w900,
letterSpacing: 8,
foreground: Paint()
..style = PaintingStyle.stroke
..strokeWidth = 3
..color = const Color(0xFF00F0FF).withOpacity(0.3)
..maskFilter = const MaskFilter.blur(BlurStyle.normal, 10),
),
),
// Main Text
Text(
"NITROGEN 3D",
style: GoogleFonts.orbitron(
fontSize: 42,
fontWeight: FontWeight.w900,
letterSpacing: 8,
color: Colors.white,
shadows: [
BoxShadow(
color: Colors.blueAccent.withOpacity(0.8),
blurRadius: 15,
spreadRadius: 10,
)
]
),
),
],
),
);
}
}
class _StarField3D extends StatefulWidget {
const _StarField3D();
@override
State<_StarField3D> createState() => _StarField3DState();
}
class _StarField3DState extends State<_StarField3D> with SingleTickerProviderStateMixin {
late AnimationController _controller;
final List<_Star> _stars = [];
@override
void initState() {
super.initState();
_controller = AnimationController(vsync: this, duration: const Duration(seconds: 10))..repeat();
for (int i = 0; i < 100; i++) {
_stars.add(_Star());
}
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _controller,
builder: (context, child) {
return CustomPaint(
painter: _StarFieldPainter(_stars, _controller.value),
size: MediaQuery.of(context).size,
);
},
);
}
}
class _Star {
double x = Random().nextDouble() * 2 - 1;
double y = Random().nextDouble() * 2 - 1;
double z = Random().nextDouble(); // Depth (0 = far, 1 = near)
double speed = Random().nextDouble() * 0.02 + 0.005;
}
class _StarFieldPainter extends CustomPainter {
final List<_Star> stars;
final double animationValue;
_StarFieldPainter(this.stars, this.animationValue);
@override
void paint(Canvas canvas, Size size) {
final center = size.center(Offset.zero);
final paint = Paint()..color = Colors.white;
for (var star in stars) {
// Move star towards camera (increase Z)
star.z -= star.speed;
if (star.z <= 0) {
star.z = 1.0;
star.x = Random().nextDouble() * 2 - 1;
star.y = Random().nextDouble() * 2 - 1;
}
// Project 3D to 2D
final depth = star.z;
final k = 128.0 / depth;
final px = star.x * k + center.dx;
final py = star.y * k + center.dy;
if (px >= 0 && px <= size.width && py >= 0 && py <= size.height) {
final radius = (1 - depth) * 2.0;
final opacity = (1 - depth).clamp(0.0, 1.0);
paint.color = Colors.white.withOpacity(opacity);
// Draw star
canvas.drawCircle(Offset(px, py), radius, paint);
// Draw trail if moving fast
if (radius > 1.5) {
paint.color = Colors.blueAccent.withOpacity(opacity * 0.5);
canvas.drawCircle(Offset(px, py), radius * 2, paint);
}
}
}
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}
class GlassCard extends StatelessWidget {
final Widget child;
final List<Color> borderGradient;
const GlassCard({
super.key,
required this.child,
this.borderGradient = const [Colors.white24, Colors.white10],
});
@override
Widget build(BuildContext context) {
return ClipRRect(
borderRadius: BorderRadius.circular(24),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 12, sigmaY: 12),
child: Container(
padding: const EdgeInsets.all(32),
decoration: BoxDecoration(
color: const Color(0xFF0F0F0F).withOpacity(0.7),
borderRadius: BorderRadius.circular(24),
border: Border.all(color: Colors.transparent),
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
const Color(0xFF222222).withOpacity(0.6),
const Color(0xFF050505).withOpacity(0.6),
],
),
),
child: Container(
// Inner gradient border trick
decoration: BoxDecoration(
gradient: LinearGradient(
colors: borderGradient,
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(22),
),
padding: const EdgeInsets.all(1), // Border width
child: Container(
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.5), // Inner fill
borderRadius: BorderRadius.circular(22),
),
padding: const EdgeInsets.all(24),
child: child,
),
),
),
),
);
}
}
class _HoloScanner extends StatefulWidget {
const _HoloScanner();
@override
State<_HoloScanner> createState() => _HoloScannerState();
}
class _HoloScannerState extends State<_HoloScanner> with SingleTickerProviderStateMixin {
late AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(vsync: this, duration: const Duration(seconds: 1))..repeat(reverse: true);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return SizedBox(
height: 150,
width: double.infinity,
child: Stack(
alignment: Alignment.center,
children: [
// Base Scan Text
Text(
"ANALYZING NEURAL PATHWAYS",
style: GoogleFonts.robotoMono(
color: const Color(0xFF00F0FF).withOpacity(0.5),
fontSize: 12,
letterSpacing: 2,
),
),
// Moving Scan Line
AnimatedBuilder(
animation: _controller,
builder: (context, child) {
return Positioned(
top: _controller.value * 140, // Move up and down
left: 0,
right: 0,
child: Container(
height: 2,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: const Color(0xFF00F0FF),
blurRadius: 10,
spreadRadius: 2,
)
],
color: Colors.white,
),
),
);
},
),
// Grid Effect overlay
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
const Color(0xFF00F0FF).withOpacity(0.0),
const Color(0xFF00F0FF).withOpacity(0.1),
const Color(0xFF00F0FF).withOpacity(0.0),
],
stops: [0.0, 0.5, 1.0]
)
),
),
],
),
);
}
}
class _HoloIcon extends StatefulWidget {
final IconData icon;
final Color color;
final bool isSpinning;
const _HoloIcon({required this.icon, required this.color, this.isSpinning = false});
@override
State<_HoloIcon> createState() => _HoloIconState();
}
class _HoloIconState extends State<_HoloIcon> with SingleTickerProviderStateMixin {
late AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(vsync: this, duration: const Duration(seconds: 2));
if (widget.isSpinning) _controller.repeat();
}
@override
void didUpdateWidget(_HoloIcon oldWidget) {
super.didUpdateWidget(oldWidget);
if (widget.isSpinning && !oldWidget.isSpinning) {
_controller.repeat();
} else if (!widget.isSpinning && oldWidget.isSpinning) {
_controller.stop();
_controller.animateTo(0);
}
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _controller,
builder: (context, child) {
return Transform(
alignment: Alignment.center,
transform: Matrix4.identity()
..rotateZ(_controller.value * 2 * pi)
..rotateY(_controller.value * 2 * pi),
child: Icon(
widget.icon,
color: widget.color,
size: 24,
shadows: [
Shadow(color: widget.color.withOpacity(0.8), blurRadius: 10)
],
),
);
},
);
}
}
class _Cyber3DButton extends StatefulWidget {
final VoidCallback onTap;
final String label;
final bool isActive;
const _Cyber3DButton({
required this.onTap,
required this.label,
this.isActive = true,
});
@override
State<_Cyber3DButton> createState() => _Cyber3DButtonState();
}
class _Cyber3DButtonState extends State<_Cyber3DButton> {
bool _isPressed = false;
bool _isHovered = false;
@override
Widget build(BuildContext context) {
return MouseRegion(
onEnter: (_) => setState(() => _isHovered = true),
onExit: (_) => setState(() => _isHovered = false),
cursor: widget.isActive ? SystemMouseCursors.click : SystemMouseCursors.forbidden,
child: GestureDetector(
onTapDown: (_) => setState(() => _isPressed = true),
onTapUp: (_) {
setState(() => _isPressed = false);
if (widget.isActive) widget.onTap();
},
onTapCancel: () => setState(() => _isPressed = false),
child: AnimatedContainer(
duration: const Duration(milliseconds: 100),
height: 60,
transform: Matrix4.identity()
..scale(_isPressed ? 0.95 : (_isHovered ? 1.05 : 1.0)),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
gradient: LinearGradient(
colors: widget.isActive
? [const Color(0xFF00F0FF), const Color(0xFF0066FF)]
: [Colors.grey.shade800, Colors.grey.shade900],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
boxShadow: widget.isActive
? [
BoxShadow(
color: const Color(0xFF00F0FF).withOpacity(_isHovered ? 0.8 : 0.4),
blurRadius: _isHovered ? 25 : 10,
offset: const Offset(0, 5),
),
]
: [],
),
child: Stack(
alignment: Alignment.center,
children: [
// Glare effect
if (widget.isActive && _isHovered)
Positioned(
top: 0,
left: 0,
right: 0,
height: 30,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Colors.white.withOpacity(0.3), Colors.transparent]
),
borderRadius: const BorderRadius.vertical(top: Radius.circular(16)),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
if (widget.isActive)
const Icon(Icons.rocket_launch, color: Colors.white),
if (widget.isActive) const SizedBox(width: 12),
Text(
widget.label,
style: GoogleFonts.orbitron(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Colors.white,
letterSpacing: 2,
),
),
],
),
],
),
),
),
);
}
}
class _ProjectView extends StatelessWidget {
final Map<String, String> data;
const _ProjectView({super.key, required this.data});
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
data['title']!.toUpperCase(),
style: GoogleFonts.poppins(
fontSize: 28,
fontWeight: FontWeight.w800,
color: Colors.white,
height: 1.2,
),
),
const SizedBox(height: 16),
Text(
data['desc']!,
style: GoogleFonts.rajdhani(
fontSize: 18,
fontWeight: FontWeight.w500,
color: Colors.white70,
height: 1.5,
),
),
const SizedBox(height: 24),
Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
decoration: BoxDecoration(
color: Colors.black38,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: const Color(0xFF00F0FF).withOpacity(0.3)),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.terminal, color: Color(0xFF00F0FF), size: 18),
const SizedBox(width: 10),
Flexible(
child: Text(
data['tech']!,
style: GoogleFonts.firaCode(
fontSize: 13,
color: const Color(0xFF00F0FF),
fontWeight: FontWeight.w600,
),
),
),
],
),
),
],
);
}
}
Comments
Post a Comment