[Add] Implement Home screen UI

assets/translations/en.json

@@ -1,10 +1,19 @@
 {
-  "continue_on_boarding": "Continue",
+  "continueOnBoarding": "Continue",
   "login": "Login",
   "signup": "Signup",
-  "on_boarding_page_1_title": "All your favorite \n MARVEL Movies & Series \n at one place",
-  "on_boarding_page_2_title": "Watch Online \n or \n Download Offline",
-  "on_boarding_page_3_title": "Create profiles for \n different members & \n get personalised \n recommendations",
-  "on_boarding_page_4_title": "Plans according to your \n needs at affordable \n prices",
-  "on_boarding_page_5_title": "Let's Get Started !!!"
+  "onBoardingPageFirstTitle": "All your favorite \n MARVEL Movies & Series \n at one place",
+  "onBoardingPageSecondTitle": "Watch Online \n or \n Download Offline",
+  "onBoardingPageThirdTitle": "Create profiles for \n different members & \n get personalised \n recommendations",
+  "onBoardingPageFourthTitle": "Plans according to your \n needs at affordable \n prices",
+  "onBoardingPageFifthTitle": "Let's Get Started !!!",
+  "home": "Home",
+  "categories": "Categories",
+  "downloads": "Downloads",
+  "more": "More",
+  "latestMovies": "Latest Movies",
+  "latestSeries": "Latest Series",
+  "trendingToday": "Trending Today",
+  "oldMovies": "Old Movies",
+  "oldSeries": "Old Series"
 }

assets/translations/vi.json

@@ -1,10 +1,19 @@
 {
-  "continue_on_boarding": "Tiếp tục",
+  "continueOnBoarding": "Tiếp tục",
   "login": "Đăng nhập",
   "signup": "Đăng ký",
-  "on_boarding_page_1_title": "Tất cả \n phim MARVEL & Series \n tại một nơi",
-  "on_boarding_page_2_title": "Xem trực tuyến \n hoặc \n tải xuống ngoại tuyến",
-  "on_boarding_page_3_title": "Tạo hồ sơ cho \n các thành viên khác nhau & \n nhận đề xuất \n được cá nhân hóa",
-  "on_boarding_page_4_title": "Các gói theo nhu cầu của bạn \n với mức giá phải chăng",
-  "on_boarding_page_5_title": "Bắt đầu thôi !!!"
+  "onBoardingPageFirstTitle": "Tất cả \n phim MARVEL & Series \n tại một nơi",
+  "onBoardingPageSecondTitle": "Xem trực tuyến \n hoặc \n tải xuống ngoại tuyến",
+  "onBoardingPageThirdTitle": "Tạo hồ sơ cho \n các thành viên khác nhau & \n nhận đề xuất \n được cá nhân hóa",
+  "onBoardingPageFourthTitle": "Các gói theo nhu cầu của bạn \n với mức giá phải chăng",
+  "onBoardingPageFifthTitle": "Bắt đầu thôi !!!",
+  "home": "Trang chủ",
+  "categories": "Thể loại",
+  "downloads": "Tải xuống",
+  "more": "Thêm",
+  "latestMovies": "Những Bộ Phim Gần Đây",
+  "latestSeries": "Sê-ri Mới Nhất",
+  "trendingToday": "Xu Hướng Hôm Nay",
+  "oldMovies": "Những Bộ Phim Cũ",
+  "oldSeries": "Sê-ri Cũ"
 }

lib/bloc_observer.dart

@@ -0,0 +1,29 @@
+import 'package:flutter_bloc/flutter_bloc.dart';
+
+class AppBlocObserver extends BlocObserver {
+  const AppBlocObserver();
+
+  @override
+  void onEvent(Bloc bloc, Object? event) {
+    super.onEvent(bloc, event);
+    print(event);
+  }
+
+  @override
+  void onError(BlocBase bloc, Object error, StackTrace stackTrace) {
+    super.onError(bloc, error, stackTrace);
+    print(error);
+  }
+
+  @override
+  void onChange(BlocBase bloc, Change change) {
+    super.onChange(bloc, change);
+    print(change);
+  }
+
+  @override
+  void onTransition(Bloc bloc, Transition transition) {
+    super.onTransition(bloc, transition);
+    print(transition);
+  }
+}

lib/categories/categories.dart

