Skip to content

Commit e1678b1

Browse files
nkhanh44nkhanh44
authored
Merge pull request #73 from nimblehq/feature/72-ui-survey-question
[#72] [UI] As the user, I can see the survey question
2 parents fa5e5e6 + 7889022 commit e1678b1

File tree

9 files changed

+295
-79
lines changed

9 files changed

+295
-79
lines changed

‎assets/images/dummy_background.png‎

1.7 MB
Loading

‎assets/svg/close_button.svg‎

Lines changed: 14 additions & 0 deletions
Loading

‎lib/l10n/app_en.arb‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,6 @@
1111
"loginFailAlertTitle": "Unable to log in",
1212
"today": "Today",
1313
"errorText": "Error",
14-
"startSurveyButton": "Start Survey"
14+
"startSurveyText": "Start Survey",
15+
"submitText": "Submit"
1516
}

‎lib/main.dart‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import 'package:survey_flutter/screens/app_route.dart';
88
import 'package:survey_flutter/screens/home/home_screen.dart';
99
import 'package:survey_flutter/screens/login/login_screen.dart';
1010
import 'package:survey_flutter/screens/splash/splash_screen.dart';
11+
import 'package:survey_flutter/screens/survey/survey_detail_screen.dart';
1112
import 'package:survey_flutter/screens/survey/survey_screen.dart';
1213
import 'package:survey_flutter/storage/survey_storage.dart';
1314
import 'package:survey_flutter/theme/app_theme.dart';
@@ -44,10 +45,14 @@ class App extends StatelessWidget {
4445
),
4546
GoRoute(
4647
path: AppRoute.survey.path,
47-
builder: (_, state) => SurveyScreen(
48+
builder: (_, state) => SurveyDetailScreen(
4849
survey: state.extra as SurveyModel,
4950
),
5051
),
52+
GoRoute(
53+
path: AppRoute.questions.path,
54+
builder: (_, __) => SurveyScreen(),
55+
),
5156
],
5257
);
5358

‎lib/screens/app_route.dart‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ enum AppRoute {
33
login,
44
home,
55
survey,
6+
questions,
67
}
78

89
extension AppRoutePath on AppRoute {
@@ -16,6 +17,8 @@ extension AppRoutePath on AppRoute {
1617
return '/home';
1718
case AppRoute.survey:
1819
return '/survey';
20+
case AppRoute.questions:
21+
return '/questions';
1922
}
2023
}
2124
}

