From f0719134c5fa8ecbf56da4e5c8aea7879c8a0e5e Mon Sep 17 00:00:00 2001 From: BrightDV <92821484+BrightDV@users.noreply.github.com> Date: Tue, 7 May 2024 14:00:40 +0200 Subject: [PATCH] [circuit] improve track's image popup (#157) --- lib/Screens/circuit.dart | 207 ++++++++++++++------------------ lib/api/race_components.dart | 12 +- lib/helpers/racetracks_url.dart | 6 +- 3 files changed, 99 insertions(+), 126 deletions(-) diff --git a/lib/Screens/circuit.dart b/lib/Screens/circuit.dart index 75c5fd8..ddb449c 100644 --- a/lib/Screens/circuit.dart +++ b/lib/Screens/circuit.dart @@ -1382,131 +1382,110 @@ class RaceImageProvider extends StatelessWidget { } class TrackLayoutImage extends StatelessWidget { - Future getTrackLayoutImageUrl(Race race) async { - return await RaceTracksUrls().getTrackLayoutImageUrl(race.circuitId); + String getTrackLayoutImageUrl(Race race) { + return RaceTracksUrls().getTrackLayoutImageUrl(race.circuitId); } final Race race; const TrackLayoutImage(this.race, {Key? key}) : super(key: key); @override Widget build(BuildContext context) { - bool useDarkMode = - Hive.box('settings').get('darkMode', defaultValue: true) as bool; - return FutureBuilder( - future: getTrackLayoutImageUrl(race), - builder: (context, snapshot) { - if (snapshot.hasError) { - return RequestErrorWidget( - snapshot.error.toString(), - ); - } - return snapshot.hasData - ? GestureDetector( - onTap: () { - showDialog( - context: context, - builder: (BuildContext context) { - return AlertDialog( - contentPadding: const EdgeInsets.only( - top: 52, - bottom: 50, - ), - insetPadding: EdgeInsets.zero, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(10.0), - ), - backgroundColor: Colors.transparent, - content: Builder( - builder: (context) { - return SizedBox( - width: double.infinity - 10, - child: InteractiveViewer( - minScale: 0.1, - maxScale: 8, - child: Stack( - children: [ - GestureDetector( - onTap: () => Navigator.pop(context), - ), - Card( - color: - Colors.transparent.withOpacity(0.5), - elevation: 5.0, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(5), - ), - clipBehavior: Clip.antiAlias, - child: Image( - image: NetworkImage( - snapshot.data!, - ), - loadingBuilder: (context, child, - loadingProgress) => - loadingProgress == null - ? child - : SizedBox( - height: - MediaQuery.of(context) - .size - .width / - (16 / 9), - child: - const LoadingIndicatorUtil(), - ), - errorBuilder: (context, url, error) => - Icon( - Icons.error_outlined, - color: useDarkMode - ? Colors.white - : Colors.black, - size: 30, - ), - ), - ), - Align( - alignment: Alignment.topRight, - child: IconButton( - onPressed: () => Navigator.pop(context), - icon: const Icon( - Icons.close_rounded, - color: Colors.white, + return GestureDetector( + onTap: () { + showDialog( + context: context, + builder: (BuildContext context) { + return AlertDialog( + contentPadding: const EdgeInsets.only( + top: 52, + bottom: 50, + ), + insetPadding: EdgeInsets.zero, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(10.0), + ), + backgroundColor: Colors.transparent, + shadowColor: Colors.black, + surfaceTintColor: Colors.transparent, + content: Builder( + builder: (context) { + return SizedBox( + width: double.infinity - 10, + child: InteractiveViewer( + minScale: 0.1, + maxScale: 8, + child: Stack( + children: [ + GestureDetector( + onTap: () => Navigator.pop(context), + ), + Card( + color: Colors.black, + elevation: 5.0, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(5), + ), + clipBehavior: Clip.antiAlias, + child: Image( + image: NetworkImage( + getTrackLayoutImageUrl(race), + ), + loadingBuilder: (context, child, + loadingProgress) => + loadingProgress == null + ? child + : SizedBox( + height: MediaQuery.of(context) + .size + .width / + (16 / 9), + child: const LoadingIndicatorUtil(), ), - ), - ), - ], - ), + errorBuilder: (context, url, error) => Icon( + Icons.error_outlined, + size: 30, ), - ); - }, - ), - ); - }, - ); - }, - child: Stack( - alignment: Alignment.bottomCenter, - children: [ - Image.network( - snapshot.data!, - loadingBuilder: (context, child, loadingProgress) => - loadingProgress == null - ? child - : SizedBox( - height: MediaQuery.of(context).size.width / - (16 / 9), - child: const LoadingIndicatorUtil(), - ), - errorBuilder: (context, url, error) => Icon( - Icons.error_outlined, - color: useDarkMode ? Colors.white : Colors.black, - size: 30, + ), + ), + Align( + alignment: Alignment.topRight, + child: IconButton( + onPressed: () => Navigator.pop(context), + icon: const Icon( + Icons.close_rounded, + color: Colors.white, + ), + ), + ), + ], ), ), - ], - ), - ) - : const LoadingIndicatorUtil(); + ); + }, + ), + ); + }, + ); }, + child: Stack( + alignment: Alignment.bottomCenter, + children: [ + Image.network( + getTrackLayoutImageUrl(race), + loadingBuilder: (context, child, loadingProgress) => + loadingProgress == null + ? child + : SizedBox( + height: MediaQuery.of(context).size.width / (16 / 9), + child: const LoadingIndicatorUtil(), + ), + errorBuilder: (context, url, error) => Icon( + Icons.error_outlined, + size: 30, + ), + ), + ], + ), ); } } diff --git a/lib/api/race_components.dart b/lib/api/race_components.dart index 503ede0..e5cede9 100644 --- a/lib/api/race_components.dart +++ b/lib/api/race_components.dart @@ -18,7 +18,6 @@ */ // import 'package:awesome_notifications/awesome_notifications.dart'; -import 'package:boxbox/helpers/loading_indicator_util.dart'; import 'package:boxbox/helpers/news.dart'; import 'package:boxbox/helpers/racetracks_url.dart'; import 'package:boxbox/Screens/circuit.dart'; @@ -75,14 +74,9 @@ class RaceItem extends StatelessWidget { child: index == 0 && isUpNext ? Column( children: [ - FutureBuilder( - future: RaceTracksUrls().getRaceCoverImageUrl(item.circuitId), - builder: (context, snapshot) => snapshot.hasData - ? ImageRenderer( - snapshot.data!, - inSchedule: true, - ) - : const LoadingIndicatorUtil(), + ImageRenderer( + RaceTracksUrls().getRaceCoverImageUrl(item.circuitId), + inSchedule: true, ), RaceListItem(item, index), ], diff --git a/lib/helpers/racetracks_url.dart b/lib/helpers/racetracks_url.dart index f9e59b5..2d785f0 100644 --- a/lib/helpers/racetracks_url.dart +++ b/lib/helpers/racetracks_url.dart @@ -98,17 +98,17 @@ class RaceTracksUrls { "yas_marina": "Abu_Dhabi", "shanghai": "Chinese", }; - Future getRaceTrackImageUrl(String gpId) async { + String getRaceTrackImageUrl(String gpId) { String gpName = trackUrlConverter[gpId]!; return "https://media.formula1.com/image/upload/f_auto/q_auto/v1677238736/content/dam/fom-website/2018-redesign-assets/Racehub%20header%20images%2016x9/$gpName.jpg.transform/fullbleed/image.jpg"; } - Future getTrackLayoutImageUrl(String gpId) async { + String getTrackLayoutImageUrl(String gpId) { String gpName = trackLayoutConverter[gpId]!.replaceAll(' ', '_'); return "https://media.formula1.com/image/upload/f_auto/q_auto/v1677244987/content/dam/fom-website/2018-redesign-assets/Circuit%20maps%2016x9/${gpName}_Circuit.png"; } - Future getRaceCoverImageUrl(String gpId) async { + String getRaceCoverImageUrl(String gpId) { String gpName = raceCoverImageConverter[gpId]!; return "https://media.formula1.com/content/dam/fom-website/races/${DateTime.now().year}/${gpName}_Grand_Prix.png"; }