@@ -0,0 +1,10 @@
+import 'package:flutter/material.dart';
+
+class CategoriesScreen extends StatelessWidget {
+  const CategoriesScreen({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return const Center(child: Text("Categories"),);
+  }
+}

lib/downloads/downloads.dart

@@ -0,0 +1,10 @@
+import 'package:flutter/material.dart';
+
+class DownloadsScreen extends StatelessWidget {
+  const DownloadsScreen({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return const Center(child: Text("Download"),);
+  }
+}

lib/exports/screens.dart

@@ -0,0 +1,6 @@
+export '/categories/categories.dart';
+export '/downloads/downloads.dart';
+export '/home/home_page.dart';
+export '/more/more.dart';
+export '/moviedetails/movie_details.dart';
+export '/onboarding/on_boarding.dart';

lib/home/components/carousel_slider_shader.dart

@@ -0,0 +1,51 @@
+import 'package:carousel_slider/carousel_slider.dart';
+import 'package:flutter/material.dart';
+
+class CarouselSliderShaderWidget extends StatelessWidget {
+  const CarouselSliderShaderWidget({
+    super.key,
+    required List<String> paths, required this.onItemTapped,
+  }) : _paths = paths;
+
+  final Gradient _maskingGradient = const LinearGradient(
+    colors: [
+      Colors.black,
+      Colors.transparent,
+    ],
+    stops: [0.0, 0.4],
+    tileMode: TileMode.mirror,
+    begin: Alignment.centerLeft,
+    end: Alignment.center,
+  );
+  final List<String> _paths;
+  final Function(int index) onItemTapped;
+
+  @override
+  Widget build(BuildContext context) {
+    return ShaderMask(
+      shaderCallback: (bounds) => _maskingGradient.createShader(bounds),
+      blendMode: BlendMode.darken,
+      child: CarouselSlider(
+        options: CarouselOptions(
+          height: 173.0,
+          enlargeFactor: 0.2,
+          viewportFraction: 0.7,
+          enlargeCenterPage: true,
+        ),
+        items: _paths.map((path) {
+          return Builder(builder: (BuildContext context) {
+            return GestureDetector(
+              child: Container(
+                width: MediaQuery.of(context).size.width,
+                margin: const EdgeInsets.symmetric(horizontal: 6.0),
+                decoration: const BoxDecoration(color: Colors.amber),
+                child: Image.asset(path, fit: BoxFit.fill),
+              ),
+              onTap: () {onItemTapped(_paths.indexOf(path));},
+            );
+          });
+        }).toList(),
+      ),
+    );
+  }
+}

lib/home/components/horizontal_movie_list_view.dart

@@ -0,0 +1,40 @@
+import 'package:flutter/material.dart';
+
+class HorizontalMoviesListView extends StatelessWidget {
+  const HorizontalMoviesListView({
+    super.key,
+    required List<String> paths,
+    required this.itemWidth,
+    required this.itemHeight,
+    required this.onItemTapped,
+  }) : _paths = paths;
+
+  final List<String> _paths;
+  final double itemWidth;
+  final double itemHeight;
+  final Function(int index) onItemTapped;
+
+  @override
+  Widget build(BuildContext context) {
+    return ListView.builder(
+      physics: const ClampingScrollPhysics(),
+      shrinkWrap: true,
+      scrollDirection: Axis.horizontal,
+      itemCount: _paths.length,
+      itemBuilder: (BuildContext context, int index) => Padding(
+        padding: const EdgeInsets.only(
+          left: 12.0,
+        ),
+        child: GestureDetector(
+          child: Image.asset(
+            _paths.elementAt(index),
+            fit: BoxFit.cover,
+            width: itemWidth,
+            height: itemHeight,
+          ),
+          onTap: () => {onItemTapped(index)},
+        ),
+      ),
+    );
+  }
+}

lib/home/cubit/home_cubit.dart

@@ -0,0 +1,6 @@
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_movie_clean/home/cubit/home_state.dart';
+
+class HomeCubit extends Cubit<HomeState> {
+  HomeCubit() : super(HomeState());
+}

lib/home/cubit/home_state.dart

@@ -0,0 +1,28 @@
+import '../../generated/assets.gen.dart';
+
+class HomeState {
+  HomeState();
+
+  final List<String> moviesPaths = [
+    Assets.images.movies.movies1.path,
+    Assets.images.movies.movies2.path,
+    Assets.images.movies.movies3.path,
+  ];
+
+  final List<String> seriesPaths = [
+    Assets.images.series.series1.path,
+    Assets.images.series.series2.path,
+    Assets.images.series.series3.path,
+  ];
+
+  final List<String> trendingPaths = [
+    Assets.images.trendings.trending1.path,
+    Assets.images.trendings.trending2.path,
+    Assets.images.trendings.trending3.path,
+    Assets.images.trendings.trending4.path,
+    Assets.images.trendings.trending1.path,
+    Assets.images.trendings.trending2.path,
+    Assets.images.trendings.trending3.path,
+    Assets.images.trendings.trending4.path,
+  ];
+}

lib/home/home_page.dart

@@ -0,0 +1,17 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+
+import 'cubit/home_cubit.dart';
+import 'home_view.dart';
+
+class HomeScreen extends StatelessWidget {
+  const HomeScreen({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider(
+      create: (_) => HomeCubit(),
+      child: const HomeView(),
+    );
+  }
+}

lib/home/home_view.dart

@@ -0,0 +1,109 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_movie_clean/widgets/header_widget.dart';
+import 'package:go_router/go_router.dart';
+
+import '../generated/locale_keys.g.dart';
+import 'components/carousel_slider_shader.dart';
+import 'components/horizontal_movie_list_view.dart';
+import 'cubit/home_cubit.dart';
+
+class HomeView extends StatelessWidget {
+  const HomeView({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final state = BlocProvider.of<HomeCubit>(context, listen: false).state;
+    return SingleChildScrollView(
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          const SizedBox(height: 16.0),
+          HeaderWidget(onProfileTapped: () {}),
+          Padding(
+            padding: const EdgeInsets.only(left: 12.0, bottom: 14.0),
+            child: Text(
+              LocaleKeys.latestMovies.tr(),
+              style: Theme.of(context).textTheme.titleLarge,
+            ),
+          ),
+          CarouselSliderShaderWidget(
+            paths: state.moviesPaths,
+            onItemTapped: (int index) {
+              context.go(context.namedLocation('movie_details'));
+            },
+          ),
+          Padding(
+            padding: const EdgeInsets.only(top: 24.0, left: 12.0, bottom: 14.0),
+            child: Text(
+              LocaleKeys.latestSeries.tr(),
+              style: Theme.of(context).textTheme.titleLarge,
+            ),
+          ),
+          CarouselSliderShaderWidget(
+            paths: state.seriesPaths,
+            onItemTapped: (int index) {
+              context.go(context.namedLocation('movie_details'));
+            },
+          ),
+          Padding(
+            padding: const EdgeInsets.only(top: 24.0, left: 12.0, bottom: 14.0),
+            child: Text(
+              LocaleKeys.trendingToday.tr(),
+              style: Theme.of(context).textTheme.titleLarge,
+            ),
+          ),
+          SizedBox(
+            height: 150.0,
+            child: HorizontalMoviesListView(
+              paths: state.trendingPaths,
+              itemWidth: 100.0,
+              itemHeight: 150.0,
+              onItemTapped: (int index) {
+                context.go(context.namedLocation('movie_details'));
+              },
+            ),
+          ),
+          Padding(
+            padding: const EdgeInsets.only(top: 24.0, left: 12.0, bottom: 14.0),
+            child: Text(
+              LocaleKeys.oldMovies.tr(),
+              style: Theme.of(context).textTheme.titleLarge,
+            ),
+          ),
+          SizedBox(
+            height: 150.0,
+            child: HorizontalMoviesListView(
+              paths: state.trendingPaths,
+              itemWidth: 100.0,
+              itemHeight: 150.0,
+              onItemTapped: (int index) {
+                context.go(context.namedLocation('movie_details'));
+              },
+            ),
+          ),
+          Padding(
+            padding: const EdgeInsets.only(top: 24.0, left: 12.0, bottom: 14.0),
+            child: Text(
+              LocaleKeys.oldSeries.tr(),
+              style: Theme.of(context).textTheme.titleLarge,
+            ),
+          ),
+          SizedBox(
+            height: 60.0,
+            child: HorizontalMoviesListView(
+              paths: state.trendingPaths,
+              itemWidth: 100.0,
+              itemHeight: 60.0,
+              onItemTapped: (int index) {
+                context.go(context.namedLocation('movie_details'));
+              },
+            ),
+          ),
+          const SizedBox(height: 65.0),
+        ],
+      ),
+    );
+  }
+}