Merge pull request #73 from nimblehq/feature/72-ui-survey-question

[#72] [UI] As the user, I can see the survey question

lib/l10n/app_en.arb

@@ -11,5 +11,6 @@
     "loginFailAlertTitle": "Unable to log in",
     "today": "Today",
     "errorText": "Error",
-    "startSurveyButton": "Start Survey"
+    "startSurveyText": "Start Survey",
+    "submitText": "Submit"
 }

lib/main.dart

@@ -8,6 +8,7 @@ import 'package:survey_flutter/screens/app_route.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_detail_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';
@@ -44,10 +45,14 @@ class App extends StatelessWidget {
       ),
       GoRoute(
         path: AppRoute.survey.path,
-        builder: (_, state) => SurveyScreen(
+        builder: (_, state) => SurveyDetailScreen(
           survey: state.extra as SurveyModel,
         ),
       ),
+      GoRoute(
+        path: AppRoute.questions.path,
+        builder: (_, __) => SurveyScreen(),
+      ),
     ],
   );
 

lib/screens/app_route.dart

@@ -3,6 +3,7 @@ enum AppRoute {
   login,
   home,
   survey,
+  questions,
 }
 
 extension AppRoutePath on AppRoute {
@@ -16,6 +17,8 @@ extension AppRoutePath on AppRoute {
         return '/home';
       case AppRoute.survey:
         return '/survey';
+      case AppRoute.questions:
+        return '/questions';
     }
   }
 }

lib/screens/survey/survey_detail_screen.dart

@@ -0,0 +1,117 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:survey_flutter/gen/assets.gen.dart';
+import 'package:survey_flutter/model/survey_model.dart';
+import 'package:survey_flutter/screens/app_route.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 _buttonHeight = 56.0;
+
+class SurveyDetailScreen extends StatelessWidget {
+  final SurveyModel survey;
+  SurveyDetailScreen({
+    super.key,
+    required this.survey,
+  });
+
+  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.startSurveyText,
+        ),
+        onPressed: () {
+          // TODO: Pass survey question model
+          context.push(
+            AppRoute.questions.path,
+          );
+        },
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        backgroundColor: Colors.transparent,
+        elevation: 0,
+      ),
+      extendBodyBehindAppBar: true,
+      body: 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),
+                    ],
+                  ),
+                ],
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/screens/survey/survey_question_widget.dart

@@ -0,0 +1,50 @@
+import 'package:flutter/material.dart';
+import 'package:survey_flutter/theme/app_constants.dart';
+import 'package:survey_flutter/utils/build_context_ext.dart';
+
+const _counterOpacity = 0.5;
+
+class SurveyQuestionWidget extends StatelessWidget {
+  final int displayOrder;
+  final int numberOfQuestions;
+
+  const SurveyQuestionWidget({
+    Key? key,
+    required this.displayOrder,
+    required this.numberOfQuestions,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return SafeArea(
+      child: Padding(
+        padding: const EdgeInsets.symmetric(
+          vertical: Metrics.spacing54,
+          horizontal: Metrics.spacing20,
+        ),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            _buildQuestionCounter(context),
+            const SizedBox(height: Metrics.spacing8),
+            _buildQuestion(context),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildQuestionCounter(BuildContext context) => Text(
+        "$displayOrder/$numberOfQuestions",
+        style: context.textTheme.headlineSmall
+            ?.copyWith(color: Colors.white.withOpacity(_counterOpacity)),
+      );
+
+  Widget _buildQuestion(BuildContext context) =>
+      // TODO: remove text in integrate
+      Text(
+        "How fulfilled did you feel during this WFH period?",
+        style: context.textTheme.titleLarge?.copyWith(color: Colors.white),
+        maxLines: 3,
+      );
+}