359 lines
16 KiB
Dart
359 lines
16 KiB
Dart
import 'package:cached_network_image/cached_network_image.dart';
|
|
import 'package:carousel_slider/carousel_slider.dart';
|
|
import 'package:flutter/foundation.dart';
|
|
import 'package:flutter/gestures.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';
|
|
import 'package:manager_api_new/api.dart';
|
|
import 'package:mymuseum_visitapp/Components/show_element_for_resource.dart';
|
|
import 'package:mymuseum_visitapp/Helpers/ImageCustomProvider.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';
|
|
import 'package:photo_view/photo_view.dart';
|
|
import 'package:smooth_page_indicator/smooth_page_indicator.dart';
|
|
|
|
class SliderPage extends StatefulWidget {
|
|
final SliderDTO section;
|
|
SliderPage({required this.section});
|
|
|
|
@override
|
|
_SliderPage createState() => _SliderPage();
|
|
}
|
|
|
|
class _SliderPage extends State<SliderPage> {
|
|
SliderDTO sliderDTO = SliderDTO();
|
|
CarouselSliderController? sliderController;
|
|
ValueNotifier<int> currentIndex = ValueNotifier<int>(1);
|
|
|
|
late ConfigurationDTO configurationDTO;
|
|
|
|
@override
|
|
void initState() {
|
|
sliderController = CarouselSliderController();
|
|
sliderDTO = widget.section;
|
|
sliderDTO.contents!.sort((a, b) => a.order!.compareTo(b.order!));
|
|
|
|
super.initState();
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
sliderController = null;
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
Size size = MediaQuery.of(context).size;
|
|
final appContext = Provider.of<AppContext>(context);
|
|
VisitAppContext visitAppContex = appContext.getContext() as VisitAppContext;
|
|
Color? primaryColor = visitAppContex.configuration!.primaryColor != null ? Color(int.parse(visitAppContex.configuration!.primaryColor!.split('(0x')[1].split(')')[0], radix: 16)) : null;
|
|
|
|
configurationDTO = appContext.getContext().configuration;
|
|
|
|
return Stack(
|
|
children: [
|
|
Container(
|
|
height: size.height,
|
|
width: size.width,
|
|
color: kBackgroundLight,
|
|
),
|
|
if(sliderDTO.contents != null && sliderDTO.contents!.isNotEmpty)
|
|
Center(
|
|
child: CarouselSlider(
|
|
carouselController: sliderController,
|
|
options: CarouselOptions(
|
|
onPageChanged: (int index, CarouselPageChangedReason reason) {
|
|
currentIndex.value = index + 1;
|
|
},
|
|
enableInfiniteScroll: false,
|
|
height: MediaQuery.of(context).size.height * 0.92,
|
|
enlargeCenterPage: false,
|
|
reverse: false,
|
|
),
|
|
items: sliderDTO.contents!.map<Widget>((i) {
|
|
return Builder(
|
|
builder: (BuildContext context) {
|
|
return Container(
|
|
width: MediaQuery.of(context).size.width,
|
|
height: MediaQuery.of(context).size.height,
|
|
margin: const EdgeInsets.symmetric(horizontal: 5.0),
|
|
decoration: BoxDecoration(
|
|
color: kBackgroundGrey,
|
|
//color: configurationDTO.imageId == null ? configurationDTO.secondaryColor != null ? new Color(int.parse(configurationDTO.secondaryColor!.split('(0x')[1].split(')')[0], radix: 16)): kBackgroundGrey : null,
|
|
borderRadius: BorderRadius.circular(visitAppContex.configuration!.roundedValue?.toDouble() ?? 10.0),
|
|
//border: Border.all(width: 0.3, color: kSecondGrey),
|
|
),
|
|
child: Column(
|
|
//crossAxisAlignment: CrossAxisAlignment.center,
|
|
//mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
|
children: [
|
|
Padding(
|
|
padding: const EdgeInsets.all(10.0),
|
|
child: Container(
|
|
//color: Colors.orange,
|
|
height: MediaQuery.of(context).size.height * 0.6,
|
|
width: MediaQuery.of(context).size.width * 0.72,
|
|
/*decoration: BoxDecoration(
|
|
color: kBackgroundLight,
|
|
shape: BoxShape.rectangle,
|
|
borderRadius: BorderRadius.circular(20.0),
|
|
/*image: i.source_ != null ? new DecorationImage(
|
|
fit: BoxFit.cover,
|
|
image: new NetworkImage(
|
|
i.source_,
|
|
),
|
|
): null,*/
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: kBackgroundSecondGrey,
|
|
spreadRadius: 0.5,
|
|
blurRadius: 5,
|
|
offset: Offset(0, 1.5), // changes position of shadow
|
|
),
|
|
],
|
|
),*/
|
|
child: Stack(
|
|
children: [
|
|
getElementForResource(appContext, i),
|
|
Positioned(
|
|
bottom: 0,
|
|
right: 0,
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(15.0),
|
|
child: HtmlWidget(
|
|
i.title!.where((translation) => translation.language == appContext.getContext().language).firstOrNull?.value != null ? i.title!.firstWhere((translation) => translation.language == appContext.getContext().language).value! : "",
|
|
textStyle: const TextStyle(fontSize: kTitleSize, color: kBackgroundLight),
|
|
),
|
|
)
|
|
)
|
|
]
|
|
),/**/
|
|
),
|
|
),
|
|
Expanded(
|
|
child: Padding(
|
|
padding: const EdgeInsets.only(bottom: 10),
|
|
child: Container(
|
|
height: MediaQuery.of(context).size.height *0.25,
|
|
width: MediaQuery.of(context).size.width *0.7,
|
|
decoration: BoxDecoration(
|
|
color: kBackgroundLight,// kBackgroundLight,
|
|
shape: BoxShape.rectangle,
|
|
borderRadius: BorderRadius.circular(visitAppContex.configuration!.roundedValue?.toDouble() ?? 10.0),
|
|
boxShadow: const [
|
|
BoxShadow(
|
|
color: kBackgroundSecondGrey,
|
|
spreadRadius: 0.3,
|
|
blurRadius: 4,
|
|
offset: Offset(0, 2), // changes position of shadow
|
|
),
|
|
],
|
|
),
|
|
child: SingleChildScrollView(
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(15.0),
|
|
child: HtmlWidget(
|
|
i.description!.where((translation) => translation.language == appContext.getContext().language).firstOrNull?.value != null ? i.description!.firstWhere((translation) => translation.language == appContext.getContext().language).value! : "",
|
|
textStyle: const TextStyle(fontSize: kDescriptionSize),
|
|
customStylesBuilder: (element) {
|
|
return {'text-align': 'center', 'font-family': "Roboto"};
|
|
},
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
)
|
|
);
|
|
},
|
|
);
|
|
}).toList(),
|
|
),
|
|
),
|
|
/*if(sliderDTO.contents != null && sliderDTO.contents!.length > 1)
|
|
Positioned(
|
|
top: MediaQuery.of(context).size.height * 0.35,
|
|
right: 60,
|
|
child: InkWell(
|
|
onTap: () {
|
|
if (sliderDTO.contents!.length > 0)
|
|
sliderController!.nextPage(duration: new Duration(milliseconds: 500), curve: Curves.fastOutSlowIn);
|
|
},
|
|
child: Icon(
|
|
Icons.chevron_right,
|
|
size: 90,
|
|
color: primaryColor ?? kMainColor,
|
|
),
|
|
)
|
|
),*/
|
|
/*if(sliderDTO.contents != null && sliderDTO.contents!.length > 1)
|
|
Positioned(
|
|
top: MediaQuery.of(context).size.height * 0.35,
|
|
left: 60,
|
|
child: InkWell(
|
|
onTap: () {
|
|
if (sliderDTO.contents!.length > 0)
|
|
sliderController!.previousPage(duration: new Duration(milliseconds: 500), curve: Curves.fastOutSlowIn);
|
|
},
|
|
child: Icon(
|
|
Icons.chevron_left,
|
|
size: 90,
|
|
color: primaryColor ?? kMainColor,
|
|
),
|
|
)
|
|
),*/
|
|
if(sliderDTO.contents != null && sliderDTO.contents!.isNotEmpty) // Todo replace by dot ?
|
|
Padding(
|
|
padding: widget.section.parentId == null ? const EdgeInsets.only(bottom: 20) : const EdgeInsets.only(left: 15, bottom: 20),
|
|
child: Align(
|
|
alignment: widget.section.parentId == null ? Alignment.bottomCenter : Alignment.bottomLeft,
|
|
child: InkWell(
|
|
onTap: () {
|
|
sliderController!.previousPage(duration: const Duration(milliseconds: 500), curve: Curves.fastOutSlowIn);
|
|
},
|
|
child: ValueListenableBuilder<int>(
|
|
valueListenable: currentIndex,
|
|
builder: (context, value, _) {
|
|
return AnimatedSmoothIndicator(
|
|
activeIndex: value -1,
|
|
count: sliderDTO.contents!.length,
|
|
effect: ExpandingDotsEffect(activeDotColor: primaryColor!),
|
|
);
|
|
|
|
/*Text(
|
|
value.toString()+'/'+sliderDTO.contents!.length.toString(),
|
|
style: const TextStyle(fontSize: 25, fontWeight: FontWeight.w500),
|
|
);*/
|
|
}
|
|
),
|
|
)
|
|
),
|
|
),
|
|
if(sliderDTO.contents == null || sliderDTO.contents!.isEmpty)
|
|
const Center(child: Text("Aucun contenu à afficher", style: TextStyle(fontSize: kNoneInfoOrIncorrect))),
|
|
Positioned(
|
|
top: 35,
|
|
left: 10,
|
|
child: SizedBox(
|
|
width: 50,
|
|
height: 50,
|
|
child: InkWell(
|
|
onTap: () {
|
|
Navigator.of(context).pop();
|
|
},
|
|
child: Container(
|
|
decoration: const BoxDecoration(
|
|
color: kMainColor,
|
|
shape: BoxShape.circle,
|
|
),
|
|
child: const Icon(Icons.arrow_back, size: 23, color: Colors.white)
|
|
),
|
|
)
|
|
),
|
|
),
|
|
// Description
|
|
/*Container(
|
|
height: sliderDTO.images != null && sliderDTO.images.length > 0 ? size.height *0.3 : size.height *0.6,
|
|
width: MediaQuery.of(context).size.width *0.35,
|
|
decoration: BoxDecoration(
|
|
color: kBackgroundLight,
|
|
shape: BoxShape.rectangle,
|
|
borderRadius: BorderRadius.circular(10.0),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: kBackgroundSecondGrey,
|
|
spreadRadius: 0.5,
|
|
blurRadius: 1.1,
|
|
offset: Offset(0, 1.1), // changes position of shadow
|
|
),
|
|
],
|
|
),
|
|
child: SingleChildScrollView(
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(15.0),
|
|
child: Text(sliderDTO., textAlign: TextAlign.center, style: TextStyle(fontSize: 15)),
|
|
),
|
|
),
|
|
),*/
|
|
]
|
|
);
|
|
}
|
|
|
|
getElementForResource(AppContext appContext, ContentDTO i) {
|
|
var widgetToInclude;
|
|
VisitAppContext visitAppContext = appContext.getContext() as VisitAppContext;
|
|
|
|
switch(i.resource!.type) {
|
|
case ResourceType.Image:
|
|
widgetToInclude = PhotoView(
|
|
imageProvider: ImageCustomProvider.getImageProvider(appContext, i.resourceId!, i.resource!.url!),
|
|
minScale: PhotoViewComputedScale.contained * 0.8,
|
|
maxScale: PhotoViewComputedScale.contained * 3.0,
|
|
backgroundDecoration: BoxDecoration(
|
|
color: kBackgroundLight,
|
|
shape: BoxShape.rectangle,
|
|
boxShadow: const [
|
|
BoxShadow(
|
|
color: kBackgroundGrey,
|
|
spreadRadius: 0.3,
|
|
blurRadius: 4,
|
|
offset: Offset(0, 2), // changes position of shadow
|
|
),
|
|
],
|
|
borderRadius: BorderRadius.circular(visitAppContext.configuration!.roundedValue?.toDouble() ?? 15.0),
|
|
),
|
|
);
|
|
break;
|
|
case ResourceType.ImageUrl:
|
|
widgetToInclude = PhotoView(
|
|
imageProvider: CachedNetworkImageProvider(i.resource!.url!),
|
|
minScale: PhotoViewComputedScale.contained * 0.8,
|
|
maxScale: PhotoViewComputedScale.contained * 3.0,
|
|
backgroundDecoration: BoxDecoration(
|
|
color: kBackgroundLight,
|
|
shape: BoxShape.rectangle,
|
|
boxShadow: const [
|
|
BoxShadow(
|
|
color: kBackgroundGrey,
|
|
spreadRadius: 0.3,
|
|
blurRadius: 4,
|
|
offset: Offset(0, 2), // changes position of shadow
|
|
),
|
|
],
|
|
borderRadius: BorderRadius.circular(visitAppContext.configuration!.roundedValue?.toDouble() ?? 15.0),
|
|
),
|
|
);
|
|
break;
|
|
case ResourceType.Video:
|
|
case ResourceType.VideoUrl:
|
|
case ResourceType.Audio:
|
|
widgetToInclude = Container(
|
|
decoration: BoxDecoration(
|
|
color: kBackgroundLight,
|
|
//shape: BoxShape.rectangle,
|
|
borderRadius: BorderRadius.circular(visitAppContext.configuration!.roundedValue?.toDouble() ?? 15.0),
|
|
),
|
|
child: showElementForResource(ResourceDTO(id: i.resourceId, url: i.resource!.url, type: i.resource!.type), appContext, false, true),
|
|
);
|
|
break;
|
|
}
|
|
|
|
return Center(
|
|
child: Container(
|
|
height: MediaQuery.of(context).size.height * 0.6,
|
|
width: MediaQuery.of(context).size.width * 0.72,
|
|
child: AspectRatio(
|
|
aspectRatio: 16 / 9,
|
|
child: ClipRect(
|
|
child: widgetToInclude,
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
} |