[circuit] improve track's image popup (#157)

BrightDV · May 7, 2024 · f071913 · f071913
1 parent 2cd5da7
commit f071913
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 126 deletions.
diff --git a/lib/Screens/circuit.dart b/lib/Screens/circuit.dart
@@ -1382,131 +1382,110 @@ class RaceImageProvider extends StatelessWidget {
 }
 
 class TrackLayoutImage extends StatelessWidget {
- Future<String> 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<String>(
- 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
@@ -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<String>(
- 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
@@ -98,17 +98,17 @@ class RaceTracksUrls {
  "yas_marina": "Abu_Dhabi",
  "shanghai": "Chinese",
  };
- Future<String> 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<String> 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<String> 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";
  }