‎lib/screens/survey/survey_detail_screen.dart‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
import 'package:flutter/material.dart';
2+
import 'package:go_router/go_router.dart';
3+
import 'package:survey_flutter/gen/assets.gen.dart';
4+
import 'package:survey_flutter/model/survey_model.dart';
5+
import 'package:survey_flutter/screens/app_route.dart';
6+
import 'package:survey_flutter/theme/app_constants.dart';
7+
import 'package:survey_flutter/theme/primary_button_style.dart';
8+
import 'package:survey_flutter/utils/build_context_ext.dart';
9+
10+
const _buttonHeight = 56.0;
11+
12+
class SurveyDetailScreen extends StatelessWidget {
13+
final SurveyModel survey;
14+
SurveyDetailScreen({
15+
super.key,
16+
required this.survey,
17+
});
18+
19+
late final _backgroundImage = FadeInImage.assetNetwork(
20+
placeholder: Assets.images.placeholder.path,
21+
image: survey.coverImageUrl,
22+
fit: BoxFit.cover,
23+
width: double.infinity,
24+
height: double.infinity,
25+
);
26+
27+
late final _gradientOverlay = Container(
28+
decoration: BoxDecoration(
29+
gradient: LinearGradient(
30+
begin: Alignment.topCenter,
31+
end: Alignment.bottomCenter,
32+
colors: [
33+
Colors.black.withOpacity(0.8),
34+
Colors.black.withOpacity(0.2),
35+
Colors.black.withOpacity(0.8),
36+
],
37+
),
38+
),
39+
);
40+
41+
Widget _buildTitle(BuildContext context) {
42+
return Text(
43+
survey.title,
44+
style: context.textTheme.titleMedium,
45+
maxLines: 2,
46+
);
47+
}
48+
49+
Widget _buildDescription(BuildContext context) {
50+
return Text(
51+
survey.description,
52+
style: context.textTheme.bodyMedium,
53+
maxLines: 2,
54+
);
55+
}
56+
57+
Widget _buildButton(BuildContext context) {
58+
return SizedBox(
59+
height: _buttonHeight,
60+
child: ElevatedButton(
61+
style: PrimaryButtonStyle(
62+
hintTextStyle: context.textTheme.labelMedium,
63+
),
64+
child: Text(
65+
context.localizations.startSurveyText,
66+
),
67+
onPressed: () {
68+
// TODO: Pass survey question model
69+
context.push(
70+
AppRoute.questions.path,
71+
);
72+
},
73+
),
74+
);
75+
}
76+
77+
@override
78+
Widget build(BuildContext context) {
79+
return Scaffold(
80+
appBar: AppBar(
81+
backgroundColor: Colors.transparent,
82+
elevation: 0,
83+
),
84+
extendBodyBehindAppBar: true,
85+
body: Stack(
86+
children: [
87+
_backgroundImage,
88+
_gradientOverlay,
89+
Container(
90+
padding: const EdgeInsets.only(
91+
bottom: Metrics.spacing20,
92+
left: Metrics.spacing20,
93+
right: Metrics.spacing20,
94+
),
95+
child: SafeArea(
96+
child: Column(
97+
crossAxisAlignment: CrossAxisAlignment.start,
98+
children: [
99+
_buildTitle(context),
100+
const SizedBox(height: Metrics.spacing16),
101+
_buildDescription(context),
102+
const Spacer(),
103+
Row(
104+
children: [
105+
const Spacer(),
106+
_buildButton(context),
107+
],
108+
),
109+
],
110+
),
111+
),
112+
),
113+
],
114+
),
115+
);
116+
}
117+
}

‎lib/screens/survey/survey_question_widget.dart‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import 'package:flutter/material.dart';
2+
import 'package:survey_flutter/theme/app_constants.dart';
3+
import 'package:survey_flutter/utils/build_context_ext.dart';
4+
5+
const _counterOpacity = 0.5;
6+
7+
class SurveyQuestionWidget extends StatelessWidget {
8+
final int displayOrder;
9+
final int numberOfQuestions;
10+
11+
const SurveyQuestionWidget({
12+
Key? key,
13+
required this.displayOrder,
14+
required this.numberOfQuestions,
15+
}) : super(key: key);
16+
17+
@override
18+
Widget build(BuildContext context) {
19+
return SafeArea(
20+
child: Padding(
21+
padding: const EdgeInsets.symmetric(
22+
vertical: Metrics.spacing54,
23+
horizontal: Metrics.spacing20,
24+
),
25+
child: Column(
26+
crossAxisAlignment: CrossAxisAlignment.start,
27+
children: [
28+
_buildQuestionCounter(context),
29+
const SizedBox(height: Metrics.spacing8),
30+
_buildQuestion(context),
31+
],
32+
),
33+
),
34+
);
35+
}
36+
37+
Widget _buildQuestionCounter(BuildContext context) => Text(
38+
"$displayOrder/$numberOfQuestions",
39+
style: context.textTheme.headlineSmall
40+
?.copyWith(color: Colors.white.withOpacity(_counterOpacity)),
41+
);
42+
43+
Widget _buildQuestion(BuildContext context) =>
44+
// TODO: remove text in integrate
45+
Text(
46+
"How fulfilled did you feel during this WFH period?",
47+
style: context.textTheme.titleLarge?.copyWith(color: Colors.white),
48+
maxLines: 3,
49+
);
50+
}

0 commit comments

Comments
 (0)