mymuseum-visitapp/lib/Screens/Quizz/questions_list.dart

300 lines
18 KiB
Dart

import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:mymuseum_visitapp/Helpers/translationHelper.dart';
import 'package:mymuseum_visitapp/Models/ResponseSubDTO.dart';
import 'package:mymuseum_visitapp/Models/visitContext.dart';
import 'package:mymuseum_visitapp/app_context.dart';
import 'package:mymuseum_visitapp/constants.dart';
import 'package:provider/provider.dart';
class QuestionsListWidget extends StatefulWidget {
List<QuestionSubDTO>? questionsSubDTO;
bool isShowResponse = false;
final Function onShowResponse;
Orientation orientation;
QuestionsListWidget({Key? key, this.questionsSubDTO, required this.isShowResponse, required this.onShowResponse, required this.orientation}) : super(key: key);
@override
_QuestionsListWidget createState() => _QuestionsListWidget();
}
class _QuestionsListWidget extends State<QuestionsListWidget> {
List<QuestionSubDTO> _questionsSubDTO = <QuestionSubDTO>[];
CarouselController? sliderController;
int currentIndex = 1;
bool kIsWeb = false;
@override
void initState() {
super.initState();
sliderController = CarouselController();
_questionsSubDTO = widget.questionsSubDTO!;
}
@override
void dispose() {
sliderController = null;
currentIndex = 1;
super.dispose();
}
@override
Widget build(BuildContext context) {
//Size sizeAll = MediaQuery.of(context).size;
//Size size = Size(sizeAll.width * 0.65, kIsWeb ? sizeAll.height * 0.5 : sizeAll.height * 0.32);
final appContext = Provider.of<AppContext>(context);
/*return OrientationBuilder(
builder: (context, orientation) {*/
return SizedBox(
height: widget.isShowResponse ?
widget.orientation == Orientation.portrait ?
MediaQuery.of(context).size.height * 0.85 :
MediaQuery.of(context).size.height * 0.75 :
widget.orientation == Orientation.portrait ?
MediaQuery.of(context).size.height :
MediaQuery.of(context).size.height,
width: double.infinity,
//color: Colors.orange,
child: Stack(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: [
if(_questionsSubDTO.isNotEmpty)
CarouselSlider(
carouselController: sliderController,
options: CarouselOptions(
onPageChanged: (int index, CarouselPageChangedReason reason) {
setState(() {
currentIndex = index + 1;
});
},
height: widget.isShowResponse ? widget.orientation == Orientation.portrait ? MediaQuery.of(context).size.height * 0.79 : MediaQuery.of(context).size.height * 0.6 : MediaQuery.of(context).size.height * 0.85,
enlargeCenterPage: true,
scrollPhysics: const NeverScrollableScrollPhysics(),
reverse: false,
),
items: _questionsSubDTO.map<Widget>((i) {
return Builder(
builder: (BuildContext context) {
return Padding(
padding: const EdgeInsets.only(left: 7.5, right: 7.5, bottom: 10.0, top: 8.0),
child: Container(
width: MediaQuery.of(context).size.width,
// height: widget.isShowResponse ? MediaQuery.of(context).size.height *0.55 : MediaQuery.of(context).size.height,
margin: const EdgeInsets.symmetric(horizontal: 1.5),
decoration: BoxDecoration(
//color: Colors.orange, //kBackgroundLight
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(20.0),
image: i.source_ != null ? DecorationImage(
fit: BoxFit.cover,
opacity: 0.35,
image: NetworkImage(
i.source_!,
),
): null,
boxShadow: const [
BoxShadow(
color: kBackgroundSecondGrey,
spreadRadius: 0.5,
blurRadius: 5,
offset: Offset(0, 1.5), // changes position of shadow
),
],
),
child: Column(
//crossAxisAlignment: CrossAxisAlignment.center,
//mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SizedBox(
//color: Colors.red,
//width: MediaQuery.of(context).size.width *0.65,
height: MediaQuery.of(context).size.height *0.25,
child: Stack(
children: [
Center(
child: Container(
decoration: BoxDecoration(
color: kBackgroundLight, //kBackgroundLight
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(10.0),
boxShadow: const [
BoxShadow(
color: kBackgroundSecondGrey,
spreadRadius: 0.3,
blurRadius: 4,
offset: Offset(0, 2), // changes position of shadow
),
],
),
width: MediaQuery.of(context).size.width *0.7,
height: MediaQuery.of(context).size.height *0.2,
child: Center(
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(2.5),
child: Text(TranslationHelper.get(i.label, appContext.getContext() as VisitAppContext), textAlign: TextAlign.center, style: const TextStyle(fontSize: kDescriptionSize)),
),
),
),
)
),
]
),
),
/*SizedBox(
height: MediaQuery.of(context).size.height * 0.01,
),*/
Expanded(
child: Padding(
padding: const EdgeInsets.all(5.0),
child: SizedBox(
//height: MediaQuery.of(context).size.height * 0.75,
width: MediaQuery.of(context).size.width * 0.72,
//color: Colors.green,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: widget.orientation == Orientation.portrait ? 1 : 2, // TODO HERE IS TABLET
mainAxisExtent: widget.isShowResponse ?
widget.orientation == Orientation.portrait ?
60 :
50 :
widget.orientation == Orientation.portrait ?
60 :
60, // TODO depends on percentage
mainAxisSpacing: widget.isShowResponse ?
widget.orientation == Orientation.portrait ?
30 :
10 :
widget.orientation == Orientation.portrait ?
32.5 :
32.5, // TODO depends on percentage
crossAxisSpacing: widget.isShowResponse ? 0 : 0, // TODO depends on percentage
),
itemCount: i.responsesSubDTO!.length,
itemBuilder: (BuildContext ctx, index) {
return InkWell(
onTap: () {
if(!widget.isShowResponse) {
setState(() {
i.chosen = index;
if(currentIndex == _questionsSubDTO.length && i.chosen == index)
{
widget.onShowResponse();
//showResult = true;
//_controllerCenter!.play(); // TODO Maybe show only confetti on super score ..
} else {
sliderController!.nextPage(duration: const Duration(milliseconds: 650), curve: Curves.fastOutSlowIn);
}
});
}
},
child: Padding(
padding: const EdgeInsets.all(2.5),
child: Container(
alignment: Alignment.center,
child: Text(TranslationHelper.get(i.responsesSubDTO![index].label, appContext.getContext() as VisitAppContext), textAlign: TextAlign.center, style: TextStyle(fontSize: kDescriptionSize, color: i.chosen == index ? Colors.white : Colors.black)),
decoration: BoxDecoration(
color: !widget.isShowResponse ? i.chosen == index ? kTestSecondColor : kBackgroundLight : i.responsesSubDTO![index].isGood! ? kGreen : i.chosen == index ? kTextRed : kBackgroundLight,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(10.0),
boxShadow: const [
BoxShadow(
color: kBackgroundSecondGrey,
spreadRadius: 0.3,
blurRadius: 4,
offset: Offset(0, 2), // changes position of shadow
),
],
),
),
),
);
}),
),
),
),
),
],
)
),
);
},
);
}).toList(),
),
],
),
if(widget.questionsSubDTO!.isNotEmpty && _questionsSubDTO.length > 1 && currentIndex != _questionsSubDTO.length && _questionsSubDTO[currentIndex-1].chosen != null)
Positioned(
top: widget.orientation == Orientation.portrait ? MediaQuery.of(context).size.height * 0.38 : MediaQuery.of(context).size.height * 0.325,
right: widget.orientation == Orientation.portrait ? -9 : 25,
child: InkWell(
onTap: () {
if( _questionsSubDTO.isNotEmpty && _questionsSubDTO[currentIndex-1].chosen != null) {
sliderController!.nextPage(duration: const Duration(milliseconds: 500), curve: Curves.fastOutSlowIn);
}
},
child: const Icon(
Icons.chevron_right,
size: 75,
color: kMainColor,
),
)
),
if(_questionsSubDTO.length > 1 && currentIndex != 1)
Positioned(
top: widget.orientation == Orientation.portrait ? MediaQuery.of(context).size.height * 0.38 : MediaQuery.of(context).size.height * 0.325,
left: widget.orientation == Orientation.portrait ? -9 : 25,
child: InkWell(
onTap: () {
if(currentIndex > 1) {
sliderController!.previousPage(duration: const Duration(milliseconds: 500), curve: Curves.fastOutSlowIn);
}
},
child: const Icon(
Icons.chevron_left,
size: 75,
color: kMainColor,
),
)
),
if(_questionsSubDTO.isNotEmpty)
Positioned.fill(
child: Padding(
padding: EdgeInsets.only(bottom: widget.isShowResponse ? 0 : 0),
child: Align(
alignment: Alignment.bottomCenter,
child: InkWell(
child: Text(
currentIndex.toString()+'/'+widget.questionsSubDTO!.length.toString(),
style: const TextStyle(fontSize: 30, fontWeight: FontWeight.w500),
),
)
),
),
),
if(_questionsSubDTO.isEmpty)
const Center(
child: Text(
"Aucune question à afficher",
style: TextStyle(fontSize: kNoneInfoOrIncorrect),
textAlign: TextAlign.center
),
)
]
),
);
/*}
)*/;
}
}