Start of the feed page

justMUSIC/lib/components/post_component.dart

@@ -0,0 +1,143 @@
+import 'package:auto_size_text/auto_size_text.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:google_fonts/google_fonts.dart';
+
+class PostComponent extends StatelessWidget {
+  const PostComponent({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: double.infinity,
+      child: Column(
+        children: [
+          Row(
+            crossAxisAlignment: CrossAxisAlignment.end,
+            children: [
+              ClipOval(
+                child: SizedBox.fromSize(
+                  // Image radius
+                  child: Image(
+                    image: AssetImage("assets/images/exemple_profile.png"),
+                    width: 40,
+                  ),
+                ),
+              ),
+              Expanded(
+                flex: 8,
+                child: Padding(
+                  padding: const EdgeInsets.only(left: 10),
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        "Melina",
+                        style: GoogleFonts.plusJakartaSans(
+                            color: Colors.white, fontWeight: FontWeight.w600),
+                      ),
+                      Text(
+                        "France, Lyon",
+                        style: GoogleFonts.plusJakartaSans(
+                            color: Colors.white.withOpacity(0.4),
+                            fontWeight: FontWeight.w300,
+                            fontSize: 13),
+                      )
+                    ],
+                  ),
+                ),
+              ),
+              Text(
+                "Aujourd’hui, 16:43",
+                style: GoogleFonts.plusJakartaSans(
+                    color: Colors.white.withOpacity(0.4),
+                    fontWeight: FontWeight.w300,
+                    fontSize: 13),
+              ),
+            ],
+          ),
+          Container(
+            margin: EdgeInsets.only(top: 10),
+            decoration: BoxDecoration(
+              borderRadius: BorderRadius.circular(20),
+              boxShadow: const [
+                BoxShadow(
+                  color: Color(0xFF3A3A3A),
+                  spreadRadius: 0.5,
+                  blurRadius: 0,
+                  offset: Offset(0, 0), // changes position of shadow
+                ),
+              ],
+            ),
+            child: AspectRatio(
+              aspectRatio: 1 / 1,
+              child: Padding(
+                padding: EdgeInsets.all(1.5),
+                child: ClipRRect(
+                  borderRadius: BorderRadius.circular(20),
+                  child: Container(
+                    height: 20,
+                    width: double.infinity,
+                    child: Stack(
+                      alignment: Alignment.bottomCenter,
+                      children: const [
+                        Image(
+                          image: AssetImage("assets/images/exemple_cover.png"),
+                          fit: BoxFit.cover,
+                          width: double.infinity,
+                        ),
+                        Image(
+                          image: AssetImage("assets/images/shadow_post.png"),
+                          fit: BoxFit.cover,
+                          width: double.infinity,
+                        ),
+                      ],
+                    ),
+                  ),
+                ),
+              ),
+            ),
+          ),
+          SizedBox(height: 10),
+          Row(
+            crossAxisAlignment: CrossAxisAlignment.end,
+            children: [
+              AutoSizeText(
+                "BOOBA",
+                style: GoogleFonts.plusJakartaSans(
+                    color: Colors.white,
+                    fontWeight: FontWeight.w600,
+                    fontSize: 26.sp),
+                maxFontSize: 30,
+              ),
+              Padding(
+                padding: const EdgeInsets.only(left: 15.0),
+                child: AutoSizeText(
+                  "A.C. Milan",
+                  style: GoogleFonts.plusJakartaSans(
+                      color: Colors.white,
+                      fontWeight: FontWeight.w300,
+                      fontSize: 16.sp),
+                  maxFontSize: 20,
+                ),
+              ),
+              Expanded(
+                child: AutoSizeText(
+                  "2013",
+                  style: GoogleFonts.plusJakartaSans(
+                      color: Colors.white.withOpacity(0.5),
+                      fontWeight: FontWeight.w300,
+                      fontSize: 16.sp),
+                  textAlign: TextAlign.end,
+                  maxFontSize: 20,
+                ),
+              )
+            ],
+          ),
+          SizedBox(height: 60),
+        ],
+      ),
+    );
+  }
+}

justMUSIC/lib/components/top_nav_bar_component.dart

