downloads base ui complete

lib/core/colors/colors.dart

@@ -1,3 +1,12 @@
 import 'package:flutter/material.dart';
 
 const backgroundColor = Colors.black;
+
+const kWhiteColor = Colors.white;
+const kBlackColor = Colors.black;
+const kGreyColor = Colors.grey;
+
+const kButtonColorBlue = Colors.blue;
+const kButtonColorWhite = Colors.white;
+const kButtonColorBlack = Colors.black;
+final kButtonColorBlueAccent = Colors.blueAccent[700];

lib/core/colors/constants.dart

@@ -0,0 +1,5 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+
+const kWidth = SizedBox(width: 10);
+const kHeight = SizedBox(height: 10);

lib/main.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
 import 'package:netflix_project/core/colors/colors.dart';
 import 'package:netflix_project/presentation/main_page/widgets/screen_main_page.dart';
 
@@ -15,7 +16,16 @@ class MyApp extends StatelessWidget {
       debugShowCheckedModeBanner: false,
       title: 'Netflix',
       theme: ThemeData(
-          primarySwatch: Colors.blue, backgroundColor: backgroundColor),
+        primarySwatch: Colors.blue,
+        backgroundColor: backgroundColor,
+        scaffoldBackgroundColor: backgroundColor,
+        fontFamily: GoogleFonts.montserrat().fontFamily,
+        textTheme: const TextTheme(
+          bodyText1: TextStyle(color: kWhiteColor),
+          bodyText2: TextStyle(color: kWhiteColor),
+        ),
+        iconTheme: const IconThemeData(color: kWhiteColor),
+      ),
       home: ScreenMainPage(),
     );
   }

lib/presentation/downloads/widgets/screen_downloads.dart

