Fast Laugh page base ui done

android/app/src/main/AndroidManifest.xml

@@ -1,5 +1,6 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
     package="com.example.netflix_project">
+    <uses-permission android:name="android.permission.INTERNET"/>
    <application
         android:label="netflix_project"
         android:name="${applicationName}"

lib/presentation/fast_laugh/screen_fast_laugh.dart

@@ -1,15 +1,19 @@
 import 'package:flutter/material.dart';
+import 'package:netflix_project/presentation/fast_laugh/widget/video_list_item.dart';
 
-ValueNotifier<int> indexChangeNotifier = ValueNotifier(0);
 
 class ScreenFastLaugh extends StatelessWidget {
   const ScreenFastLaugh({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      body: Center(
-        child: Text("ScreenFastLaugh"),
+      body: SafeArea(
+        child: PageView(
+          scrollDirection: Axis.vertical,
+          children:
+              List.generate(5, (index) => VideoListItemWidget(index: index)),
+        ),
       ),
     );
   }

lib/presentation/fast_laugh/widget/video_list_item.dart

@@ -0,0 +1,116 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:netflix_project/core/colors/colors.dart';
+import 'package:netflix_project/core/colors/constants.dart';
+
+class VideoListItemWidget extends StatelessWidget {
+  final int index;
+  const VideoListItemWidget({Key? key, required this.index}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+      children: [
+        Container(
+          color: Colors.accents[index % Colors.accents.length],
+        ),
+        Align(
+          alignment: Alignment.bottomCenter,
+          child: Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              crossAxisAlignment: CrossAxisAlignment.end,
+              children: [
+                // left Side
+                CircleAvatar(
+                  backgroundColor: kBlackColor.withOpacity(.5),
+                  child: IconButton(
+                    onPressed: () {},
+                    icon: const Icon(
+                      CupertinoIcons.volume_off,
+                      color: kWhiteColor,
+                    ),
+                  ),
+                ),
+
+                // Right Side
+                Column(
+                  mainAxisAlignment: MainAxisAlignment.end,
+                  children: const [
+                    CircleAvatar(
+                      backgroundImage:
+                          NetworkImage("https://source.unsplash.com/500x500"),
+                    ),
+                    FastLaughActionButtonWidget(
+                      icon: CupertinoIcons.smiley,
+                      title: "LOL",
+                    ),
+                    FastLaughActionButtonWidget(
+                      icon: CupertinoIcons.add_circled,
+                      title: "My List",
+                    ),
+                    FastLaughActionButtonWidget(
+                      icon: CupertinoIcons.share,
+                      title: "Share",
+                    ),
+                    FastLaughActionButtonWidget(
+                      icon: CupertinoIcons.play_arrow_solid,
+                      title: "Play",
+                    ),
+                  ],
+                )
+              ],
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class FastLaughActionButtonWidget extends StatelessWidget {
+  final IconData icon;
+  final String title;
+  const FastLaughActionButtonWidget({
+    Key? key,
+    required this.icon,
+    required this.title,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.all(10),
+      child: Column(
+        children: [
+          Icon(
+            icon,
+            size: 35,
+          ),
+          kHeight,
+          Text(
+            title,
+            style: const TextStyle(
+              fontSize: 16,
+              shadows: [
+                BoxShadow(
+                  color: kBlackColor,
+                  spreadRadius: 10,
+                  blurRadius: 10,
+                  offset: Offset(2, 2),
+                ),
+                BoxShadow(
+                  color: kBlackColor,
+                  spreadRadius: 10,
+                  blurRadius: 10,
+                  offset: Offset(2, 2),
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/presentation/main_page/widgets/bottom_nav.dart

@@ -3,6 +3,9 @@ import 'package:flutter/material.dart';
 import 'package:netflix_project/core/colors/colors.dart';
 import 'package:netflix_project/presentation/fast_laugh/screen_fast_laugh.dart';
 
+ValueNotifier<int> indexChangeNotifier = ValueNotifier(0);
+
+
 class BottomNavigationWidget extends StatelessWidget {
   const BottomNavigationWidget({Key? key}) : super(key: key);
 

pubspec.lock

@@ -50,6 +50,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "3.0.1"
+  csslib:
+    dependency: transitive
+    description:
+      name: csslib
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.17.1"
   cupertino_icons:
     dependency: "direct main"
     description:
@@ -95,13 +102,25 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_web_plugins:
+    dependency: transitive
+    description: flutter
+    source: sdk
+    version: "0.0.0"
   google_fonts:
     dependency: "direct main"
     description:
       name: google_fonts
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.2.0"
+  html:
+    dependency: transitive
+    description:
+      name: html
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.15.0"
   http:
     dependency: transitive
     description:
@@ -116,6 +135,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "4.0.0"
+  js:
+    dependency: transitive
+    description:
+      name: js
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.6.3"
   lints:
     dependency: transitive
     description:
@@ -275,6 +301,41 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.1.1"
+  video_player:
+    dependency: "direct main"
+    description:
+      name: video_player
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.2.18"
+  video_player_android:
+    dependency: transitive
+    description:
+      name: video_player_android
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.3.0"
+  video_player_avfoundation:
+    dependency: transitive
+    description:
+      name: video_player_avfoundation
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.3.0"
+  video_player_platform_interface:
+    dependency: transitive
+    description:
+      name: video_player_platform_interface
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "5.1.0"
+  video_player_web:
+    dependency: transitive
+    description:
+      name: video_player_web
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.7"
   win32:
     dependency: transitive
     description:

pubspec.yaml

@@ -31,7 +31,8 @@ dependencies:
   flutter:
     sdk: flutter
   google_fonts: 2.2.0
-
+  video_player: 2.2.18
+
 dev_dependencies:
 
   # The "flutter_lints" package below contains a set of recommended lints to