@@ -0,0 +1,78 @@
+import 'package:auto_size_text/auto_size_text.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+
+import '../values/constants.dart';
+
+class TopNavBarComponent extends StatefulWidget {
+  const TopNavBarComponent({Key? key}) : super(key: key);
+
+  @override
+  State<TopNavBarComponent> createState() => _TopNavBarComponentState();
+}
+
+class _TopNavBarComponentState extends State<TopNavBarComponent> {
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.only(top: defaultPadding),
+      child: Container(
+        padding: EdgeInsets.symmetric(horizontal: defaultPadding),
+        width: double.infinity,
+        height: 100,
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            const Flexible(
+              flex: 1,
+              child: Image(
+                image: AssetImage("assets/images/add_friend.png"),
+                width: 25,
+              ),
+            ),
+            ConstrainedBox(
+              constraints: BoxConstraints(maxWidth: 170),
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.start,
+                children: [
+                  Image(
+                    image: AssetImage("assets/images/logo.png"),
+                    height: 30,
+                  ),
+                  Row(
+                    crossAxisAlignment: CrossAxisAlignment.center,
+                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                    children: [
+                      AutoSizeText(
+                        "Mes amis",
+                        style: GoogleFonts.plusJakartaSans(
+                            fontWeight: FontWeight.w300,
+                            fontSize: 16,
+                            color: unactiveFeed),
+                      ),
+                      AutoSizeText(
+                        "Discovery",
+                        style: GoogleFonts.plusJakartaSans(
+                            fontWeight: FontWeight.bold,
+                            fontSize: 16,
+                            color: Colors.white),
+                      )
+                    ],
+                  ),
+                ],
+              ),
+            ),
+            const Flexible(
+                flex: 1,
+                child: Image(
+                  image: AssetImage("assets/images/add_friend.png"),
+                  width: 25,
+                ))
+          ],
+        ),
+      ),
+    );
+  }
+}

justMUSIC/lib/main.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
-import 'package:justmusic/screens/explanations_screen.dart';
+import 'package:justmusic/screens/feed_screen.dart';
 
 void main() {
   runApp(const MyApp());
@@ -18,21 +18,22 @@ class MyApp extends StatelessWidget {
     return ScreenUtilInit(
       builder: (context, child) {
         return MaterialApp(
-          debugShowCheckedModeBanner: false,
+            debugShowCheckedModeBanner: false,
-          theme: ThemeData(
+            theme: ThemeData(
-            // This is the theme of your application.
+              // This is the theme of your application.
-            //
+              //
-            // Try running your application with "flutter run". You'll see the
+              // Try running your application with "flutter run". You'll see the
-            // application has a blue toolbar. Then, without quitting the app, try
+              // application has a blue toolbar. Then, without quitting the app, try
-            // changing the primarySwatch below to Colors.green and then invoke
+              // changing the primarySwatch below to Colors.green and then invoke
-            // "hot reload" (press "r" in the console where you ran "flutter run",
+              // "hot reload" (press "r" in the console where you ran "flutter run",
-            // or simply save your changes to "hot reload" in a Flutter IDE).
+              // or simply save your changes to "hot reload" in a Flutter IDE).
-            // Notice that the counter didn't reset back to zero; the application
+              // Notice that the counter didn't reset back to zero; the application
-            // is not restarted.
+              // is not restarted.
-            primarySwatch: Colors.blue,
+              primarySwatch: Colors.blue,
-          ),
+            ),
-          home: const ExplanationsScreen(),
+            home: const SafeArea(
-        );
+              child: FeedScreen(),
+            ));
       },
       designSize: Size(390, 844),
     );

justMUSIC/lib/screens/feed_screen.dart

@@ -0,0 +1,76 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+
+import '../components/post_component.dart';
+import '../components/top_nav_bar_component.dart';
+import '../values/constants.dart';
+
+class FeedScreen extends StatefulWidget {
+  const FeedScreen({Key? key}) : super(key: key);
+
+  @override
+  State<FeedScreen> createState() => _FeedScreenState();
+}
+
+class _FeedScreenState extends State<FeedScreen> {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: bgColor,
+      body: Stack(
+        children: [
+          SingleChildScrollView(
+            child: SizedBox(
+                width: double.infinity,
+                child: Align(
+                  child: ConstrainedBox(
+                    constraints: BoxConstraints(maxWidth: 500),
+                    child: Padding(
+                      padding: const EdgeInsets.symmetric(
+                          horizontal: defaultPadding),
+                      child: Container(
+                        width: double.infinity,
+                        child: Padding(
+                            padding: EdgeInsets.only(top: 100.h),
+                            child: SingleChildScrollView(
+                              child: Column(
+                                crossAxisAlignment: CrossAxisAlignment.start,
+                                children: [
+                                  PostComponent(),
+                                  PostComponent(),
+                                  PostComponent(),
+                                  PostComponent(),
+                                ],
+                              ),
+                            )),
+                      ),
+                    ),
+                  ),
+                )),
+          ),
+          IgnorePointer(
+            child: Container(
+              height: 240.h,
+              decoration: BoxDecoration(
+                  gradient: LinearGradient(begin: Alignment.topRight, stops: [
+                0,
+                1
+              ], colors: [
+                bgColor.withOpacity(1),
+                bgColor.withOpacity(0)
+              ])),
+            ),
+          ),
+          Align(
+            alignment: Alignment.topCenter,
+            child: ConstrainedBox(
+              constraints: BoxConstraints(maxWidth: 800),
+              child: const TopNavBarComponent(),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

justMUSIC/lib/values/constants.dart

@@ -11,6 +11,8 @@ const warningBttnColor = Color(0xFF141414);
 const disabledBttnColor = Color(0xFF1F1B2E);
 const bgTextField = Color(0xFF1C1B23);
 const strokeTextField = Color(0xFF373546);
+const unactiveFeed = Color(0xFF848484);
+const gradiantPost = Color(0xFF0D0D0D);
 
 // All constants important too us