[#19] Create the UI for Survey

lib/l10n/app_en.arb

@@ -10,5 +10,6 @@
     "genericError": "Something went wrong.\nPlease try again!",
     "loginFailAlertTitle": "Unable to log in",
     "today": "Today",
-    "errorText": "Error"
+    "errorText": "Error",
+    "startSurveyButton": "Start Survey"
 }

lib/main.dart

@@ -3,9 +3,11 @@ import 'package:flutter_config/flutter_config.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:go_router/go_router.dart';
+import 'package:survey_flutter/model/survey_model.dart';
 import 'package:survey_flutter/screens/home/home_screen.dart';
 import 'package:survey_flutter/screens/login/login_screen.dart';
 import 'package:survey_flutter/screens/splash/splash_screen.dart';
+import 'package:survey_flutter/screens/survey/survey_screen.dart';
 import 'package:survey_flutter/storage/survey_storage.dart';
 import 'package:survey_flutter/theme/app_theme.dart';
 
@@ -41,6 +43,12 @@ class App extends StatelessWidget {
         path: routePathHomeScreen,
         builder: (_, __) => const HomeScreen(),
       ),
+      GoRoute(
+        path: routePathSurveyScreen,
+        builder: (_, state) => SurveyScreen(
+          survey: state.extra as SurveyModel,
+        ),
+      ),
     ],
   );
 

lib/screens/home/home_pages_widget.dart

@@ -11,11 +11,13 @@ class HomePagesWidget extends StatelessWidget {
   final List<SurveyModel> surveys;
   final ValueNotifier<int> currentPage;
   final PageController _pageController = PageController();
+  final VoidCallback onNextButtonPressed;
 
   HomePagesWidget({
     Key? key,
     required this.surveys,
     required this.currentPage,
+    required this.onNextButtonPressed,
   }) : super(key: key);
 
   @override
@@ -50,12 +52,7 @@ class HomePagesWidget extends StatelessWidget {
                       ),
                       child: HomeFooterWidget(
                         survey: surveys[index],
-                        onNextButtonPressed: () {
-                          if (currentPage.value < surveys.length - 1) {
-                            currentPage.value = index + 1;
-                            _pageController.jumpToPage(currentPage.value);
-                          }
-                        },
+                        onNextButtonPressed: onNextButtonPressed,
                       ),
                     ),
                   ),

lib/screens/home/home_screen.dart

@@ -1,11 +1,13 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:go_router/go_router.dart';
 import 'package:survey_flutter/model/survey_model.dart';
 import 'package:survey_flutter/screens/home/home_header_widget.dart';
-import 'package:survey_flutter/screens/home/home_pages_widget.dart';
 import 'package:survey_flutter/screens/home/home_page_indicator_widget.dart';
+import 'package:survey_flutter/screens/home/home_pages_widget.dart';
 import 'package:survey_flutter/screens/home/home_shimmer_loading.dart';
 import 'package:survey_flutter/screens/home/home_view_model.dart';
+import 'package:survey_flutter/screens/survey/survey_screen.dart';
 import 'package:survey_flutter/utils/build_context_ext.dart';
 import 'package:survey_flutter/widgets/alert_dialog.dart';
 
@@ -85,6 +87,13 @@ class _HomeScreenState extends ConsumerState<HomeScreen> {
                     HomePagesWidget(
                       surveys: surveys,
                       currentPage: _currentPage,
+                      onNextButtonPressed: () {
+                        final survey = surveys[_currentPage.value];
+                        context.push(
+                          routePathSurveyScreen,
+                          extra: survey,
+                        );
+                      },
                     ),
                     const HomeHeaderWidget(),
                     Align(

lib/screens/survey/survey_screen.dart

@@ -0,0 +1,114 @@
+import 'package:flutter/material.dart';
+import 'package:survey_flutter/gen/assets.gen.dart';
+import 'package:survey_flutter/model/survey_model.dart';
+import 'package:survey_flutter/theme/app_constants.dart';
+import 'package:survey_flutter/theme/primary_button_style.dart';
+import 'package:survey_flutter/utils/build_context_ext.dart';
+
+const routePathSurveyScreen = '/survey';
+const _buttonHeight = 56.0;
+
+class SurveyScreen extends StatelessWidget {
+  final SurveyModel survey;
+  SurveyScreen({required this.survey, super.key});
+
+  late final _backgroundImage = FadeInImage.assetNetwork(
+    placeholder: Assets.images.placeholder.path,
+    image: survey.coverImageUrl,
+    fit: BoxFit.cover,
+    width: double.infinity,
+    height: double.infinity,
+  );
+
+  late final _gradientOverlay = Container(
+    decoration: BoxDecoration(
+      gradient: LinearGradient(
+        begin: Alignment.topCenter,
+        end: Alignment.bottomCenter,
+        colors: [
+          Colors.black.withOpacity(0.8),
+          Colors.black.withOpacity(0.2),
+          Colors.black.withOpacity(0.8),
+        ],
+      ),
+    ),
+  );
+
+  Widget _buildTitle(BuildContext context) {
+    return Text(
+      survey.title,
+      style: context.textTheme.titleMedium,
+      maxLines: 2,
+    );
+  }
+
+  Widget _buildDescription(BuildContext context) {
+    return Text(
+      survey.description,
+      style: context.textTheme.bodyMedium,
+      maxLines: 2,
+    );
+  }
+
+  Widget _buildButton(BuildContext context) {
+    return SizedBox(
+      height: _buttonHeight,
+      child: ElevatedButton(
+        style: PrimaryButtonStyle(
+          hintTextStyle: context.textTheme.labelMedium,
+        ),
+        child: Text(
+          context.localizations.startSurveyButton,
+        ),
+        onPressed: () {
+          // TODO: Start survey
+        },
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        backgroundColor: Colors.transparent,
+        elevation: 0,
+      ),
+      extendBodyBehindAppBar: true,
+      body: LayoutBuilder(
+        builder: (_, __) {
+          return Stack(
+            children: [
+              _backgroundImage,
+              _gradientOverlay,
+              Container(
+                padding: const EdgeInsets.only(
+                  bottom: Metrics.spacing20,
+                  left: Metrics.spacing20,
+                  right: Metrics.spacing20,
+                ),
+                child: SafeArea(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      _buildTitle(context),
+                      const SizedBox(height: Metrics.spacing16),
+                      _buildDescription(context),
+                      const Spacer(),
+                      Row(
+                        children: [
+                          const Spacer(),
+                          _buildButton(context),
+                        ],
+                      ),
+                    ],
+                  ),
+                ),
+              ),
+            ],
+          );
+        },
+      ),
+    );
+  }
+}