Fluxy
E-Commerce Example

Splash Screen

Initial loading screen and app initialization.

Splash Screen

The Splash screen handles the initial loading animation and routing logic based on user authentication state.

Splash View (lib/features/splash/splash.view.dart)

import 'package:flutter/material.dart';
import 'package:fluxy/fluxy.dart';
import 'splash.controller.dart';

class SplashView extends StatelessWidget {
  final SplashController controller;
  const SplashView({super.key, required this.controller});

  @override
  Widget build(BuildContext context) {
    final isDark = Theme.of(context).brightness == Brightness.dark;
    return Fx.scaffold(
      backgroundColor: isDark ? const Color(0xFF121212) : const Color(0xFF0D0D2B), // Deep premium dark blue
      body: Fx.center(
        child: TweenAnimationBuilder(
           tween: Tween<double>(begin: 0.0, end: 1.0),
           duration: const Duration(milliseconds: 1500),
           curve: Curves.easeOutBack,
           builder: (context, value, child) {
             return Transform.scale(
               scale: 0.5 + (value * 0.5),
               child: Opacity(
                 opacity: value.clamp(0.0, 1.0),
                 child: child,
               )
             );
           },
           child: Fx.col(
             mainAxisAlignment: MainAxisAlignment.center,
             crossAxisAlignment: CrossAxisAlignment.center,
             children: [
               // Icon / Logo
               Fx.box()
                 .w(100).h(100)
                 .bg(Colors.blueAccent)
                 .rounded(30)
                 .shadowMedium()
                 .center()
                 .child(const Icon(Icons.shopping_bag_rounded, size: 50, color: Colors.white)),
               
               Fx.gap(24),
               
               // Brand Name
               Fx.text('FLUXY')
                 .font.xl4()
                 .bold()
                 .tw('tracking-widest')
                 .color(Colors.white),
                 
               Fx.gap(8),
               
               // Subtitle
               Fx.text('PREMIUM COMMERCE')
                 .font.sm()
                 .tw('tracking-[0.2em] opacity-70')
                 .color(Colors.white),
             ],
           ),
        ),
      ),
    );
  }
}

Splash Controller (lib/features/splash/splash.controller.dart)

import 'package:fluxy/fluxy.dart';

class SplashController extends FluxController {
  SplashController() {
    _initSplash();
  }

  void _initSplash() async {
    await Future.delayed(const Duration(milliseconds: 2500));
    Fluxy.offAll('/auth');
  }
}

📱 Visual Examples

Splash Screen

On this page