315 lines
19 KiB
Dart
315 lines
19 KiB
Dart
import 'package:mymuseum_visitapp/Components/Carousel/carousel_slider.dart' as cs;
|
|
import 'package:flutter/gestures.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_widget_from_html/flutter_widget_from_html.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>[];
|
|
cs.CarouselController? sliderController;
|
|
int currentIndex = 1;
|
|
|
|
bool kIsWeb = false;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
sliderController = cs.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: [
|
|
SingleChildScrollView(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
mainAxisAlignment: MainAxisAlignment.start,
|
|
children: [
|
|
if(_questionsSubDTO.isNotEmpty)
|
|
cs.CarouselSlider(
|
|
carouselController: sliderController,
|
|
options: cs.CarouselOptions(
|
|
onPageChanged: (int index, cs.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.resourceUrl != null ? DecorationImage(
|
|
fit: BoxFit.cover,
|
|
opacity: 0.35,
|
|
image: NetworkImage(
|
|
i.resourceUrl!,
|
|
),
|
|
): 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: HtmlWidget(
|
|
TranslationHelper.getWithResource(i.label, appContext.getContext() as VisitAppContext),
|
|
//textAlign: TextAlign.center,
|
|
customStylesBuilder: (element) {
|
|
return {'text-align': 'center'};
|
|
},
|
|
textStyle: 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: HtmlWidget(
|
|
TranslationHelper.getWithResource(i.responsesSubDTO![index].label, appContext.getContext() as VisitAppContext),
|
|
//textAlign: TextAlign.center,
|
|
customStylesBuilder: (element) {
|
|
return {'text-align': 'center'};
|
|
},
|
|
textStyle: TextStyle(fontSize: kDescriptionSize, color: i.chosen == index ? Colors.white : Colors.black)),
|
|
decoration: BoxDecoration(
|
|
color: !widget.isShowResponse ? i.chosen == index ? kMainColor1 : 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
|
|
),
|
|
)
|
|
]
|
|
),
|
|
);
|
|
/*}
|
|
)*/;
|
|
}
|
|
} |