From db7b5e14b52add3686853f35e349c04dcba28e53 Mon Sep 17 00:00:00 2001 From: Mairon Lucas Date: Mon, 2 Sep 2024 21:13:31 -0300 Subject: [PATCH] Home carousel --- lib/presentation/home/common/game_chip.dart | 51 +++++ lib/presentation/home/home_bloc.dart | 207 +++++++++++++++++++- lib/presentation/home/home_page.dart | 133 ++++--------- pubspec.lock | 32 +-- pubspec.yaml | 1 + 5 files changed, 317 insertions(+), 107 deletions(-) create mode 100644 lib/presentation/home/common/game_chip.dart diff --git a/lib/presentation/home/common/game_chip.dart b/lib/presentation/home/common/game_chip.dart new file mode 100644 index 0000000..10eb68a --- /dev/null +++ b/lib/presentation/home/common/game_chip.dart @@ -0,0 +1,51 @@ +import 'package:flutter/material.dart'; + +class GameChip extends StatelessWidget { + const GameChip({ + required this.homeTeamLogo, + required this.visitorTeamLogo, + required this.homeTeamScore, + required this.visitorTeamScore, + super.key, + }); + + final String homeTeamLogo; + final String visitorTeamLogo; + final String homeTeamScore; + final String visitorTeamScore; + + @override + Widget build(BuildContext context) => Container( + decoration: BoxDecoration( + color: Theme.of(context).colorScheme.surfaceContainer, + borderRadius: BorderRadius.circular(8), + border: Border.all( + color: Theme.of(context).colorScheme.outline, + width: 3, + ), + ), + padding: EdgeInsets.all(4), + child: Column( + children: [ + Expanded( + child: Image.network( + homeTeamLogo, + ), + ), + Text( + homeTeamScore, + style: Theme.of(context).textTheme.bodyMedium, + ), + Text( + visitorTeamScore, + style: Theme.of(context).textTheme.bodyMedium, + ), + Expanded( + child: Image.network( + visitorTeamLogo, + ), + ), + ], + ), + ); +} diff --git a/lib/presentation/home/home_bloc.dart b/lib/presentation/home/home_bloc.dart index e2a55a6..90e2766 100644 --- a/lib/presentation/home/home_bloc.dart +++ b/lib/presentation/home/home_bloc.dart @@ -22,15 +22,14 @@ class HomeBloc extends Bloc { GetLiveGames event, Emitter emitter, ) async { - final useMock = false; + final useMock = true; emitter(HomeLoading()); try { await Future.delayed(Duration(seconds: 2)); - final liveGames = await _getLiveGamesUC.getFuture(null); emitter( HomeSuccess( liveGames: !useMock - ? liveGames + ? (await _getLiveGamesUC.getFuture(null)) : [ GameSummary( date: DateTime.now(), @@ -80,8 +79,208 @@ class HomeBloc extends Bloc { name: 'Atlanta Hawks', nickName: 'Lakers', code: 'LKR', + logoUrl: 'https://upload.wikimedia.org/wikipedia/fr/e/ee/Hawks_2016.png'), + visitorTeam: Team( + id: 'hasd', + name: 'Boston Celtics', + nickName: 'Celtics', + code: 'BCS', + logoUrl: + 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Brooklyn_Nets_newlogo.svg/130px-Brooklyn_Nets_newlogo.svg.png'), + homeTeamScore: TeamScore( + wins: 10, + loses: 5, + points: 120, + ), + visitorTeamScore: TeamScore( + wins: 13, + loses: 2, + points: 100, + ), + ), + GameSummary( + date: DateTime.now(), + period: 1, + gameStatus: GameStatus( + isFinished: false, + isHalfTime: false, + ), + id: '123', + arenaName: 'Crypto Arena', + homeTeam: Team( + id: 'hasd', + name: 'Los Angeles Lakers', + nickName: 'Lakers', + code: 'LKR', logoUrl: - 'https://upload.wikimedia.org/wikipedia/fr/e/ee/Hawks_2016.png'), + 'https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Los_Angeles_Lakers_logo.svg/220px-Los_Angeles_Lakers_logo.svg.png'), + visitorTeam: Team( + id: 'hasd', + name: 'Boston Celtics', + nickName: 'Celtics', + code: 'BCS', + logoUrl: + 'https://upload.wikimedia.org/wikipedia/fr/thumb/6/65/Celtics_de_Boston_logo.svg/1024px-Celtics_de_Boston_logo.svg.png'), + homeTeamScore: TeamScore( + wins: 10, + loses: 5, + points: 27, + ), + visitorTeamScore: TeamScore( + wins: 13, + loses: 2, + points: 33, + ), + ), + GameSummary( + date: DateTime.now(), + period: 4, + gameStatus: GameStatus( + isFinished: false, + isHalfTime: false, + ), + id: '123', + arenaName: 'Crypto Arena', + homeTeam: Team( + id: 'hasd', + name: 'Atlanta Hawks', + nickName: 'Lakers', + code: 'LKR', + logoUrl: 'https://upload.wikimedia.org/wikipedia/fr/e/ee/Hawks_2016.png'), + visitorTeam: Team( + id: 'hasd', + name: 'Boston Celtics', + nickName: 'Celtics', + code: 'BCS', + logoUrl: + 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Brooklyn_Nets_newlogo.svg/130px-Brooklyn_Nets_newlogo.svg.png'), + homeTeamScore: TeamScore( + wins: 10, + loses: 5, + points: 120, + ), + visitorTeamScore: TeamScore( + wins: 13, + loses: 2, + points: 100, + ), + ), + GameSummary( + date: DateTime.now(), + period: 1, + gameStatus: GameStatus( + isFinished: false, + isHalfTime: false, + ), + id: '123', + arenaName: 'Crypto Arena', + homeTeam: Team( + id: 'hasd', + name: 'Los Angeles Lakers', + nickName: 'Lakers', + code: 'LKR', + logoUrl: + 'https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Los_Angeles_Lakers_logo.svg/220px-Los_Angeles_Lakers_logo.svg.png'), + visitorTeam: Team( + id: 'hasd', + name: 'Boston Celtics', + nickName: 'Celtics', + code: 'BCS', + logoUrl: + 'https://upload.wikimedia.org/wikipedia/fr/thumb/6/65/Celtics_de_Boston_logo.svg/1024px-Celtics_de_Boston_logo.svg.png'), + homeTeamScore: TeamScore( + wins: 10, + loses: 5, + points: 27, + ), + visitorTeamScore: TeamScore( + wins: 13, + loses: 2, + points: 33, + ), + ), + GameSummary( + date: DateTime.now(), + period: 4, + gameStatus: GameStatus( + isFinished: false, + isHalfTime: false, + ), + id: '123', + arenaName: 'Crypto Arena', + homeTeam: Team( + id: 'hasd', + name: 'Atlanta Hawks', + nickName: 'Lakers', + code: 'LKR', + logoUrl: 'https://upload.wikimedia.org/wikipedia/fr/e/ee/Hawks_2016.png'), + visitorTeam: Team( + id: 'hasd', + name: 'Boston Celtics', + nickName: 'Celtics', + code: 'BCS', + logoUrl: + 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Brooklyn_Nets_newlogo.svg/130px-Brooklyn_Nets_newlogo.svg.png'), + homeTeamScore: TeamScore( + wins: 10, + loses: 5, + points: 120, + ), + visitorTeamScore: TeamScore( + wins: 13, + loses: 2, + points: 100, + ), + ), + GameSummary( + date: DateTime.now(), + period: 1, + gameStatus: GameStatus( + isFinished: false, + isHalfTime: false, + ), + id: '123', + arenaName: 'Crypto Arena', + homeTeam: Team( + id: 'hasd', + name: 'Los Angeles Lakers', + nickName: 'Lakers', + code: 'LKR', + logoUrl: + 'https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Los_Angeles_Lakers_logo.svg/220px-Los_Angeles_Lakers_logo.svg.png'), + visitorTeam: Team( + id: 'hasd', + name: 'Boston Celtics', + nickName: 'Celtics', + code: 'BCS', + logoUrl: + 'https://upload.wikimedia.org/wikipedia/fr/thumb/6/65/Celtics_de_Boston_logo.svg/1024px-Celtics_de_Boston_logo.svg.png'), + homeTeamScore: TeamScore( + wins: 10, + loses: 5, + points: 27, + ), + visitorTeamScore: TeamScore( + wins: 13, + loses: 2, + points: 33, + ), + ), + GameSummary( + date: DateTime.now(), + period: 4, + gameStatus: GameStatus( + isFinished: false, + isHalfTime: false, + ), + id: '123', + arenaName: 'Crypto Arena', + homeTeam: Team( + id: 'hasd', + name: 'Atlanta Hawks', + nickName: 'Lakers', + code: 'LKR', + logoUrl: 'https://upload.wikimedia.org/wikipedia/fr/e/ee/Hawks_2016.png'), visitorTeam: Team( id: 'hasd', name: 'Boston Celtics', diff --git a/lib/presentation/home/home_page.dart b/lib/presentation/home/home_page.dart index bc5ed2f..f8be6be 100644 --- a/lib/presentation/home/home_page.dart +++ b/lib/presentation/home/home_page.dart @@ -1,8 +1,10 @@ +import 'package:carousel_slider/carousel_slider.dart'; import 'package:domain/use_case/get_live_games_uc.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:get_it/get_it.dart'; import 'package:nbapp/generated/l10n.dart'; +import 'package:nbapp/presentation/home/common/game_chip.dart'; import 'package:nbapp/presentation/home/home_bloc.dart'; import 'package:nbapp/presentation/home/home_models.dart'; @@ -26,103 +28,52 @@ class HomePage extends StatelessWidget { textAlign: TextAlign.center, ), SizedBox(height: 16), - Container( - width: double.infinity, - child: Text( - S.of(context).liveGames, - style: Theme.of(context).textTheme.bodyMedium, - textAlign: TextAlign.start, + BlocProvider( + create: (context) => HomeBloc( + getLiveGamesUC: GetIt.instance.get(), ), - ), - SizedBox(height: 4), - Container( - height: 168, - decoration: BoxDecoration( - color: Theme.of(context).colorScheme.surfaceContainer, - borderRadius: BorderRadius.circular(8), - border: Border.all( - color: Theme.of(context).colorScheme.outline, - width: 1, - ), - ), - child: BlocProvider( - create: (context) => HomeBloc( - getLiveGamesUC: GetIt.instance.get(), - ), - child: BlocBuilder( - builder: (context, state) => switch (state) { - HomeLoading() => Center( - child: CircularProgressIndicator(), - ), - HomeError() => Center( - child: Text( - S.of(context).tryAgain, - style: TextStyle( - color: Theme.of(context).colorScheme.error, - ), + child: BlocBuilder( + builder: (context, state) => switch (state) { + HomeLoading() => Center( + child: CircularProgressIndicator(), + ), + HomeError() => Center( + child: Text( + S.of(context).tryAgain, + style: TextStyle( + color: Theme.of(context).colorScheme.error, ), ), - HomeSuccess() => state.liveGames.isEmpty - ? Center( - child: Text( - S.of(context).emptyLiveGames, - textAlign: TextAlign.center, - ), - ) - : Padding( - padding: const EdgeInsets.all(8.0), - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - ...state.liveGames.map( - (game) => Padding( - padding: const EdgeInsets.symmetric( - horizontal: 8.0), - child: Container( - decoration: BoxDecoration( - color: Theme.of(context) - .colorScheme - .surfaceContainer, - borderRadius: - BorderRadius.circular(8), - border: Border.all( - color: Theme.of(context) - .colorScheme - .outline, - width: 1, - ), - ), - padding: EdgeInsets.all(4), - child: Column( - children: [ - Image.network( - game.homeTeam.logoUrl, - height: 50, - width: 50, - ), - Text( - game.homeTeamScore.points - .toString(), - ), - Text( - game.visitorTeamScore.points - .toString(), - ), - Image.network( - game.visitorTeam.logoUrl, - height: 50, - width: 50, - ), - ], - ), - ), + ), + HomeSuccess() => state.liveGames.isEmpty + ? Center( + child: Text( + S.of(context).emptyLiveGames, + textAlign: TextAlign.center, + ), + ) + : CarouselSlider( + items: state.liveGames + .map( + (game) => Padding( + padding: const EdgeInsets.symmetric(horizontal: 4), + child: GameChip( + homeTeamLogo: game.homeTeam.logoUrl, + visitorTeamLogo: game.visitorTeam.logoUrl, + homeTeamScore: game.homeTeamScore.points.toString(), + visitorTeamScore: game.visitorTeamScore.points.toString(), ), ), - ], - ), + ) + .toList(), + options: CarouselOptions( + enableInfiniteScroll: false, + viewportFraction: 0.25, + autoPlay: true, + enlargeCenterPage: true, ), - }, - ), + ), + }, ), ), ], diff --git a/pubspec.lock b/pubspec.lock index 8c5333b..eda912e 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -113,6 +113,14 @@ packages: url: "https://pub.dev" source: hosted version: "8.9.2" + carousel_slider: + dependency: "direct main" + description: + name: carousel_slider + sha256: "7b006ec356205054af5beaef62e2221160ea36b90fb70a35e4deacd49d0349ae" + url: "https://pub.dev" + source: hosted + version: "5.0.0" characters: dependency: transitive description: @@ -376,18 +384,18 @@ packages: dependency: transitive description: name: leak_tracker - sha256: "7f0df31977cb2c0b88585095d168e689669a2cc9b97c309665e3386f3e9d341a" + sha256: "3f87a60e8c63aecc975dda1ceedbc8f24de75f09e4856ea27daf8958f2f0ce05" url: "https://pub.dev" source: hosted - version: "10.0.4" + version: "10.0.5" leak_tracker_flutter_testing: dependency: transitive description: name: leak_tracker_flutter_testing - sha256: "06e98f569d004c1315b991ded39924b21af84cf14cc94791b8aea337d25b57f8" + sha256: "932549fb305594d82d7183ecd9fa93463e9914e1b67cacc34bc40906594a1806" url: "https://pub.dev" source: hosted - version: "3.0.3" + version: "3.0.5" leak_tracker_testing: dependency: transitive description: @@ -424,18 +432,18 @@ packages: dependency: transitive description: name: material_color_utilities - sha256: "0e0a020085b65b6083975e499759762399b4475f766c21668c4ecca34ea74e5a" + sha256: f7142bb1154231d7ea5f96bc7bde4bda2a0945d2806bb11670e30b850d56bdec url: "https://pub.dev" source: hosted - version: "0.8.0" + version: "0.11.1" meta: dependency: transitive description: name: meta - sha256: "7687075e408b093f36e6bbf6c91878cc0d4cd10f409506f7bc996f68220b9136" + sha256: bdb68674043280c3428e9ec998512fb681678676b3c54e773629ffe74419f8c7 url: "https://pub.dev" source: hosted - version: "1.12.0" + version: "1.15.0" mime: dependency: transitive description: @@ -653,10 +661,10 @@ packages: dependency: transitive description: name: test_api - sha256: "9955ae474176f7ac8ee4e989dadfb411a58c30415bcfb648fa04b2b8a03afa7f" + sha256: "5b8a98dafc4d5c4c9c72d8b31ab2b23fc13422348d2997120294d3bac86b4ddb" url: "https://pub.dev" source: hosted - version: "0.7.0" + version: "0.7.2" timing: dependency: transitive description: @@ -685,10 +693,10 @@ packages: dependency: transitive description: name: vm_service - sha256: "3923c89304b715fb1eb6423f017651664a03bf5f4b29983627c4da791f74a4ec" + sha256: "5c5f338a667b4c644744b661f309fb8080bb94b18a7e91ef1dbd343bed00ed6d" url: "https://pub.dev" source: hosted - version: "14.2.1" + version: "14.2.5" watcher: dependency: transitive description: diff --git a/pubspec.yaml b/pubspec.yaml index 0ec2201..e3df771 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -23,6 +23,7 @@ dependencies: bloc: ^8.1.4 flutter_bloc: ^8.1.6 intl: ^0.19.0 + carousel_slider: ^5.0.0 dev_dependencies: build_runner: ^2.4.11