[#3] [UI] As a user, I can see the Splash screen

.github/workflows/test.yml

@@ -21,7 +21,7 @@ jobs:
         uses: subosito/flutter-action@v2
         with:
           channel: 'stable'
-          flutter-version: '3.3.10'
+          flutter-version: '3.7.7'
 
       - name: Get flutter dependencies.
         run: flutter pub get

lib/main.dart

@@ -4,6 +4,7 @@ import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:survey_flutter_ic/gen/assets.gen.dart';
 import 'package:go_router/go_router.dart';
 import 'package:package_info_plus/package_info_plus.dart';
+import 'package:survey_flutter_ic/ui/splash_screen.dart';
 
 void main() async {
   WidgetsFlutterBinding.ensureInitialized();
@@ -12,7 +13,7 @@ void main() async {
 }
 
 const routePathRootScreen = '/';
-const routePathSecondScreen = 'second';
+const routePathHomeScreen = '/home';
 
 class MyApp extends StatelessWidget {
   MyApp({Key? key}) : super(key: key);
@@ -21,15 +22,13 @@ class MyApp extends StatelessWidget {
     routes: <GoRoute>[
       GoRoute(
         path: routePathRootScreen,
+        builder: (BuildContext context, GoRouterState state) =>
+            const SplashScreen(),
+      ),
+      GoRoute(
+        path: routePathHomeScreen,
         builder: (BuildContext context, GoRouterState state) =>
             const HomeScreen(),
-        routes: [
-          GoRoute(
-            path: routePathSecondScreen,
-            builder: (BuildContext context, GoRouterState state) =>
-                const SecondScreen(),
-          ),
-        ],
       ),
     ],
   );
@@ -51,6 +50,7 @@ class MyApp extends StatelessWidget {
   }
 }
 
+// TODO: Extract to new class
 class HomeScreen extends StatelessWidget {
   const HomeScreen({Key? key}) : super(key: key);
 
@@ -83,29 +83,9 @@ class HomeScreen extends StatelessWidget {
               FlutterConfig.get('SECRET'),
               style: const TextStyle(color: Colors.black, fontSize: 24),
             ),
-            const SizedBox(height: 24),
-            ElevatedButton(
-              onPressed: () => context.go('/$routePathSecondScreen'),
-              child: const Text("Navigate to Second Screen"),
-            ),
           ],
         ),
       ),
     );
   }
 }
-
-class SecondScreen extends StatelessWidget {
-  const SecondScreen({
-    Key? key,
-  }) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(
-        title: const Text("Second Screen"),
-      ),
-    );
-  }
-}

lib/ui/splash_screen.dart

@@ -0,0 +1,60 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:go_router/go_router.dart';
+import 'package:survey_flutter_ic/gen/assets.gen.dart';
+import 'package:survey_flutter_ic/main.dart';
+
+const _splashTransitionDelayInMilliseconds = 2000;
+const _logoVisibilityDelayInMilliseconds = 500;
+const _logoVisibilityAnimationInMilliseconds = 1000;
+
+class SplashScreen extends StatefulWidget {
+  const SplashScreen({Key? key}) : super(key: key);
+
+  @override
+  State<SplashScreen> createState() => _SplashScreenState();
+}
+
+class _SplashScreenState extends State<SplashScreen> {
+  bool _logoVisible = false;
+
+  @override
+  void initState() {
+    SystemChrome.setSystemUIOverlayStyle(
+        const SystemUiOverlayStyle(statusBarColor: Colors.transparent));
+
+    Future.delayed(
+        const Duration(milliseconds: _splashTransitionDelayInMilliseconds), () {
+      context.go(routePathHomeScreen);
+    });
+
+    Future.delayed(
+        const Duration(milliseconds: _logoVisibilityDelayInMilliseconds), () {
+      setState(() {
+        _logoVisible = true;
+      });
+    });
+
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Container(
+        decoration: BoxDecoration(
+          image: DecorationImage(
+              image: AssetImage(Assets.images.bgSplash.path), fit: BoxFit.fill),
+        ),
+        child: Center(
+          child: AnimatedOpacity(
+            duration: const Duration(
+                milliseconds: _logoVisibilityAnimationInMilliseconds),
+            opacity: _logoVisible ? 1.0 : 0.0,
+            child: Assets.images.icLogo.svg(),
+          ),
+        ),
+      ),
+    );
+  }
+}