mirror of
https://bitbucket.org/FransoletThomas/tablet-app.git
synced 2025-12-06 16:41:19 +00:00
308 lines
14 KiB
Dart
308 lines
14 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/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<MarkerViewWidget> {
|
|
Size sizeScreen = new Size(1080.0, 1920.0); // Tablet resolution
|
|
CarouselController? sliderController;
|
|
ValueNotifier<int> currentIndex = ValueNotifier<int>(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<MapContext>(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: <Widget> [
|
|
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<Widget>((ContentGeoPoint i) {
|
|
return Builder(
|
|
builder: (BuildContext context) {
|
|
AppContext appContext = Provider.of<AppContext>(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<int>(
|
|
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,
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|