@@ -0,0 +1,222 @@
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+import 'package:netflix_project/core/colors/colors.dart';
+import 'package:netflix_project/core/colors/constants.dart';
+import 'package:netflix_project/presentation/widgets/app_bar_widget.dart';
+
+class ScreenDownloads extends StatelessWidget {
+  ScreenDownloads({Key? key}) : super(key: key);
+
+  final _widgetsList = [
+    const _Section1(),
+    _Section2(),
+    const _Section3(),
+  ];
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: const PreferredSize(
+        preferredSize: Size.fromHeight(50),
+        child: AppBarWidget(title: "Downloads"),
+      ),
+      body: ListView.separated(
+        padding: const EdgeInsets.all(10),
+        itemBuilder: (ctx, index) => _widgetsList[index],
+        separatorBuilder: (ctx, index) => const SizedBox(height: 20),
+        itemCount: _widgetsList.length,
+      ),
+    );
+  }
+}
+
+class _Section1 extends StatelessWidget {
+  const _Section1({
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: const [
+        kWidth,
+        Icon(Icons.settings),
+        kWidth,
+        Text("Smart Downloads"),
+      ],
+    );
+  }
+}
+
+class _Section2 extends StatelessWidget {
+  _Section2({Key? key}) : super(key: key);
+
+  final List<String> imageList = [
+    "https://www.themoviedb.org/t/p/w600_and_h900_bestv2/vDHsLnOWKlPGmWs0kGfuhNF4w5l.jpg",
+    "https://www.themoviedb.org/t/p/w600_and_h900_bestv2/vUUqzWa2LnHIVqkaKVlVGkVcZIW.jpg",
+    "https://www.themoviedb.org/t/p/w600_and_h900_bestv2/3H1WFCuxyNRP35oiL2qqwhAXxc0.jpg",
+  ];
+
+  @override
+  Widget build(BuildContext context) {
+    final size = MediaQuery.of(context).size;
+
+    return Column(
+      children: [
+        const Text(
+          "Introducing Downloads For You",
+          textAlign: TextAlign.center,
+          style: TextStyle(
+            color: kWhiteColor,
+            fontSize: 24,
+            fontWeight: FontWeight.bold,
+          ),
+        ),
+        kHeight,
+        const Text(
+          "We'll download a personalized selection of\n movies and shows for you, so there's\n always something watch on your\n devvice.",
+          textAlign: TextAlign.center,
+          style: TextStyle(
+            color: kGreyColor,
+            fontSize: 19,
+            fontWeight: FontWeight.w700,
+          ),
+        ),
+        Padding(
+          padding: const EdgeInsets.symmetric(vertical: 30),
+          child: SizedBox(
+            width: size.width,
+            // height: size.width,
+            child: Center(
+              child: Stack(
+                alignment: Alignment.bottomCenter,
+                children: [
+                  CircleAvatar(
+                    radius: size.width * .32,
+                    backgroundColor: kGreyColor.withOpacity(.5),
+                  ),
+                  DownloadPageCenterImageWidget(
+                    image: imageList[0],
+                    size: Size(size.width * .28, size.width * .43),
+                    angle: 20,
+                    leftMargin: 190,
+                  ),
+                  DownloadPageCenterImageWidget(
+                    image: imageList[1],
+                    size: Size(size.width * .28, size.width * .43),
+                    angle: -20,
+                    rightMargin: 190,
+                  ),
+                  DownloadPageCenterImageWidget(
+                    image: imageList[2],
+                    size: Size(size.width * .35, size.width * .48),
+                    angle: 0,
+                    bottomMargin: 30,
+                  )
+                ],
+              ),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class _Section3 extends StatelessWidget {
+  const _Section3({
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        MaterialButton(
+          onPressed: () {},
+          minWidth: MediaQuery.of(context).size.width * .85,
+          color: kButtonColorBlueAccent,
+          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
+          child: const Padding(
+            padding: EdgeInsets.symmetric(vertical: 10),
+            child: Text(
+              "Setup",
+              style: TextStyle(
+                color: kWhiteColor,
+                fontSize: 20,
+                fontWeight: FontWeight.bold,
+              ),
+            ),
+          ),
+        ),
+        kHeight,
+        MaterialButton(
+          onPressed: () {},
+          color: kButtonColorWhite,
+          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
+          child: const Padding(
+            padding: EdgeInsets.symmetric(vertical: 10),
+            child: Text(
+              "See What you can Download",
+              style: TextStyle(
+                color: kBlackColor,
+                fontSize: 20,
+                fontWeight: FontWeight.bold,
+              ),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class DownloadPageCenterImageWidget extends StatelessWidget {
+  const DownloadPageCenterImageWidget({
+    Key? key,
+    required this.image,
+    required this.size,
+    this.angle = 0,
+    this.leftMargin = 0,
+    this.rightMargin = 0,
+    this.topMargin = 0,
+    this.bottomMargin = 20,
+  }) : super(key: key);
+
+  final String image;
+  final Size size;
+  final double angle;
+  final double leftMargin;
+  final double rightMargin;
+  final double topMargin;
+  final double bottomMargin;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: EdgeInsets.only(
+        left: leftMargin,
+        right: rightMargin,
+        bottom: bottomMargin,
+      ),
+      child: Transform.rotate(
+        angle: angle * pi / 180,
+        child: Container(
+          width: size.width,
+          height: size.height,
+          decoration: BoxDecoration(
+            color: Colors.pink,
+            borderRadius: BorderRadius.circular(10),
+            image: DecorationImage(
+              fit: BoxFit.cover,
+              image: NetworkImage(
+                image,
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/presentation/fast_laugh/screen_fast_laugh.dart

@@ -0,0 +1,16 @@
+import 'package:flutter/material.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"),
+      ),
+    );
+  }
+}

lib/presentation/home/screen_home.dart

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

lib/presentation/main_page/widgets/bottom_nav.dart

@@ -1,40 +1,46 @@
 import 'package:flutter/material.dart';
+import 'package:netflix_project/core/colors/colors.dart';
+import 'package:netflix_project/presentation/fast_laugh/screen_fast_laugh.dart';
 
 class BottomNavigationWidget extends StatelessWidget {
   const BottomNavigationWidget({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    return BottomNavigationBar(
-      currentIndex: 0,
-      type: BottomNavigationBarType.fixed,
-      backgroundColor: Colors.black,
-      selectedItemColor: Colors.white,
-      unselectedItemColor: Colors.grey,
-      selectedIconTheme: const IconThemeData(color: Colors.white),
-      unselectedIconTheme: const IconThemeData(color: Colors.grey),
-      items: const [
-        BottomNavigationBarItem(
-          icon: Icon(Icons.home),
-          label: "Home",
-        ),
-        BottomNavigationBarItem(
-          icon: Icon(Icons.collections),
-          label: "New & Hot",
-        ),
-        BottomNavigationBarItem(
-          icon: Icon(Icons.emoji_emotions_outlined),
-          label: "Fast Laugh",
-        ),
-        BottomNavigationBarItem(
-          icon: Icon(Icons.search),
-          label: "Search",
-        ),
-        BottomNavigationBarItem(
-          icon: Icon(Icons.arrow_circle_down),
-          label: "Downloads",
-        ),
-      ],
+    return ValueListenableBuilder(
+      valueListenable: indexChangeNotifier,
+      builder: (context, int index, _) => BottomNavigationBar(
+        currentIndex: index,
+        onTap: (index) => indexChangeNotifier.value = index,
+        type: BottomNavigationBarType.fixed,
+        backgroundColor: Colors.black,
+        selectedItemColor: kWhiteColor,
+        unselectedItemColor: Colors.grey,
+        selectedIconTheme: const IconThemeData(color: kWhiteColor),
+        unselectedIconTheme: const IconThemeData(color: Colors.grey),
+        items: const [
+          BottomNavigationBarItem(
+            icon: Icon(Icons.home),
+            label: "Home",
+          ),
+          BottomNavigationBarItem(
+            icon: Icon(Icons.collections),
+            label: "New & Hot",
+          ),
+          BottomNavigationBarItem(
+            icon: Icon(Icons.emoji_emotions_outlined),
+            label: "Fast Laugh",
+          ),
+          BottomNavigationBarItem(
+            icon: Icon(Icons.search),
+            label: "Search",
+          ),
+          BottomNavigationBarItem(
+            icon: Icon(Icons.arrow_circle_down),
+            label: "Downloads",
+          ),
+        ],
+      ),
     );
   }
 }