import 'package:cached_network_image/cached_network_image.dart'; import 'package:carousel_slider/carousel_slider.dart'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:flutter_widget_from_html/flutter_widget_from_html.dart'; import 'package:manager_api/api.dart'; import 'package:photo_view/photo_view.dart'; import 'package:provider/provider.dart'; import 'package:tablet_app/Components/show_element_for_resource.dart'; import 'package:tablet_app/Models/map-marker.dart'; import 'package:tablet_app/Screens/Quizz/quizz_view.dart'; import 'package:tablet_app/app_context.dart'; import '../../constants.dart'; import 'map_context.dart'; class MarkerViewWidget extends StatefulWidget { MarkerViewWidget(); @override _MarkerInfoWidget createState() => _MarkerInfoWidget(); } class _MarkerInfoWidget extends State { Size sizeScreen = new Size(1080.0, 1920.0); // Tablet resolution CarouselController? sliderController; ValueNotifier currentIndex = ValueNotifier(1); @override void initState() { sliderController = CarouselController(); super.initState(); } @override void dispose() { sliderController = null; super.dispose(); } @override Widget build(BuildContext context) { Size size = MediaQuery.of(context).size; final mapContext = Provider.of(context); Size sizeMarker = Size(size.width * 0.42, size.height * 0.8); return new AnimatedPositioned( duration: const Duration(milliseconds: 1500), curve: Curves.easeInOutSine, right: 25, // 140 top: 10, // 150 child: Visibility( visible: (mapContext.getSelectedMarker() as MapMarker).longitude != null, child: Container( width: sizeMarker.width, height: sizeMarker.height, margin: EdgeInsets.symmetric(vertical: 3, horizontal: 4), decoration: BoxDecoration( color: kBackgroundLight, // Colors.amberAccent //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: Stack( children: [ Positioned( right: 5, top: 5, child: InkWell( onTap: () { setState(() { mapContext.setSelectedMarker(new MapMarker(longitude: null, latitude: null, title: '', contents: null, description: '')); }); }, child: Container( width: 50, height: 50, decoration: BoxDecoration( color: kMainGrey, shape: BoxShape.circle, boxShadow: [ BoxShadow( color: kMainGrey, spreadRadius: 0.5, blurRadius: 1.1, offset: Offset(0, 1.1), // changes position of shadow ), ], ), child: Icon( Icons.close, size: 25, color: Colors.white, ), ), ), ), Align( alignment: Alignment.topCenter, child: Padding( padding: const EdgeInsets.only(top: 20), child: HtmlWidget( (mapContext.getSelectedMarker() as MapMarker).title!, customStylesBuilder: (element) { return {'text-align': 'center'}; }, textStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: kIsWeb ? kWebTitleSize : kTitleSize) ), ), ), Padding( padding: const EdgeInsets.only(top: 75), child: Center( child: Stack( children: [ Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ if((mapContext.getSelectedMarker() as MapMarker).contents != null && (mapContext.getSelectedMarker() as MapMarker).contents!.length > 0) Stack( children: [ Container( //color: Colors.green, child: CarouselSlider( carouselController: sliderController, options: CarouselOptions( onPageChanged: (int index, CarouselPageChangedReason reason) { currentIndex.value = index + 1; }, height: size.height *0.35, enlargeCenterPage: true, pageSnapping: true, reverse: false, ), items: (mapContext.getSelectedMarker() as MapMarker).contents!.map((ContentGeoPoint i) { return Builder( builder: (BuildContext context) { AppContext appContext = Provider.of(context); var resourcetoShow = getElementForResource(context, appContext, i); return Padding( padding: const EdgeInsets.all(8.0), child: resourcetoShow, ); }, ); }).toList(), ), ), Positioned( bottom: 0, child: Container( //color: Colors.red, height: 25, width: sizeMarker.width, //color: Colors.amber, child: Padding( padding: const EdgeInsets.only(top: 0), child: Align( alignment: Alignment.bottomCenter, child: ValueListenableBuilder( valueListenable: currentIndex, builder: (context, value, _) { return Text( value.toString()+'/'+(mapContext.getSelectedMarker() as MapMarker).contents!.length.toString(), style: TextStyle(fontSize: 15, fontWeight: FontWeight.w500), ); } ) ), ), ), ), ], ), // Description Container( height: (mapContext.getSelectedMarker() as MapMarker).contents != null && (mapContext.getSelectedMarker() as MapMarker).contents!.length > 0 ? size.height *0.3 : size.height *0.6, width: MediaQuery.of(context).size.width *0.4, decoration: BoxDecoration( color: kBackgroundColor, 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: HtmlWidget( (mapContext.getSelectedMarker() as MapMarker).description!, customStylesBuilder: (element) { return {'text-align': 'center'}; }, textStyle: TextStyle(fontSize: kIsWeb ? kWebDescriptionSize : kDescriptionSize) ), ), ), ), ] ), if((mapContext.getSelectedMarker() as MapMarker).contents != null && (mapContext.getSelectedMarker() as MapMarker).contents!.length > 1) Positioned( top: MediaQuery.of(context).size.height * 0.125, right: -10, child: InkWell( onTap: () { if ((mapContext.getSelectedMarker() as MapMarker).contents!.length > 0) sliderController!.nextPage(duration: new Duration(milliseconds: 500), curve: Curves.fastOutSlowIn); }, child: Icon( Icons.chevron_right, size: kIsWeb ? 100 : 85, color: kTestSecondColor, ), ) ), if((mapContext.getSelectedMarker() as MapMarker).contents != null && (mapContext.getSelectedMarker() as MapMarker).contents!.length > 1) Positioned( top: MediaQuery.of(context).size.height * 0.125, left: -10, child: InkWell( onTap: () { if ((mapContext.getSelectedMarker() as MapMarker).contents!.length > 0) sliderController!.previousPage(duration: new Duration(milliseconds: 500), curve: Curves.fastOutSlowIn); }, child: Icon( Icons.chevron_left, size: kIsWeb ? 100 : 85, color: kTestSecondColor, ), ) ), ], ), ), ), ]) ), ) ); } } getElementForResource(BuildContext context, AppContext appContext, ContentGeoPoint i) { var widgetToInclude; switch(i.resourceType) { case ResourceType.Image: case ResourceType.ImageUrl: widgetToInclude = AspectRatio( aspectRatio: 16 / 9, child: ClipRect( child: i.resourceUrl != null ? PhotoView( imageProvider: CachedNetworkImageProvider(i.resourceUrl!), /*new NetworkImage( i.imageSource, ),*/ minScale: PhotoViewComputedScale.contained * 0.8, maxScale: PhotoViewComputedScale.contained * 3.0, backgroundDecoration: BoxDecoration( color: kBackgroundSecondGrey, shape: BoxShape.rectangle, borderRadius: BorderRadius.circular(15.0), ), ) : Center(child: Text('No data')), ), ); break; case ResourceType.Video: case ResourceType.VideoUrl: case ResourceType.Audio: widgetToInclude = Container( decoration: BoxDecoration( color: kBackgroundSecondGrey, shape: BoxShape.rectangle, borderRadius: BorderRadius.circular(15.0), ), child: showElementForResource(ResourceDTO(id: i.resourceId, url: i.resourceUrl, type: i.resourceType), appContext, false, true), ); break; } return Center( child: Container( child: AspectRatio( aspectRatio: 16 / 9, child: ClipRect( child: widgetToInclude, ), ), ), ); }