[Issue #9] Implement Home Screen UI

.gitignore

@@ -31,6 +31,9 @@ migrate_working_dir/
 .pub-cache/
 .pub/
 /build/
+*.g.dart
+*.gen.dart
+pubspec.lock
 
 # Symbolication related
 app.*.symbols

README.md

@@ -1,2 +1,23 @@
 # flutter_movie_clean
 A sample Flutter application follow clean architecture
+
+## Installation
+Clone this repository
+```bash
+git clone [email protected]:namnh-0652/flutter_movie_clean.git
+```
+Install Pub
+```bash
+flutter clean
+flutter pub get
+```
+
+Run command to add file `locale_keys.g.dart`, this file support for library `easy_localization`
+```bash
+flutter pub run easy_localization:generate -S assets/translations -f keys -o locale_keys.g.dart
+```
+
+Run command to run code generator for your assets, fonts, colors... by `FlutterGen`
+```bash 
+flutter packages pub run build_runner build
+```

assets/color/colors.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="crimson_approx">#ED1B24</color>
+</resources>

assets/translations/en.json

@@ -0,0 +1,19 @@
+{
+  "continueOnBoarding": "Continue",
+  "login": "Login",
+  "signup": "Signup",
+  "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

@@ -0,0 +1,19 @@
+{
+  "continueOnBoarding": "Tiếp tục",
+  "login": "Đăng nhập",
+  "signup": "Đăng ký",
+  "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ũ"
+}

ios/Runner/Info.plist

@@ -4,6 +4,13 @@
 <dict>
 	<key>CFBundleDevelopmentRegion</key>
 	<string>$(DEVELOPMENT_LANGUAGE)</string>
+
+	<key>CFBundleLocalizations</key>
+    <array>
+        	<string>en</string>
+        	<string>vi</string>
+    </array>
+
 	<key>CFBundleDisplayName</key>
 	<string>Flutter Movie Clean</string>
 	<key>CFBundleExecutable</key>

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(),
+    );
+  }
+}