From 43b404c03c3abab26c6c8361e88104fd0c81c28a Mon Sep 17 00:00:00 2001 From: Thomas Fransolet Date: Fri, 15 Oct 2021 16:38:54 +0200 Subject: [PATCH] Add photoView to slider and marker view + set constant for font size --- lib/Screens/Configuration/config_view.dart | 4 +- lib/Screens/MainView/main_view.dart | 14 +++--- lib/Screens/Map/marker_view.dart | 30 +++++++++--- lib/Screens/Menu/menu_view.dart | 8 ++-- lib/Screens/Slider/slider_view.dart | 54 +++++++++++++++++----- lib/Screens/Video/video_view.dart | 3 +- lib/constants.dart | 11 +++++ pubspec.lock | 15 ++++-- pubspec.yaml | 1 + 9 files changed, 105 insertions(+), 35 deletions(-) diff --git a/lib/Screens/Configuration/config_view.dart b/lib/Screens/Configuration/config_view.dart index eac4085..96bd173 100644 --- a/lib/Screens/Configuration/config_view.dart +++ b/lib/Screens/Configuration/config_view.dart @@ -147,7 +147,8 @@ class _ConfigViewWidget extends State { text: "OK", fontSize: 25, press: () async { - var client = Client(url); + var client = new Client(url); + print(url); var isOk = await isValidApi(client); if (isOk) { Fluttertoast.showToast( @@ -254,6 +255,7 @@ class _ConfigViewWidget extends State { var configs = await client.configurationApi.configurationGet(); return configs != null; } catch (ex) { + print(ex); return false; } } diff --git a/lib/Screens/MainView/main_view.dart b/lib/Screens/MainView/main_view.dart index 1274b45..03bf90d 100644 --- a/lib/Screens/MainView/main_view.dart +++ b/lib/Screens/MainView/main_view.dart @@ -114,7 +114,7 @@ class _MainViewWidget extends State { alignment: Alignment.centerLeft, child: AutoSizeText( sectionSelected.title.firstWhere((translation) => translation.language == appContext.getContext().language).value, - style: new TextStyle(fontSize: 25), + style: new TextStyle(fontSize: kSectionTitleDetailSize), maxLines: 1, ), ) @@ -124,7 +124,7 @@ class _MainViewWidget extends State { alignment: Alignment.centerLeft, child: AutoSizeText( sectionSelected.description.firstWhere((translation) => translation.language == appContext.getContext().language).value, - style: new TextStyle(fontSize: 20), + style: new TextStyle(fontSize: kSectionDescriptionDetailSize), maxLines: 2, ), ) @@ -164,8 +164,8 @@ class _MainViewWidget extends State { ), floatingActionButtonLocation: FloatingActionButtonLocation.endTop, floatingActionButton: Container( - height: 150.0, - width: 150.0, + height: 185.0, + width: 185.0, child: FittedBox( child: FloatingActionButton.extended( onPressed: () { @@ -226,7 +226,7 @@ class _MainViewWidget extends State { alignment: Alignment.centerRight, child: AutoSizeText( snapshot.data[index].title.firstWhere((translation) => translation.language == appContext.getContext().language).value, - style: new TextStyle(fontSize: 25), + style: new TextStyle(fontSize: kMenuTitleDetailSize), maxLines: 1, ), ), @@ -234,7 +234,7 @@ class _MainViewWidget extends State { alignment: Alignment.centerRight, child: AutoSizeText( snapshot.data[index].description.firstWhere((translation) => translation.language == appContext.getContext().language).value, - style: new TextStyle(fontSize: 18, fontFamily: ""), + style: new TextStyle(fontSize: kMenuDescriptionDetailSize, fontFamily: ""), maxLines: 1, ), ), @@ -294,7 +294,7 @@ boxDecoration(SectionDTO section, bool isSelected) { shape: BoxShape.rectangle, borderRadius: BorderRadius.circular(30.0), image: section.imageSource != null ? new DecorationImage( - fit: BoxFit.cover, + fit: !isSelected? BoxFit.cover : BoxFit.contain, colorFilter: !isSelected? new ColorFilter.mode(Colors.black.withOpacity(0.5), BlendMode.dstATop) : null, image: new NetworkImage( section.imageSource, diff --git a/lib/Screens/Map/marker_view.dart b/lib/Screens/Map/marker_view.dart index 0661812..731cd66 100644 --- a/lib/Screens/Map/marker_view.dart +++ b/lib/Screens/Map/marker_view.dart @@ -1,5 +1,6 @@ import 'package:carousel_slider/carousel_slider.dart'; import 'package:flutter/material.dart'; +import 'package:photo_view/photo_view.dart'; import 'package:provider/provider.dart'; import 'package:tablet_app/Models/map-marker.dart'; @@ -83,7 +84,7 @@ class _MarkerInfoWidget extends State { alignment: Alignment.topCenter, child: Padding( padding: const EdgeInsets.only(top: 20), - child: Text(mapContext.getSelectedMarker().title, style: TextStyle(fontWeight: FontWeight.w600, fontSize: 30)), + child: Text(mapContext.getSelectedMarker().title, style: TextStyle(fontWeight: FontWeight.w600, fontSize: kTitleSize)), ), ), Padding( @@ -106,12 +107,12 @@ class _MarkerInfoWidget extends State { return Padding( padding: const EdgeInsets.all(8.0), child: Container( - width: MediaQuery.of(context).size.width, - decoration: BoxDecoration( + //width: MediaQuery.of(context).size.width *0.9, + /*decoration: BoxDecoration( borderRadius: BorderRadius.circular(20.0), border: Border.all(width: 0.3, color: kSecondGrey), image: i.imageSource != null ? new DecorationImage( - fit: BoxFit.cover, + fit: BoxFit.contain, image: new NetworkImage( i.imageSource, ), @@ -124,7 +125,24 @@ class _MarkerInfoWidget extends State { offset: Offset(0, 1.1), // changes position of shadow ), ], + ),*/ + child: AspectRatio( + aspectRatio: 16 / 9, + child: ClipRect( + child: PhotoView( + imageProvider: 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), + ), + ), ), + ) ), ); }, @@ -136,7 +154,7 @@ class _MarkerInfoWidget extends State { height: mapContext.getSelectedMarker().images != null && mapContext.getSelectedMarker().images.length > 0 ? size.height *0.3 : size.height *0.6, width: MediaQuery.of(context).size.width *0.35, decoration: BoxDecoration( - color: kBackgroundLight, + color: kBackgroundColor, shape: BoxShape.rectangle, borderRadius: BorderRadius.circular(10.0), boxShadow: [ @@ -151,7 +169,7 @@ class _MarkerInfoWidget extends State { child: SingleChildScrollView( child: Padding( padding: const EdgeInsets.all(15.0), - child: Text(mapContext.getSelectedMarker().description, textAlign: TextAlign.center, style: TextStyle(fontSize: 15)), + child: Text(mapContext.getSelectedMarker().description, textAlign: TextAlign.center, style: TextStyle(fontSize: kDescriptionSize)), ), ), ), diff --git a/lib/Screens/Menu/menu_view.dart b/lib/Screens/Menu/menu_view.dart index 580b457..5a2d352 100644 --- a/lib/Screens/Menu/menu_view.dart +++ b/lib/Screens/Menu/menu_view.dart @@ -123,7 +123,7 @@ class _MenuViewWidget extends State { ), child: Icon( Icons.arrow_back, - size: 70, + size: 95, color: kMainGrey, ), ), @@ -159,7 +159,7 @@ class _MenuViewWidget extends State { alignment: Alignment.centerRight, child: AutoSizeText( menuDTO.sections[index].title.firstWhere((translation) => translation.language == appContext.getContext().language).value, - style: new TextStyle(fontSize: 25), + style: new TextStyle(fontSize: kMenuTitleDetailSize), maxLines: 1, ), ), @@ -167,7 +167,7 @@ class _MenuViewWidget extends State { alignment: Alignment.centerRight, child: AutoSizeText( menuDTO.sections[index].description.firstWhere((translation) => translation.language == appContext.getContext().language).value, - style: new TextStyle(fontSize: 18, fontFamily: ""), + style: new TextStyle(fontSize: kSectionDescriptionDetailSize, fontFamily: ""), maxLines: 1, ), ), @@ -190,7 +190,7 @@ boxDecoration(SectionDTO section, bool isSelected) { shape: BoxShape.rectangle, borderRadius: BorderRadius.circular(30.0), image: section.imageSource != null ? new DecorationImage( - fit: BoxFit.cover, + fit: BoxFit.contain, colorFilter: !isSelected? new ColorFilter.mode(Colors.black.withOpacity(0.5), BlendMode.dstATop) : null, image: new NetworkImage( section.imageSource, diff --git a/lib/Screens/Slider/slider_view.dart b/lib/Screens/Slider/slider_view.dart index 1e48b76..1aee994 100644 --- a/lib/Screens/Slider/slider_view.dart +++ b/lib/Screens/Slider/slider_view.dart @@ -6,6 +6,7 @@ import 'package:managerapi/api.dart'; import 'package:provider/provider.dart'; import 'package:tablet_app/app_context.dart'; import 'package:tablet_app/constants.dart'; +import 'package:photo_view/photo_view.dart'; class SliderViewWidget extends StatefulWidget { final SectionDTO section; @@ -81,16 +82,16 @@ class _SliderViewWidget extends State { child: Container( height: MediaQuery.of(context).size.height * 0.6, width: MediaQuery.of(context).size.width * 0.72, - decoration: BoxDecoration( + /*decoration: BoxDecoration( color: kBackgroundLight, shape: BoxShape.rectangle, borderRadius: BorderRadius.circular(20.0), - image: i.source_ != null ? new DecorationImage( + /*image: i.source_ != null ? new DecorationImage( fit: BoxFit.cover, image: new NetworkImage( i.source_, ), - ): null, + ): null,*/ boxShadow: [ BoxShadow( color: kBackgroundSecondGrey, @@ -99,13 +100,42 @@ class _SliderViewWidget extends State { offset: Offset(0, 1.5), // changes position of shadow ), ], - ), - child: Align( - alignment: Alignment.bottomRight, - child: Padding( - padding: const EdgeInsets.all(15.0), - child: Text(i.title.firstWhere((translation) => translation.language == appContext.getContext().language).value != null ? i.title.firstWhere((translation) => translation.language == appContext.getContext().language).value : "", textAlign: TextAlign.center, style: TextStyle(fontSize: 35, color: kBackgroundLight)), - )), + ),*/ + child: Stack( + children: [ + 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: PhotoView( + imageProvider: new NetworkImage( + i.source_, + ), + minScale: PhotoViewComputedScale.contained * 0.8, + maxScale: PhotoViewComputedScale.contained * 3.0, + backgroundDecoration: BoxDecoration( + color: kBackgroundSecondGrey, + shape: BoxShape.rectangle, + borderRadius: BorderRadius.circular(15.0), + ), + ), + ), + ), + ), + ), + Positioned( + bottom: 0, + right: 0, + child: Padding( + padding: const EdgeInsets.all(15.0), + child: Text(i.title.firstWhere((translation) => translation.language == appContext.getContext().language).value != null ? i.title.firstWhere((translation) => translation.language == appContext.getContext().language).value : "", textAlign: TextAlign.center, style: TextStyle(fontSize: kTitleSize, color: kBackgroundLight)), + ) + ) + ] + ),/**/ ), ), Expanded( @@ -130,7 +160,7 @@ class _SliderViewWidget extends State { child: SingleChildScrollView( child: Padding( padding: const EdgeInsets.all(15.0), - child: Text(i.description.firstWhere((translation) => translation.language == appContext.getContext().language).value != null ? i.description.firstWhere((translation) => translation.language == appContext.getContext().language).value : "", textAlign: TextAlign.center, style: TextStyle(fontSize: 15)), + child: Text(i.description.firstWhere((translation) => translation.language == appContext.getContext().language).value != null ? i.description.firstWhere((translation) => translation.language == appContext.getContext().language).value : "", textAlign: TextAlign.center, style: TextStyle(fontSize: kDescriptionSize)), ), ), ), @@ -194,7 +224,7 @@ class _SliderViewWidget extends State { ), ), if(sliderDTO.images == null || sliderDTO.images.length == 0) - Center(child: Text("Aucune image à afficher")) + Center(child: Text("Aucune image à afficher", style: TextStyle(fontSize: kNoneInfoOrIncorrect),)) // Description /*Container( height: sliderDTO.images != null && sliderDTO.images.length > 0 ? size.height *0.3 : size.height *0.6, diff --git a/lib/Screens/Video/video_view.dart b/lib/Screens/Video/video_view.dart index e2ed452..d708325 100644 --- a/lib/Screens/Video/video_view.dart +++ b/lib/Screens/Video/video_view.dart @@ -2,6 +2,7 @@ import 'dart:convert'; import 'package:flutter/material.dart'; import 'package:managerapi/api.dart'; +import 'package:tablet_app/constants.dart'; import 'package:youtube_player_flutter/youtube_player_flutter.dart'; class VideoViewWidget extends StatefulWidget { @@ -58,5 +59,5 @@ class _VideoViewWidget extends State { } @override - Widget build(BuildContext context) => videoDTO.source_ != null && videoDTO.source_.length > 0 ? _videoView : Center(child: Text("La vidéo ne peut pas être affichée, l'url est incorrecte")); + Widget build(BuildContext context) => videoDTO.source_ != null && videoDTO.source_.length > 0 ? _videoView : Center(child: Text("La vidéo ne peut pas être affichée, l'url est incorrecte", style: new TextStyle(fontSize: kNoneInfoOrIncorrect),)); } \ No newline at end of file diff --git a/lib/constants.dart b/lib/constants.dart index b9572fb..42fdc98 100644 --- a/lib/constants.dart +++ b/lib/constants.dart @@ -16,6 +16,17 @@ const kBackgroundLight = Color(0xfff3f3f3); const List languages = ["FR", "NL", "EN", "DE"]; +const kTitleSize = 40.0; +const kDescriptionSize = 25.0; + +const kSectionTitleDetailSize = 50.0; +const kSectionDescriptionDetailSize = 35.0; + +const kMenuTitleDetailSize = 45.0; +const kMenuDescriptionDetailSize = 28.0; + +const kNoneInfoOrIncorrect = 35.0; + /* const kTextStyle = TextStyle( fontSize: 23, diff --git a/pubspec.lock b/pubspec.lock index 4a92390..47c1bd2 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -7,7 +7,7 @@ packages: name: async url: "https://pub.dartlang.org" source: hosted - version: "2.8.1" + version: "2.8.2" auto_size_text: dependency: "direct main" description: @@ -35,7 +35,7 @@ packages: name: characters url: "https://pub.dartlang.org" source: hosted - version: "1.1.0" + version: "1.2.0" charcode: dependency: transitive description: @@ -211,7 +211,7 @@ packages: name: matcher url: "https://pub.dartlang.org" source: hosted - version: "0.12.10" + version: "0.12.11" meta: dependency: transitive description: @@ -254,6 +254,13 @@ packages: url: "https://pub.dartlang.org" source: hosted version: "1.11.1" + photo_view: + dependency: "direct main" + description: + name: photo_view + url: "https://pub.dartlang.org" + source: hosted + version: "0.13.0" plugin_platform_interface: dependency: transitive description: @@ -342,7 +349,7 @@ packages: name: test_api url: "https://pub.dartlang.org" source: hosted - version: "0.4.2" + version: "0.4.3" typed_data: dependency: transitive description: diff --git a/pubspec.yaml b/pubspec.yaml index cb8f98c..651246f 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -36,6 +36,7 @@ dependencies: carousel_slider: ^4.0.0 youtube_player_flutter: ^7.0.0+7 mqtt_client: ^8.1.0 + photo_view: ^0.13.0 # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons.