129 lines
4.1 KiB
Dart
129 lines
4.1 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter_svg/svg.dart';
|
|
import 'package:stacked/stacked.dart';
|
|
|
|
import '../../../common/app_colors.dart';
|
|
import '../../../common/ui_helpers.dart';
|
|
import '../../../widgets/duolingo_assessment_app_bar.dart';
|
|
import '../../../widgets/custom_elevated_button.dart';
|
|
import '../duolingo_viewmodel.dart';
|
|
|
|
class DuolingoRetakeScreen extends ViewModelWidget<DuolingoViewModel> {
|
|
final String title;
|
|
final String subtitle;
|
|
const DuolingoRetakeScreen(
|
|
{super.key, required this.title, required this.subtitle});
|
|
|
|
@override
|
|
Widget build(BuildContext context, DuolingoViewModel viewModel) =>
|
|
_buildScaffoldWrapper(viewModel);
|
|
|
|
Widget _buildScaffoldWrapper(DuolingoViewModel viewModel) => Scaffold(
|
|
backgroundColor: kcBackgroundColor,
|
|
body: _buildSafeWrapper(viewModel),
|
|
);
|
|
Widget _buildSafeWrapper(DuolingoViewModel viewModel) =>
|
|
SafeArea(child: _buildScaffold(viewModel));
|
|
|
|
Widget _buildScaffold(DuolingoViewModel viewModel) => Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: _buildScaffoldChildren(viewModel),
|
|
);
|
|
|
|
List<Widget> _buildScaffoldChildren(DuolingoViewModel viewModel) => [
|
|
_buildAppBar(viewModel),
|
|
verticalSpaceMedium,
|
|
_buildExpandedBody(viewModel)
|
|
];
|
|
|
|
Widget _buildExpandedBody(DuolingoViewModel viewModel) =>
|
|
Expanded(child: _buildBodyWrapper(viewModel));
|
|
|
|
Widget _buildBodyWrapper(DuolingoViewModel viewModel) => Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 15),
|
|
child: _buildBody(viewModel),
|
|
);
|
|
|
|
Widget _buildBody(DuolingoViewModel viewModel) => Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: _buildBodyChildren(viewModel),
|
|
);
|
|
|
|
List<Widget> _buildBodyChildren(DuolingoViewModel viewModel) =>
|
|
[_buildUpperColumn(viewModel), _buildLowerColumn(viewModel)];
|
|
|
|
Widget _buildUpperColumn(DuolingoViewModel viewModel) => Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
|
children: _buildUpperColumnChildren(viewModel),
|
|
);
|
|
|
|
List<Widget> _buildUpperColumnChildren(DuolingoViewModel viewModel) => [
|
|
verticalSpaceLarge,
|
|
_buildIcon(),
|
|
verticalSpaceMedium,
|
|
_buildTitle(),
|
|
verticalSpaceSmall,
|
|
_buildSubtitle(),
|
|
];
|
|
|
|
Widget _buildAppBar(DuolingoViewModel viewModel) => DuolingoAssessmentAppBar(
|
|
onClose: () => viewModel.goTo(0),
|
|
);
|
|
|
|
Widget _buildIcon() => SvgPicture.asset(
|
|
'assets/icons/complete.svg',
|
|
);
|
|
|
|
Widget _buildTitle() => Text(
|
|
title,
|
|
style: style25DG600,
|
|
textAlign: TextAlign.center,
|
|
);
|
|
|
|
Widget _buildSubtitle() => Text(
|
|
subtitle,
|
|
style: style14MG400,
|
|
textAlign: TextAlign.center,
|
|
);
|
|
|
|
Widget _buildLowerColumn(DuolingoViewModel viewModel) => Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: _buildLowerColumnChildren(viewModel),
|
|
);
|
|
|
|
List<Widget> _buildLowerColumnChildren(DuolingoViewModel viewModel) => [
|
|
_buildContinueButton(viewModel),
|
|
verticalSpaceSmall,
|
|
_buildSkipButtonWrapper(viewModel)
|
|
];
|
|
|
|
Widget _buildContinueButton(DuolingoViewModel viewModel) =>
|
|
CustomElevatedButton(
|
|
height: 55,
|
|
safe: false,
|
|
borderRadius: 12,
|
|
foregroundColor: kcWhite,
|
|
text: 'Practice Again',
|
|
onTap: () => viewModel.goTo(0),
|
|
backgroundColor: kcPrimaryColor,
|
|
);
|
|
|
|
Widget _buildSkipButtonWrapper(DuolingoViewModel viewModel) => Padding(
|
|
padding: const EdgeInsets.only(bottom: 50),
|
|
child: _buildSkipButton(viewModel),
|
|
);
|
|
|
|
Widget _buildSkipButton(DuolingoViewModel viewModel) => CustomElevatedButton(
|
|
height: 55,
|
|
text: 'Continue',
|
|
borderRadius: 12,
|
|
backgroundColor: kcWhite,
|
|
borderColor: kcPrimaryColor,
|
|
onTap: () => viewModel.goTo(6),
|
|
foregroundColor: kcPrimaryColor,
|
|
);
|
|
}
|