renderDesktopView method
Implementation
Widget renderDesktopView(BuildContext context, QuizEngineState state) {
if (state.isLoading) {
return const OwlnextLoading();
}
var cs = Theme.of(context).colorScheme;
return Theme(
data: Theme.of(context),
child: LayoutBuilder(
builder: (context, constraints) {
var isMobile = isMobileView(context);
//view layout realted vars
double themeMaxWidth = state.quiz.theme.maxQuizWidth ?? 900.0;
double quizBoxWidth = constraints.maxWidth < themeMaxWidth ? constraints.maxWidth : themeMaxWidth;
double themeMaxHeight = state.quiz.theme.maxQuizHeight ?? constraints.maxHeight - 50;
double quizBoxHeight = themeMaxHeight - (state.quiz.theme.logoImage != null ? state.quiz.theme.logoHeight : 0);
if (isMobile) {
quizBoxHeight = constraints.maxHeight - (state.quiz.theme.logoImage != null ? state.quiz.theme.logoHeight : 0) - gap * 2;
}
if(state.widget.showOnlyResults) {
return SizedBox(
width: constraints.maxWidth,
height: constraints.maxHeight,
child: QuizRecapWidget(
quiz: state.quiz,
toggleSeeRecap: state.toggleSeeRecap,
),
);
}
return Container(
width: constraints.maxWidth,
height: constraints.maxHeight,
decoration: BoxDecoration(
color: state.quiz.theme.appBackgroundColor,
image: engineDecorationImage(context, state),
),
child: Stack(
alignment: Alignment.center,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
if (state.quiz.theme.logoImage != null) brandLogo(context, state),
Row(
//This row is important for width constraining
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
(state.showEndingQuizSuccessScreen)
? Align(
alignment: Alignment.center,
child: SizedBox(
width: quizBoxWidth,
height: quizBoxHeight,
child: backgroundBlurWrapper(
context,
state,
child: EndingQuizScreen(
quiz: state.quiz,
actions: state.widget.actions,
),
),
),
)
: Align(
alignment: Alignment.center,
child: SizedBox(
width: quizBoxWidth,
height: quizBoxHeight,
child: backgroundBlurWrapper(
context,
state,
child: Container(
decoration: BoxDecoration(
color: state.quiz.theme.quizBoxBackgroundColor ?? cs.surface,
borderRadius: BorderRadius.circular(radius),
),
child: (state.quiz.hasUnfinishedIntroStepper)
? InformationsStepperWidget(
steps: state.quiz.introStepper?.steps ?? [],
onPassedAllSteps: state.onFinishedIntroInformationsStepperWidget,
styleSheet: state.quiz.theme.getGenericMarkdownTheme(context),
)
: Stack(
children: [
Opacity(
opacity: state.isRecapOpen ? 0 : 1,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: const EdgeInsets.all(gap * 2).copyWith(bottom: 0),
child: QuizHeaderWidget(
quiz: state.quiz,
tooSmallHeight: (quizBoxHeight < 500),
),
),
if (state.showByStepProgress)
Container(
padding: const EdgeInsets.symmetric(horizontal: gap * 2).copyWith(bottom: gap),
child: Row(
spacing: gap * 2,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: StepBallsMode(
quiz: state.quiz,
),
),
//seeResponses(context, state), //TODO response preview to finish implement
],
),
),
if (state.showByQuestionProgress)
Container(
padding: const EdgeInsets.symmetric(horizontal: gap * 2).copyWith(bottom: gap),
child: QuestionProgressBar(quiz: state.quiz),
),
Expanded(
child: QuizSteppingModeWidget(
onFormHasBeenUpdated: state.onFormHasBeenUpdated,
quiz: state.quiz,
questionBackgroundColor: state.quiz.theme.questionBackgroundColor ?? Colors.transparent,
//textColor: state.quiz.theme.textColor ?? cs.onSurface,
textColor: cs.onSurface,
selectedColor: state.quiz.theme.selectedColor ?? cs.primary,
isChangingStep: state.isChangingStep,
formKey: state.formKey,
formHasError: state.formHasError,
questionsUniqueKey: state.questionsUniqueKey,
scrollController: state.scrollController,
handleNextModeQuestionByQuestion: state.handleNextModeQuestionByQuestion,
handlePreviousModeQuestionByQuestion: state.handlePreviousModeQuestionByQuestion,
handleNextModeStepByStep: state.handleNextModeStepByStep,
handlePreviousModeStepByStep: state.handlePreviousModeStepByStep,
),
),
],
),
),
if (state.isRecapOpen)
AnimatedPositioned(
top: 0,
bottom: 0,
right: 0,
left: 0,
duration: const Duration(milliseconds: 500),
child: Container(
padding: const EdgeInsets.all(gap * 2),
child: QuizRecapWidget(
quiz: state.quiz,
toggleSeeRecap: state.toggleSeeRecap,
),
),
),
],
),
),
),
),
),
],
),
],
),
if (kDebugMode)
Positioned(
bottom: gap,
left: gap,
child: Container(
decoration: BoxDecoration(
color: state.quiz.theme.quizBoxBackgroundColor,
borderRadius: BorderRadius.circular(radius),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
//spacing: gap,
children: [
if (state.showIntegrityCheckPanel)
Row(
children: [
SizedBox(
width: constraints.maxWidth / 5,
child: QuizIntegrityPanel(
info: state.quiz.getQuizIntegrityInformations(context),
),
),
],
),
togglerIntegrityCheck(context, state),
],
),
),
),
],
),
);
},
),
);
}