[Add] Implement Home screen UI

assets/translations/en.json

@@ -6,5 +6,12 @@
   "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 !!!"
+  "on_boarding_page_5_title": "Let's Get Started !!!",
+  "home": "Home",
+  "categories": "Categories",
+  "downloads": "Downloads",
+  "more": "More",
+  "latest_movies": "Latest Movies",
+  "latest_series": "Latest Series",
+  "trending_today": "Trending Today"
 }

assets/translations/vi.json

@@ -6,5 +6,12 @@
   "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 !!!"
+  "on_boarding_page_5_title": "Bắt đầu thôi !!!",
+  "home": "Trang chủ",
+  "categories": "Thể loại",
+  "downloads": "Tải xuống",
+  "more": "Thêm",
+  "latest_movies": "Những Bộ Phim Gần Đây",
+  "latest_series": "Sê-ri Mới Nhất",
+  "trending_today": "Xu Hướng Hôm Nay"
 }

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,50 @@
+import 'package:carousel_slider/carousel_slider.dart';
+import 'package:flutter/material.dart';
+
+class CarouselSliderShaderWidget extends StatelessWidget {
+  const CarouselSliderShaderWidget({
+    super.key,
+    required List<String> paths,
+  }) : _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;
+
+  @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((seriesPath) {
+          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(seriesPath, fit: BoxFit.fill),
+              ),
+              onTap: () {},
+            );
+          });
+        }).toList(),
+      ),
+    );
+  }
+}

lib/home/components/horizontal_movie_list_view.dart

@@ -0,0 +1,34 @@
+import 'package:flutter/material.dart';
+
+class HorizontalMoviesListView extends StatelessWidget {
+  const HorizontalMoviesListView({
+    super.key,
+    required List<String> paths,
+  }) : _paths = paths;
+
+  final List<String> _paths;
+
+  @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.fill,
+            width: 100.0,
+            height: 150.0,
+          ),
+          onTap: () => {},
+        ),
+      ),
+    );
+  }
+}

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,58 @@
+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: () {
+            context.go(context.namedLocation('movie_details'));
+          }),
+          Padding(
+            padding: const EdgeInsets.only(left: 12.0, bottom: 14.0),
+            child: Text(
+              LocaleKeys.latest_movies.tr(),
+              style: Theme.of(context).textTheme.titleLarge,
+            ),
+          ),
+          CarouselSliderShaderWidget(paths: state.moviesPaths),
+          Padding(
+            padding: const EdgeInsets.only(top: 24.0, left: 12.0, bottom: 14.0),
+            child: Text(
+              LocaleKeys.latest_series.tr(),
+              style: Theme.of(context).textTheme.titleLarge,
+            ),
+          ),
+          CarouselSliderShaderWidget(paths: state.seriesPaths),
+          Padding(
+            padding: const EdgeInsets.only(top: 24.0, left: 12.0, bottom: 14.0),
+            child: Text(
+              LocaleKeys.trending_today.tr(),
+              style: Theme.of(context).textTheme.titleLarge,
+            ),
+          ),
+          SizedBox(
+            height: 150.0,
+            child: HorizontalMoviesListView(paths: state.trendingPaths),
+          ),
+          const SizedBox(height: 55.0),
+        ],
+      ),
+    );
+  }
+}

lib/main.dart

@@ -1,10 +1,15 @@
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_movie_clean/onboarding/on_boarding_screen.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_movie_clean/bloc_observer.dart';
 import 'package:flutter_movie_clean/theme/app_theme.dart';
 
+import 'router/router.dart';
+
 void main() async {
   WidgetsFlutterBinding.ensureInitialized();
+  Bloc.observer = const AppBlocObserver();
+
   await EasyLocalization.ensureInitialized();
   const supportedLocales = [Locale('en'), Locale('vi')];
   runApp(
@@ -24,13 +29,13 @@ class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final darkTheme = AppTheme.dark();
-    return MaterialApp(
+    return MaterialApp.router(
       localizationsDelegates: context.localizationDelegates,
       supportedLocales: context.supportedLocales,
       locale: context.locale,
       debugShowCheckedModeBanner: false,
       theme: darkTheme,
-      home: const OnBoardingScreen(),
+      routerConfig: router,
     );
   }
 }

lib/more/more.dart

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

lib/moviedetails/movie_details.dart

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

lib/onboarding/component/on_boarding_end_page.dart → lib/onboarding/components/on_boarding_end_page.dart

@@ -1,5 +1,6 @@
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
 import 'package:smooth_page_indicator/smooth_page_indicator.dart';
 
 import '../../generated/assets.gen.dart';
@@ -94,7 +95,9 @@ class OnBoardingEndPage extends StatelessWidget {
                     borderRadius: BorderRadius.all(Radius.zero),
                   ),
                 ),
-                onPressed: () {},
+                onPressed: () {
+                  context.go(context.namedLocation('home'));
+                },
                 child: Text(
                   LocaleKeys.login.tr(),
                   style: Theme.of(context).textTheme.titleMedium,

lib/onboarding/on_boarding_screen.dart → lib/onboarding/on_boarding.dart

@@ -3,8 +3,8 @@ import 'package:flutter/material.dart';
 import 'package:flutter_movie_clean/generated/assets.gen.dart';
 import 'package:flutter_movie_clean/generated/locale_keys.g.dart';
 
-import 'component/on_boarding_end_page.dart';
-import 'component/on_boarding_item_page.dart';
+import 'components/on_boarding_end_page.dart';
+import 'components/on_boarding_item_page.dart';
 
 class OnBoardingScreen extends StatefulWidget {
   const OnBoardingScreen({Key? key}) : super(key: key);
@@ -25,12 +25,12 @@ class _OnBoardingScreenState extends State<OnBoardingScreen> {
   ];
   String _title = '';
   final List<String> _posterPaths = [
-    Assets.images.poster1.path,
-    Assets.images.poster2.path,
-    Assets.images.poster3.path,
-    Assets.images.poster4.path,
-    Assets.images.poster5.path,
-    Assets.images.poster6.path,
+    Assets.images.onboardings.poster1.path,
+    Assets.images.onboardings.poster2.path,
+    Assets.images.onboardings.poster3.path,
+    Assets.images.onboardings.poster4.path,
+    Assets.images.onboardings.poster5.path,
+    Assets.images.onboardings.poster6.path,
   ];
 
   final Gradient _maskingGradient = const LinearGradient(