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? 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 { List _questionsSubDTO = []; 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(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((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 ), ) ] ), ); /*} )*/; } }