การสร้าง UI รุ่นใหม่ใน Flutter

import 'package:flutter/material.dart';  import '../assets.dart';  class TitleScreen extends StatelessWidget {   const TitleScreen({super.key});    @override   Widget build(BuildContext context) {     return Scaffold(       backgroundColor: Colors.black,       body: Center(         child: Stack(           children: [             /// Bg-Base             Image.asset(AssetPaths.titleBgBase),              /// Bg-Receive             Image.asset(AssetPaths.titleBgReceive),              /// Mg-Base             Image.asset(AssetPaths.titleMgBase),              /// Mg-Receive             Image.asset(AssetPaths.titleMgReceive),              /// Mg-Emit             Image.asset(AssetPaths.titleMgEmit),              /// Fg-Rocks             Image.asset(AssetPaths.titleFgBase),              /// Fg-Receive             Image.asset(AssetPaths.titleFgReceive),              /// Fg-Emit             Image.asset(AssetPaths.titleFgEmit),           ],         ),       ),     );   } } 

import 'dart:io' show Platform;  import 'package:flutter/foundation.dart' show kIsWeb; import 'package:flutter/material.dart'; import 'package:window_size/window_size.dart';                                                           // Remove 'styles.dart' import import 'title_screen/title_screen.dart';                  // Add this import   void main() {   if (!kIsWeb && (Platform.isWindows || Platform.isLinux || Platform.isMacOS)) {     WidgetsFlutterBinding.ensureInitialized();     setWindowMinSize(const Size(800, 500));   }   runApp(const NextGenApp()); }  class NextGenApp extends StatelessWidget {   const NextGenApp({super.key});    @override   Widget build(BuildContext context) {     return MaterialApp(       themeMode: ThemeMode.dark,       darkTheme: ThemeData(brightness: Brightness.dark),       home: const TitleScreen(),                          // Replace with this widget     );   } } 

import 'package:flutter/material.dart';  import '../assets.dart';  class TitleScreen extends StatelessWidget {   const TitleScreen({super.key});    @override   Widget build(BuildContext context) {     return Scaffold(       backgroundColor: Colors.black,       body: Center(         child: Stack(           children: [             /// Bg-Base             Image.asset(AssetPaths.titleBgBase),              /// Bg-Receive             Image.asset(AssetPaths.titleBgReceive),              /// Mg-Base             Image.asset(AssetPaths.titleMgBase),              /// Mg-Receive             Image.asset(AssetPaths.titleMgReceive),              /// Mg-Emit             Image.asset(AssetPaths.titleMgEmit),              /// Fg-Rocks             Image.asset(AssetPaths.titleFgBase),              /// Fg-Receive             Image.asset(AssetPaths.titleFgReceive),              /// Fg-Emit             Image.asset(AssetPaths.titleFgEmit),           ],         ),       ),     );   } }  class _LitImage extends StatelessWidget {                 // Add from here...   const _LitImage({     required this.color,     required this.imgSrc,     required this.lightAmt,   });   final Color color;   final String imgSrc;   final double lightAmt;    @override   Widget build(BuildContext context) {     final hsl = HSLColor.fromColor(color);     return Image.asset(       imgSrc,       color: hsl.withLightness(hsl.lightness * lightAmt).toColor(),       colorBlendMode: BlendMode.modulate,     );   } }                                                         // to here. 

import 'package:flutter/material.dart';  import '../assets.dart'; import '../styles.dart';                                  // Add this import  class TitleScreen extends StatelessWidget {   const TitleScreen({super.key});    final _finalReceiveLightAmt = 0.7;                      // Add this attribute   final _finalEmitLightAmt = 0.5;                         // And this attribute    @override   Widget build(BuildContext context) {     final orbColor = AppColors.orbColors[0];              // Add this final variable     final emitColor = AppColors.emitColors[0];            // And this one      return Scaffold(       backgroundColor: Colors.black,       body: Center(         child: Stack(           children: [             /// Bg-Base             Image.asset(AssetPaths.titleBgBase),              /// Bg-Receive             _LitImage(                                    // Modify from here...               color: orbColor,               imgSrc: AssetPaths.titleBgReceive,               lightAmt: _finalReceiveLightAmt,             ),                                            // to here.              /// Mg-Base             _LitImage(                                    // Modify from here...               imgSrc: AssetPaths.titleMgBase,               color: orbColor,               lightAmt: _finalReceiveLightAmt,             ),                                            // to here.              /// Mg-Receive             _LitImage(                                    // Modify from here...               imgSrc: AssetPaths.titleMgReceive,               color: orbColor,               lightAmt: _finalReceiveLightAmt,             ),                                            // to here.              /// Mg-Emit             _LitImage(                                    // Modify from here...               imgSrc: AssetPaths.titleMgEmit,               color: emitColor,               lightAmt: _finalEmitLightAmt,             ),                                            // to here.              /// Fg-Rocks             Image.asset(AssetPaths.titleFgBase),              /// Fg-Receive             _LitImage(                                    // Modify from here...               imgSrc: AssetPaths.titleFgReceive,               color: orbColor,               lightAmt: _finalReceiveLightAmt,             ),                                            // to here.              /// Fg-Emit             _LitImage(                                    // Modify from here...               imgSrc: AssetPaths.titleFgEmit,               color: emitColor,               lightAmt: _finalEmitLightAmt,             ),                                            // to here.           ],         ),       ),     );   } }  class _LitImage extends StatelessWidget {   const _LitImage({     required this.color,     required this.imgSrc,     required this.lightAmt,   });   final Color color;   final String imgSrc;   final double lightAmt;    @override   Widget build(BuildContext context) {     final hsl = HSLColor.fromColor(color);     return Image.asset(       imgSrc,       color: hsl.withLightness(hsl.lightness * lightAmt).toColor(),       colorBlendMode: BlendMode.modulate,     );   } } 

import 'package:extra_alignments/extra_alignments.dart'; import 'package:flutter/material.dart'; import 'package:gap/gap.dart';  import '../assets.dart'; import '../common/ui_scaler.dart'; import '../styles.dart';  class TitleScreenUi extends StatelessWidget {   const TitleScreenUi({     super.key,   });   @override   Widget build(BuildContext context) {     return const Padding(       padding: EdgeInsets.symmetric(vertical: 40, horizontal: 50),       child: Stack(         children: [           /// Title Text           TopLeft(             child: UiScaler(               alignment: Alignment.topLeft,               child: _TitleText(),             ),           ),         ],       ),     );   } }  class _TitleText extends StatelessWidget {   const _TitleText();    @override   Widget build(BuildContext context) {     return Column(       mainAxisSize: MainAxisSize.min,       crossAxisAlignment: CrossAxisAlignment.start,       children: [         const Gap(20),         Row(           mainAxisSize: MainAxisSize.min,           children: [             Transform.translate(               offset: Offset(-(TextStyles.h1.letterSpacing! * .5), 0),               child: Text('OUTPOST', style: TextStyles.h1),             ),             Image.asset(AssetPaths.titleSelectedLeft, height: 65),             Text('57', style: TextStyles.h2),             Image.asset(AssetPaths.titleSelectedRight, height: 65),           ],         ),         Text('INTO THE UNKNOWN', style: TextStyles.h3),       ],     );   } } 

import 'package:flutter/material.dart';  import '../assets.dart'; import '../styles.dart'; import 'title_screen_ui.dart';                            // Add this import  class TitleScreen extends StatelessWidget {   const TitleScreen({super.key});    final _finalReceiveLightAmt = 0.7;   final _finalEmitLightAmt = 0.5;    @override   Widget build(BuildContext context) {     final orbColor = AppColors.orbColors[0];     final emitColor = AppColors.emitColors[0];      return Scaffold(       backgroundColor: Colors.black,       body: Center(         child: Stack(           children: [             /// Bg-Base             Image.asset(AssetPaths.titleBgBase),              /// Bg-Receive             _LitImage(               color: orbColor,               imgSrc: AssetPaths.titleBgReceive,               lightAmt: _finalReceiveLightAmt,             ),              /// Mg-Base             _LitImage(               imgSrc: AssetPaths.titleMgBase,               color: orbColor,               lightAmt: _finalReceiveLightAmt,             ),              /// Mg-Receive             _LitImage(               imgSrc: AssetPaths.titleMgReceive,               color: orbColor,               lightAmt: _finalReceiveLightAmt,             ),              /// Mg-Emit             _LitImage(               imgSrc: AssetPaths.titleMgEmit,               color: emitColor,               lightAmt: _finalEmitLightAmt,             ),              /// Fg-Rocks             Image.asset(AssetPaths.titleFgBase),              /// Fg-Receive             _LitImage(               imgSrc: AssetPaths.titleFgReceive,               color: orbColor,               lightAmt: _finalReceiveLightAmt,             ),              /// Fg-Emit             _LitImage(               imgSrc: AssetPaths.titleFgEmit,               color: emitColor,               lightAmt: _finalEmitLightAmt,             ),              /// UI             const Positioned.fill(                        // Add from here...               child: TitleScreenUi(),             ),                                            // to here.           ],         ),       ),     );   } }  class _LitImage extends StatelessWidget {   const _LitImage({     required this.color,     required this.imgSrc,     required this.lightAmt,   });   final Color color;   final String imgSrc;   final double lightAmt;    @override   Widget build(BuildContext context) {     final hsl = HSLColor.fromColor(color);     return Image.asset(       imgSrc,       color: hsl.withLightness(hsl.lightness * lightAmt).toColor(),       colorBlendMode: BlendMode.modulate,     );   } } 

import 'package:extra_alignments/extra_alignments.dart'; import 'package:flutter/material.dart'; import 'package:focusable_control_builder/focusable_control_builder.dart'; // Add import import 'package:gap/gap.dart';  import '../assets.dart'; import '../common/ui_scaler.dart'; import '../styles.dart'; 

class TitleScreenUi extends StatelessWidget {   const TitleScreenUi({     super.key,     required this.difficulty,                            // Edit from here...     required this.onDifficultyPressed,     required this.onDifficultyFocused,   });    final int difficulty;   final void Function(int difficulty) onDifficultyPressed;   final void Function(int? difficulty) onDifficultyFocused; // to here.    @override   Widget build(BuildContext context) {     return Padding(                                      // Move this const...       padding: const EdgeInsets.symmetric(vertical: 40, horizontal: 50), // to here.       child: Stack(         children: [           /// Title Text           const TopLeft(                                 // Add a const here, as well             child: UiScaler(               alignment: Alignment.topLeft,               child: _TitleText(),             ),           ),            /// Difficulty Btns           BottomLeft(                                    // Add from here...             child: UiScaler(               alignment: Alignment.bottomLeft,               child: _DifficultyBtns(                 difficulty: difficulty,                 onDifficultyPressed: onDifficultyPressed,                 onDifficultyFocused: onDifficultyFocused,               ),             ),           ),                                             // to here.         ],       ),     );   } } 

class _DifficultyBtns extends StatelessWidget {   const _DifficultyBtns({     required this.difficulty,     required this.onDifficultyPressed,     required this.onDifficultyFocused,   });    final int difficulty;   final void Function(int difficulty) onDifficultyPressed;   final void Function(int? difficulty) onDifficultyFocused;    @override   Widget build(BuildContext context) {     return Column(       mainAxisSize: MainAxisSize.min,       children: [         _DifficultyBtn(           label: 'Casual',           selected: difficulty == 0,           onPressed: () => onDifficultyPressed(0),           onHover: (over) => onDifficultyFocused(over ? 0 : null),         ),         _DifficultyBtn(           label: 'Normal',           selected: difficulty == 1,           onPressed: () => onDifficultyPressed(1),           onHover: (over) => onDifficultyFocused(over ? 1 : null),         ),         _DifficultyBtn(           label: 'Hardcore',           selected: difficulty == 2,           onPressed: () => onDifficultyPressed(2),           onHover: (over) => onDifficultyFocused(over ? 2 : null),         ),         const Gap(20),       ],     );   } }  class _DifficultyBtn extends StatelessWidget {   const _DifficultyBtn({     required this.selected,     required this.onPressed,     required this.onHover,     required this.label,   });   final String label;   final bool selected;   final VoidCallback onPressed;   final void Function(bool hasFocus) onHover;    @override   Widget build(BuildContext context) {     return FocusableControlBuilder(       onPressed: onPressed,       onHoverChanged: (_, state) => onHover.call(state.isHovered),       builder: (_, state) {         return Padding(           padding: const EdgeInsets.all(8.0),           child: SizedBox(             width: 250,             height: 60,             child: Stack(               children: [                 /// Bg with fill and outline                 Container(                   decoration: BoxDecoration(                     color: const Color(0xFF00D1FF).withOpacity(.1),                     border: Border.all(color: Colors.white, width: 5),                   ),                 ),                  if (state.isHovered || state.isFocused) ...[                   Container(                     decoration: BoxDecoration(                       color: const Color(0xFF00D1FF).withOpacity(.1),                     ),                   ),                 ],                  /// cross-hairs (selected state)                 if (selected) ...[                   CenterLeft(                     child: Image.asset(AssetPaths.titleSelectedLeft),                   ),                   CenterRight(                     child: Image.asset(AssetPaths.titleSelectedRight),                   ),                 ],                  /// Label                 Center(                   child: Text(label.toUpperCase(), style: TextStyles.btn),                 ),               ],             ),           ),         );       },     );   } } 

import 'package:flutter/material.dart';  import '../assets.dart'; import '../styles.dart'; import 'title_screen_ui.dart';  class TitleScreen extends StatefulWidget {   const TitleScreen({super.key});    @override   State<TitleScreen> createState() => _TitleScreenState(); }  class _TitleScreenState extends State<TitleScreen> {   Color get _emitColor =>       AppColors.emitColors[_difficultyOverride ?? _difficulty];   Color get _orbColor =>       AppColors.orbColors[_difficultyOverride ?? _difficulty];    /// Currently selected difficulty   int _difficulty = 0;    /// Currently focused difficulty (if any)   int? _difficultyOverride;    void _handleDifficultyPressed(int value) {     setState(() => _difficulty = value);   }    void _handleDifficultyFocused(int? value) {     setState(() => _difficultyOverride = value);   }    final _finalReceiveLightAmt = 0.7;   final _finalEmitLightAmt = 0.5;    @override   Widget build(BuildContext context) {     return Scaffold(       backgroundColor: Colors.black,       body: Center(         child: Stack(           children: [             /// Bg-Base             Image.asset(AssetPaths.titleBgBase),              /// Bg-Receive             _LitImage(               color: _orbColor,               imgSrc: AssetPaths.titleBgReceive,               lightAmt: _finalReceiveLightAmt,             ),              /// Mg-Base             _LitImage(               imgSrc: AssetPaths.titleMgBase,               color: _orbColor,               lightAmt: _finalReceiveLightAmt,             ),              /// Mg-Receive             _LitImage(               imgSrc: AssetPaths.titleMgReceive,               color: _orbColor,               lightAmt: _finalReceiveLightAmt,             ),              /// Mg-Emit             _LitImage(               imgSrc: AssetPaths.titleMgEmit,               color: _emitColor,               lightAmt: _finalEmitLightAmt,             ),              /// Fg-Rocks             Image.asset(AssetPaths.titleFgBase),              /// Fg-Receive             _LitImage(               imgSrc: AssetPaths.titleFgReceive,               color: _orbColor,               lightAmt: _finalReceiveLightAmt,             ),              /// Fg-Emit             _LitImage(               imgSrc: AssetPaths.titleFgEmit,               color: _emitColor,               lightAmt: _finalEmitLightAmt,             ),              /// UI             Positioned.fill(               child: TitleScreenUi(                 difficulty: _difficulty,                 onDifficultyFocused: _handleDifficultyFocused,                 onDifficultyPressed: _handleDifficultyPressed,               ),             ),           ],         ),       ),     );   } }  class _LitImage extends StatelessWidget {   const _LitImage({     required this.color,     required this.imgSrc,     required this.lightAmt,   });   final Color color;   final String imgSrc;   final double lightAmt;    @override   Widget build(BuildContext context) {     final hsl = HSLColor.fromColor(color);     return Image.asset(       imgSrc,       color: hsl.withLightness(hsl.lightness * lightAmt).toColor(),       colorBlendMode: BlendMode.modulate,     );   } } 

class TitleScreenUi extends StatelessWidget {   const TitleScreenUi({     super.key,     required this.difficulty,     required this.onDifficultyPressed,     required this.onDifficultyFocused,   });    final int difficulty;   final void Function(int difficulty) onDifficultyPressed;   final void Function(int? difficulty) onDifficultyFocused;    @override   Widget build(BuildContext context) {     return Padding(       padding: const EdgeInsets.symmetric(vertical: 40, horizontal: 50),       child: Stack(         children: [           /// Title Text           const TopLeft(             child: UiScaler(               alignment: Alignment.topLeft,               child: _TitleText(),             ),           ),            /// Difficulty Btns           BottomLeft(             child: UiScaler(               alignment: Alignment.bottomLeft,               child: _DifficultyBtns(                 difficulty: difficulty,                 onDifficultyPressed: onDifficultyPressed,                 onDifficultyFocused: onDifficultyFocused,               ),             ),           ),            /// StartBtn           BottomRight(                                    // Add from here...             child: UiScaler(               alignment: Alignment.bottomRight,               child: Padding(                 padding: const EdgeInsets.only(bottom: 20, right: 40),                 child: _StartBtn(onPressed: () {}),               ),             ),           ),                                              // to here.         ],       ),     );   } } 

class _StartBtn extends StatefulWidget {   const _StartBtn({required this.onPressed});   final VoidCallback onPressed;    @override   State<_StartBtn> createState() => _StartBtnState(); }  class _StartBtnState extends State<_StartBtn> {   AnimationController? _btnAnim;   bool _wasHovered = false;    @override   Widget build(BuildContext context) {     return FocusableControlBuilder(       cursor: SystemMouseCursors.click,       onPressed: widget.onPressed,       builder: (_, state) {         if ((state.isHovered || state.isFocused) &&             !_wasHovered &&             _btnAnim?.status != AnimationStatus.forward) {           _btnAnim?.forward(from: 0);         }         _wasHovered = (state.isHovered || state.isFocused);         return SizedBox(           width: 520,           height: 100,           child: Stack(             children: [               Positioned.fill(child: Image.asset(AssetPaths.titleStartBtn)),               if (state.isHovered || state.isFocused) ...[                 Positioned.fill(                     child: Image.asset(AssetPaths.titleStartBtnHover)),               ],               Center(                 child: Row(                   mainAxisAlignment: MainAxisAlignment.end,                   children: [                     Text('START MISSION',                         style: TextStyles.btn                             .copyWith(fontSize: 24, letterSpacing: 18)),                   ],                 ),               ),             ],           ),         );       },     );   } } 

import 'dart:io' show Platform;  import 'package:flutter/foundation.dart' show kIsWeb; import 'package:flutter/material.dart'; import 'package:flutter_animate/flutter_animate.dart';   // Add this import import 'package:window_size/window_size.dart';  import 'title_screen/title_screen.dart';  void main() {   if (!kIsWeb && (Platform.isWindows || Platform.isLinux || Platform.isMacOS)) {     WidgetsFlutterBinding.ensureInitialized();     setWindowMinSize(const Size(800, 500));   }   Animate.restartOnHotReload = true;                     // Add this line   runApp(const NextGenApp()); }  class NextGenApp extends StatelessWidget {   const NextGenApp({super.key});    @override   Widget build(BuildContext context) {     return MaterialApp(       themeMode: ThemeMode.dark,       darkTheme: ThemeData(brightness: Brightness.dark),       home: const TitleScreen(),     );   } } 

import 'package:extra_alignments/extra_alignments.dart'; import 'package:flutter/material.dart'; import 'package:flutter_animate/flutter_animate.dart';   // Add this import import 'package:focusable_control_builder/focusable_control_builder.dart'; import 'package:gap/gap.dart';  import '../assets.dart'; import '../common/ui_scaler.dart'; import '../styles.dart';  class TitleScreenUi extends StatelessWidget { 

class _TitleText extends StatelessWidget {   const _TitleText();    @override   Widget build(BuildContext context) {     return Column(       mainAxisSize: MainAxisSize.min,       crossAxisAlignment: CrossAxisAlignment.start,       children: [         const Gap(20),         Row(           mainAxisSize: MainAxisSize.min,           children: [             Transform.translate(               offset: Offset(-(TextStyles.h1.letterSpacing! * .5), 0),               child: Text('OUTPOST', style: TextStyles.h1),             ),             Image.asset(AssetPaths.titleSelectedLeft, height: 65),             Text('57', style: TextStyles.h2),             Image.asset(AssetPaths.titleSelectedRight, height: 65),           ],                                             // Edit from here...         ).animate().fadeIn(delay: .8.seconds, duration: .7.seconds),         Text('INTO THE UNKNOWN', style: TextStyles.h3)             .animate()             .fadeIn(delay: 1.seconds, duration: .7.seconds),       ],                                                 // to here.     );   } } 

class _DifficultyBtns extends StatelessWidget {   const _DifficultyBtns({     required this.difficulty,     required this.onDifficultyPressed,     required this.onDifficultyFocused,   });    final int difficulty;   final void Function(int difficulty) onDifficultyPressed;   final void Function(int? difficulty) onDifficultyFocused;    @override   Widget build(BuildContext context) {     return Column(       mainAxisSize: MainAxisSize.min,       children: [         _DifficultyBtn(           label: 'Casual',           selected: difficulty == 0,           onPressed: () => onDifficultyPressed(0),           onHover: (over) => onDifficultyFocused(over ? 0 : null),         )                                                // Add from here...             .animate()             .fadeIn(delay: 1.3.seconds, duration: .35.seconds)             .slide(begin: const Offset(0, .2)),          // to here         _DifficultyBtn(           label: 'Normal',           selected: difficulty == 1,           onPressed: () => onDifficultyPressed(1),           onHover: (over) => onDifficultyFocused(over ? 1 : null),         )                                                // Add from here...             .animate()             .fadeIn(delay: 1.5.seconds, duration: .35.seconds)             .slide(begin: const Offset(0, .2)),          // to here         _DifficultyBtn(           label: 'Hardcore',           selected: difficulty == 2,           onPressed: () => onDifficultyPressed(2),           onHover: (over) => onDifficultyFocused(over ? 2 : null),         )                                                // Add from here...             .animate()             .fadeIn(delay: 1.7.seconds, duration: .35.seconds)             .slide(begin: const Offset(0, .2)),          // to here         const Gap(20),       ],     );   } } 

class _StartBtnState extends State<_StartBtn> {   AnimationController? _btnAnim;   bool _wasHovered = false;    @override   Widget build(BuildContext context) {     return FocusableControlBuilder(       cursor: SystemMouseCursors.click,       onPressed: widget.onPressed,       builder: (_, state) {         if ((state.isHovered || state.isFocused) &&             !_wasHovered &&             _btnAnim?.status != AnimationStatus.forward) {           _btnAnim?.forward(from: 0);         }         _wasHovered = (state.isHovered || state.isFocused);         return SizedBox(           width: 520,           height: 100,           child: Stack(             children: [               Positioned.fill(child: Image.asset(AssetPaths.titleStartBtn)),               if (state.isHovered || state.isFocused) ...[                 Positioned.fill(                     child: Image.asset(AssetPaths.titleStartBtnHover)),               ],               Center(                 child: Row(                   mainAxisAlignment: MainAxisAlignment.end,                   children: [                     Text('START MISSION',                         style: TextStyles.btn                             .copyWith(fontSize: 24, letterSpacing: 18)),                   ],                 ),               ),             ],           )                                              // Edit from here...               .animate(autoPlay: false, onInit: (c) => _btnAnim = c)               .shimmer(duration: .7.seconds, color: Colors.black),         )             .animate()             .fadeIn(delay: 2.3.seconds)             .slide(begin: const Offset(0, .2));       },                                                 // to here.     );   } } 

class _DifficultyBtn extends StatelessWidget {   const _DifficultyBtn({     required this.selected,     required this.onPressed,     required this.onHover,     required this.label,   });   final String label;   final bool selected;   final VoidCallback onPressed;   final void Function(bool hasFocus) onHover;    @override   Widget build(BuildContext context) {     return FocusableControlBuilder(       onPressed: onPressed,       onHoverChanged: (_, state) => onHover.call(state.isHovered),       builder: (_, state) {         return Padding(           padding: const EdgeInsets.all(8.0),           child: SizedBox(             width: 250,             height: 60,             child: Stack(               children: [                 /// Bg with fill and outline                 AnimatedOpacity(                         // Edit from here                   opacity: (!selected && (state.isHovered || state.isFocused))                       ? 1                       : 0,                   duration: .3.seconds,                   child: Container(                     decoration: BoxDecoration(                       color: const Color(0xFF00D1FF).withOpacity(.1),                       border: Border.all(color: Colors.white, width: 5),                     ),                   ),                 ),                                       // to here.                  if (state.isHovered || state.isFocused) ...[                   Container(                     decoration: BoxDecoration(                       color: const Color(0xFF00D1FF).withOpacity(.1),                     ),                   ),                 ],                  /// cross-hairs (selected state)                 if (selected) ...[                   CenterLeft(                     child: Image.asset(AssetPaths.titleSelectedLeft),                   ),                   CenterRight(                     child: Image.asset(AssetPaths.titleSelectedRight),                   ),                 ],                  /// Label                 Center(                   child: Text(label.toUpperCase(), style: TextStyles.btn),                 ),               ],             ),           ),         );       },     );   } } 

import 'package:flutter/material.dart'; import 'package:flutter_animate/flutter_animate.dart';    // Add this import  import '../assets.dart'; import '../styles.dart'; import 'title_screen_ui.dart';  class TitleScreen extends StatefulWidget { 

class _AnimatedColors extends StatelessWidget {   const _AnimatedColors({     required this.emitColor,     required this.orbColor,     required this.builder,   });    final Color emitColor;   final Color orbColor;    final Widget Function(BuildContext context, Color orbColor, Color emitColor)       builder;    @override   Widget build(BuildContext context) {     final duration = .5.seconds;     return TweenAnimationBuilder(       tween: ColorTween(begin: emitColor, end: emitColor),       duration: duration,       builder: (_, emitColor, __) {         return TweenAnimationBuilder(           tween: ColorTween(begin: orbColor, end: orbColor),           duration: duration,           builder: (context, orbColor, __) {             return builder(context, orbColor!, emitColor!);           },         );       },     );   } } 

class _TitleScreenState extends State<TitleScreen> {   Color get _emitColor =>       AppColors.emitColors[_difficultyOverride ?? _difficulty];   Color get _orbColor =>       AppColors.orbColors[_difficultyOverride ?? _difficulty];    /// Currently selected difficulty   int _difficulty = 0;    /// Currently focused difficulty (if any)   int? _difficultyOverride;    void _handleDifficultyPressed(int value) {     setState(() => _difficulty = value);   }    void _handleDifficultyFocused(int? value) {     setState(() => _difficultyOverride = value);   }    final _finalReceiveLightAmt = 0.7;   final _finalEmitLightAmt = 0.5;    @override   Widget build(BuildContext context) {     return Scaffold(       backgroundColor: Colors.black,       body: Center(         child: _AnimatedColors(                           // Edit from here...           orbColor: _orbColor,           emitColor: _emitColor,           builder: (_, orbColor, emitColor) {             return Stack(               children: [                 /// Bg-Base                 Image.asset(AssetPaths.titleBgBase),                  /// Bg-Receive                 _LitImage(                   color: orbColor,                   imgSrc: AssetPaths.titleBgReceive,                   lightAmt: _finalReceiveLightAmt,                 ),                  /// Mg-Base                 _LitImage(                   imgSrc: AssetPaths.titleMgBase,                   color: orbColor,                   lightAmt: _finalReceiveLightAmt,                 ),                  /// Mg-Receive                 _LitImage(                   imgSrc: AssetPaths.titleMgReceive,                   color: orbColor,                   lightAmt: _finalReceiveLightAmt,                 ),                  /// Mg-Emit                 _LitImage(                   imgSrc: AssetPaths.titleMgEmit,                   color: emitColor,                   lightAmt: _finalEmitLightAmt,                 ),                  /// Fg-Rocks                 Image.asset(AssetPaths.titleFgBase),                  /// Fg-Receive                 _LitImage(                   imgSrc: AssetPaths.titleFgReceive,                   color: orbColor,                   lightAmt: _finalReceiveLightAmt,                 ),                  /// Fg-Emit                 _LitImage(                   imgSrc: AssetPaths.titleFgEmit,                   color: emitColor,                   lightAmt: _finalEmitLightAmt,                 ),                  /// UI                 Positioned.fill(                   child: TitleScreenUi(                     difficulty: _difficulty,                     onDifficultyFocused: _handleDifficultyFocused,                     onDifficultyPressed: _handleDifficultyPressed,                   ),                 ),               ],             ).animate().fadeIn(duration: 1.seconds, delay: .3.seconds);           },         ),                                                // to here.       ),     );   } } 

import 'dart:io' show Platform;  import 'package:flutter/foundation.dart' show kIsWeb; import 'package:flutter/material.dart'; import 'package:flutter_animate/flutter_animate.dart'; import 'package:provider/provider.dart';                 // Add this import import 'package:window_size/window_size.dart';  import 'assets.dart';                                    // Add this import import 'title_screen/title_screen.dart';  void main() {   if (!kIsWeb && (Platform.isWindows || Platform.isLinux || Platform.isMacOS)) {     WidgetsFlutterBinding.ensureInitialized();     setWindowMinSize(const Size(800, 500));   }   Animate.restartOnHotReload = true;   runApp(                                                // Edit from here...     FutureProvider<FragmentPrograms?>(       create: (context) => loadFragmentPrograms(),       initialData: null,       child: const NextGenApp(),     ),   );                                                     // to here. }  class NextGenApp extends StatelessWidget {   const NextGenApp({super.key});    @override   Widget build(BuildContext context) {     return MaterialApp(       themeMode: ThemeMode.dark,       darkTheme: ThemeData(brightness: Brightness.dark),       home: const TitleScreen(),     );   } } 

import 'package:extra_alignments/extra_alignments.dart'; import 'package:flutter/material.dart'; import 'package:flutter_animate/flutter_animate.dart'; import 'package:focusable_control_builder/focusable_control_builder.dart'; import 'package:gap/gap.dart'; import 'package:provider/provider.dart';                 // Add this import  import '../assets.dart'; import '../common/shader_effect.dart';                   // And this import import '../common/ticking_builder.dart';                 // And this import import '../common/ui_scaler.dart'; import '../styles.dart';  class TitleScreenUi extends StatelessWidget { 

class _TitleText extends StatelessWidget {   const _TitleText();    @override   Widget build(BuildContext context) {     Widget content = Column(                             // Modify this line       mainAxisSize: MainAxisSize.min,       crossAxisAlignment: CrossAxisAlignment.start,       children: [         const Gap(20),         Row(           mainAxisSize: MainAxisSize.min,           children: [             Transform.translate(               offset: Offset(-(TextStyles.h1.letterSpacing! * .5), 0),               child: Text('OUTPOST', style: TextStyles.h1),             ),             Image.asset(AssetPaths.titleSelectedLeft, height: 65),             Text('57', style: TextStyles.h2),             Image.asset(AssetPaths.titleSelectedRight, height: 65),           ],         ).animate().fadeIn(delay: .8.seconds, duration: .7.seconds),         Text('INTO THE UNKNOWN', style: TextStyles.h3)             .animate()             .fadeIn(delay: 1.seconds, duration: .7.seconds),       ],     );     return Consumer<FragmentPrograms?>(                  // Add from here...       builder: (context, fragmentPrograms, _) {         if (fragmentPrograms == null) return content;         return TickingBuilder(           builder: (context, time) {             return AnimatedSampler(               (image, size, canvas) {                 const double overdrawPx = 30;                 final shader = fragmentPrograms.ui.fragmentShader();                 shader                   ..setFloat(0, size.width)                   ..setFloat(1, size.height)                   ..setFloat(2, time)                   ..setImageSampler(0, image);                 Rect rect = Rect.fromLTWH(-overdrawPx, -overdrawPx,                     size.width + overdrawPx, size.height + overdrawPx);                 canvas.drawRect(rect, Paint()..shader = shader);               },               child: content,             );           },         );       },     );                                                   // to here.   } } 

class TitleScreenUi extends StatelessWidget {   const TitleScreenUi({     super.key,     required this.difficulty,     required this.onDifficultyPressed,     required this.onDifficultyFocused,     required this.onStartPressed,                         // Add this argument   });    final int difficulty;   final void Function(int difficulty) onDifficultyPressed;   final void Function(int? difficulty) onDifficultyFocused;   final VoidCallback onStartPressed;                      // Add this attribute    @override   Widget build(BuildContext context) {     return Padding(       padding: const EdgeInsets.symmetric(vertical: 40, horizontal: 50),       child: Stack(         children: [           /// Title Text           const TopLeft(             child: UiScaler(               alignment: Alignment.topLeft,               child: _TitleText(),             ),           ),            /// Difficulty Btns           BottomLeft(             child: UiScaler(               alignment: Alignment.bottomLeft,               child: _DifficultyBtns(                 difficulty: difficulty,                 onDifficultyPressed: onDifficultyPressed,                 onDifficultyFocused: onDifficultyFocused,               ),             ),           ),            /// StartBtn           BottomRight(             child: UiScaler(               alignment: Alignment.bottomRight,               child: Padding(                 padding: const EdgeInsets.only(bottom: 20, right: 40),                 child: _StartBtn(onPressed: onStartPressed),  // Edit this line               ),             ),           ),         ],       ),     );   } } 

import 'dart:math';                                       // Add this import import 'dart:ui';                                         // And this import  import 'package:flutter/material.dart'; import 'package:flutter/services.dart';                   // Add this import import 'package:flutter_animate/flutter_animate.dart';  import '../assets.dart'; import '../orb_shader/orb_shader_config.dart';            // And this import import '../orb_shader/orb_shader_widget.dart';            // And this import too import '../styles.dart'; import 'title_screen_ui.dart';  class TitleScreen extends StatefulWidget { 

class _TitleScreenState extends State<TitleScreen>     with SingleTickerProviderStateMixin {   final _orbKey = GlobalKey<OrbShaderWidgetState>();    /// Editable Settings   /// 0-1, receive lighting strength   final _minReceiveLightAmt = .35;   final _maxReceiveLightAmt = .7;    /// 0-1, emit lighting strength   final _minEmitLightAmt = .5;   final _maxEmitLightAmt = 1;    /// Internal   var _mousePos = Offset.zero;    Color get _emitColor =>       AppColors.emitColors[_difficultyOverride ?? _difficulty];   Color get _orbColor =>       AppColors.orbColors[_difficultyOverride ?? _difficulty];    /// Currently selected difficulty   int _difficulty = 0;    /// Currently focused difficulty (if any)   int? _difficultyOverride;   double _orbEnergy = 0;   double _minOrbEnergy = 0;    double get _finalReceiveLightAmt {     final light =         lerpDouble(_minReceiveLightAmt, _maxReceiveLightAmt, _orbEnergy) ?? 0;     return light + _pulseEffect.value * .05 * _orbEnergy;   }    double get _finalEmitLightAmt {     return lerpDouble(_minEmitLightAmt, _maxEmitLightAmt, _orbEnergy) ?? 0;   }    late final _pulseEffect = AnimationController(     vsync: this,     duration: _getRndPulseDuration(),     lowerBound: -1,     upperBound: 1,   );    Duration _getRndPulseDuration() => 100.ms + 200.ms * Random().nextDouble();    double _getMinEnergyForDifficulty(int difficulty) => switch (difficulty) {         1 => 0.3,         2 => 0.6,         _ => 0,       };     @override   void initState() {     super.initState();     _pulseEffect.forward();     _pulseEffect.addListener(_handlePulseEffectUpdate);   }    void _handlePulseEffectUpdate() {     if (_pulseEffect.status == AnimationStatus.completed) {       _pulseEffect.reverse();       _pulseEffect.duration = _getRndPulseDuration();     } else if (_pulseEffect.status == AnimationStatus.dismissed) {       _pulseEffect.duration = _getRndPulseDuration();       _pulseEffect.forward();     }   }    void _handleDifficultyPressed(int value) {     setState(() => _difficulty = value);     _bumpMinEnergy();   }    Future<void> _bumpMinEnergy([double amount = 0.1]) async {     setState(() {       _minOrbEnergy = _getMinEnergyForDifficulty(_difficulty) + amount;     });     await Future<void>.delayed(.2.seconds);     setState(() {       _minOrbEnergy = _getMinEnergyForDifficulty(_difficulty);     });   }    void _handleStartPressed() => _bumpMinEnergy(0.3);    void _handleDifficultyFocused(int? value) {     setState(() {       _difficultyOverride = value;       if (value == null) {         _minOrbEnergy = _getMinEnergyForDifficulty(_difficulty);       } else {         _minOrbEnergy = _getMinEnergyForDifficulty(value);       }     });   }    /// Update mouse position so the orbWidget can use it, doing it here prevents   /// btns from blocking the mouse-move events in the widget itself.   void _handleMouseMove(PointerHoverEvent e) {     setState(() {       _mousePos = e.localPosition;     });   }    @override   Widget build(BuildContext context) {     return Scaffold(       backgroundColor: Colors.black,       body: Center(         child: MouseRegion(           onHover: _handleMouseMove,           child: _AnimatedColors(             orbColor: _orbColor,             emitColor: _emitColor,             builder: (_, orbColor, emitColor) {               return Stack(                 children: [                   /// Bg-Base                   Image.asset(AssetPaths.titleBgBase),                    /// Bg-Receive                   _LitImage(                     color: orbColor,                     imgSrc: AssetPaths.titleBgReceive,                     pulseEffect: _pulseEffect,                     lightAmt: _finalReceiveLightAmt,                   ),                    /// Orb                   Positioned.fill(                     child: Stack(                       children: [                         // Orb                         OrbShaderWidget(                           key: _orbKey,                           mousePos: _mousePos,                           minEnergy: _minOrbEnergy,                           config: OrbShaderConfig(                             ambientLightColor: orbColor,                             materialColor: orbColor,                             lightColor: orbColor,                           ),                           onUpdate: (energy) => setState(() {                             _orbEnergy = energy;                           }),                         ),                       ],                     ),                   ),                    /// Mg-Base                   _LitImage(                     imgSrc: AssetPaths.titleMgBase,                     color: orbColor,                     pulseEffect: _pulseEffect,                     lightAmt: _finalReceiveLightAmt,                   ),                    /// Mg-Receive                   _LitImage(                     imgSrc: AssetPaths.titleMgReceive,                     color: orbColor,                     pulseEffect: _pulseEffect,                     lightAmt: _finalReceiveLightAmt,                   ),                    /// Mg-Emit                   _LitImage(                     imgSrc: AssetPaths.titleMgEmit,                     color: emitColor,                     pulseEffect: _pulseEffect,                     lightAmt: _finalEmitLightAmt,                   ),                    /// Fg-Rocks                   Image.asset(AssetPaths.titleFgBase),                    /// Fg-Receive                   _LitImage(                     imgSrc: AssetPaths.titleFgReceive,                     color: orbColor,                     pulseEffect: _pulseEffect,                     lightAmt: _finalReceiveLightAmt,                   ),                    /// Fg-Emit                   _LitImage(                     imgSrc: AssetPaths.titleFgEmit,                     color: emitColor,                     pulseEffect: _pulseEffect,                     lightAmt: _finalEmitLightAmt,                   ),                    /// UI                   Positioned.fill(                     child: TitleScreenUi(                       difficulty: _difficulty,                       onDifficultyFocused: _handleDifficultyFocused,                       onDifficultyPressed: _handleDifficultyPressed,                       onStartPressed: _handleStartPressed,                     ),                   ),                 ],               ).animate().fadeIn(duration: 1.seconds, delay: .3.seconds);             },           ),         ),       ),     );   } }