add commnt section

.idea/libraries/Dart_Packages.xml

@@ -65,6 +65,13 @@
             </list>
           </value>
         </entry>
+        <entry key="custom_draggable_widget">
+          <value>
+            <list>
+              <option value="$USER_HOME$/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/custom_draggable_widget-0.0.2/lib" />
+            </list>
+          </value>
+        </entry>
         <entry key="fake_async">
           <value>
             <list>
@@ -191,6 +198,13 @@
             </list>
           </value>
         </entry>
+        <entry key="modal_bottom_sheet">
+          <value>
+            <list>
+              <option value="$USER_HOME$/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/modal_bottom_sheet-2.1.2/lib" />
+            </list>
+          </value>
+        </entry>
         <entry key="path">
           <value>
             <list>
@@ -352,6 +366,13 @@
             </list>
           </value>
         </entry>
+        <entry key="zoom_tap_animation">
+          <value>
+            <list>
+              <option value="$USER_HOME$/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/zoom_tap_animation-1.1.0/lib" />
+            </list>
+          </value>
+        </entry>
       </option>
     </properties>
     <CLASSES>
@@ -364,6 +385,7 @@
       <root url="file://$USER_HOME$/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/collection-1.16.0/lib" />
       <root url="file://$USER_HOME$/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/crypto-3.0.2/lib" />
       <root url="file://$USER_HOME$/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/cupertino_icons-1.0.5/lib" />
+      <root url="file://$USER_HOME$/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/custom_draggable_widget-0.0.2/lib" />
       <root url="file://$USER_HOME$/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/fake_async-1.3.1/lib" />
       <root url="file://$USER_HOME$/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/ffi-2.0.2/lib" />
       <root url="file://$USER_HOME$/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/file-6.1.4/lib" />
@@ -380,6 +402,7 @@
       <root url="file://$USER_HOME$/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/matcher-0.12.12/lib" />
       <root url="file://$USER_HOME$/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/material_color_utilities-0.1.5/lib" />
       <root url="file://$USER_HOME$/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/meta-1.8.0/lib" />
+      <root url="file://$USER_HOME$/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/modal_bottom_sheet-2.1.2/lib" />
       <root url="file://$USER_HOME$/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/path-1.8.2/lib" />
       <root url="file://$USER_HOME$/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/path_provider-2.0.15/lib" />
       <root url="file://$USER_HOME$/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/path_provider_android-2.0.27/lib" />
@@ -402,6 +425,7 @@
       <root url="file://$USER_HOME$/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/vector_math-2.1.2/lib" />
       <root url="file://$USER_HOME$/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/win32-4.1.4/lib" />
       <root url="file://$USER_HOME$/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/xdg_directories-1.0.0/lib" />
+      <root url="file://$USER_HOME$/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/zoom_tap_animation-1.1.0/lib" />
       <root url="file://$PROJECT_DIR$/../../../../src/flutter/bin/cache/pkg/sky_engine/lib" />
       <root url="file://$PROJECT_DIR$/../../../../src/flutter/packages/flutter/lib" />
       <root url="file://$PROJECT_DIR$/../../../../src/flutter/packages/flutter_test/lib" />

justMUSIC/lib/components/comment_component.dart

@@ -0,0 +1,63 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+
+import '../values/constants.dart';
+
+class CommentComponent extends StatelessWidget {
+  const CommentComponent({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: double.infinity,
+      decoration: BoxDecoration(
+          color: bgComment, borderRadius: BorderRadius.circular(10)),
+      padding: EdgeInsets.all(20),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Row(
+            crossAxisAlignment: CrossAxisAlignment.center,
+            children: [
+              ClipOval(
+                child: SizedBox.fromSize(
+                  // Image radius
+                  child: Image(
+                    image: AssetImage("assets/images/exemple_profile.png"),
+                    width: 40,
+                  ),
+                ),
+              ),
+              SizedBox(
+                width: 10,
+              ),
+              Text(
+                "Melina",
+                style: GoogleFonts.plusJakartaSans(
+                    color: Colors.white, fontWeight: FontWeight.w600),
+              ),
+              Padding(
+                padding: EdgeInsets.only(top: 6, left: 10),
+                child: Text(
+                  "Il y a 2 min(s)",
+                  style: GoogleFonts.plusJakartaSans(
+                      color: Colors.white.withOpacity(0.6),
+                      fontWeight: FontWeight.w200,
+                      fontSize: 10),
+                ),
+              ),
+            ],
+          ),
+          Text(
+            "J’adore ce son auss je trouve qu’il a vraiment une plume de fou le rap c’est trop bien  jknei rhozi ugzeor gzhjkev huz vhzbejlh zouebvfiyzv fi hzejkfb zjf ouzebfjzebihf b zuib fiuzebfihzbejfbzejkbf  hzbfiébiu zegiu fzieu iuzy giuzeg iuzg eiu zg ",
+            style: GoogleFonts.plusJakartaSans(
+                color: Colors.white.withOpacity(0.4),
+                fontWeight: FontWeight.w300,
+                fontSize: 13),
+          ),
+        ],
+      ),
+    );
+  }
+}

justMUSIC/lib/components/post_component.dart

@@ -5,10 +5,11 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:google_fonts/google_fonts.dart';
 import 'package:gradient_borders/box_borders/gradient_box_border.dart';
 import 'package:text_scroll/text_scroll.dart';
+import 'package:zoom_tap_animation/zoom_tap_animation.dart';
 
 class PostComponent extends StatelessWidget {
-  const PostComponent({Key? key}) : super(key: key);
+  final VoidCallback? callback;
-
+  const PostComponent({Key? key, required this.callback}) : super(key: key);
   @override
   Widget build(BuildContext context) {
     return SizedBox(
@@ -60,56 +61,95 @@ class PostComponent extends StatelessWidget {
             ],
           ),
           SizedBox(height: 10),
-          AspectRatio(
+          ZoomTapAnimation(
-            aspectRatio: 1 / 1,
+              onTap: callback,
-            child: Container(
+              enableLongTapRepeatEvent: false,
-              width: 300,
+              longTapRepeatDuration: const Duration(milliseconds: 100),
-              height: 300,
+              begin: 1.0,
-              decoration: BoxDecoration(
+              end: 0.99,
-                // add border
+              beginDuration: const Duration(milliseconds: 70),
-                border: const GradientBoxBorder(
+              endDuration: const Duration(milliseconds: 100),
-                  gradient: LinearGradient(colors: [
+              beginCurve: Curves.decelerate,
-                    Colors.transparent,
+              endCurve: Curves.easeInOutSine,
-                    Color(0xFF323232),
+              child: AspectRatio(
-                  ], begin: Alignment.topCenter, end: Alignment.bottomCenter),
+                aspectRatio: 1 / 1,
-                  width: 2.5,
+                child: Container(
-                ),
+                  decoration: BoxDecoration(
-                // set border radius
+                    // add border
-                borderRadius: BorderRadius.circular(20),
+                    border: const GradientBoxBorder(
-              ),
+                      gradient: LinearGradient(
-              child: ClipRRect(
+                          colors: [
-                borderRadius: BorderRadius.circular(18),
+                            Colors.transparent,
-                // implement image
+                            Color(0xFF323232),
-                child: Stack(
+                          ],
-                  alignment: Alignment.bottomCenter,
+                          begin: Alignment.topCenter,
-                  children: [
+                          end: Alignment.bottomCenter),
-                    Image(
+                      width: 2.5,
-                      image: AssetImage("assets/images/exemple_cover.png"),
-                      fit: BoxFit.cover,
-                      width: double.infinity,
                     ),
-                    Image(
+                    // set border radius
-                      image: AssetImage("assets/images/shadow_post.png"),
+                    borderRadius: BorderRadius.circular(20),
-                      fit: BoxFit.fitHeight,
+                  ),
-                      width: double.infinity,
+                  child: ClipRRect(
+                    borderRadius: BorderRadius.circular(18),
+                    // implement image
+                    child: Stack(
+                      alignment: Alignment.bottomCenter,
+                      children: [
+                        Image(
+                          image: AssetImage("assets/images/exemple_cover.png"),
+                          fit: BoxFit.cover,
+                          width: double.infinity,
+                        ),
+                        Image(
+                          image: AssetImage("assets/images/shadow_post.png"),
+                          fit: BoxFit.fitHeight,
+                          width: double.infinity,
+                        ),
+                        Padding(
+                          padding: EdgeInsets.all(15),
+                          child: AutoSizeText(
+                            '“J’écoute en boucle ce son. B2O<3”',
+                            style: GoogleFonts.plusJakartaSans(
+                                color: Colors.white,
+                                fontWeight: FontWeight.w400,
+                                fontSize: 15.sp),
+                            maxFontSize: 20,
+                            maxLines: 1,
+                          ),
+                        ),
+                        Positioned(
+                            top: 0,
+                            right: 0,
+                            child: Padding(
+                              padding: EdgeInsets.all(12),
+                              child: Container(
+                                constraints: BoxConstraints(
+                                    maxWidth: 140, maxHeight: 140),
+                                width: 80.sp,
+                                height: 80.sp,
+                                decoration: BoxDecoration(
+                                  color: Colors.white,
+                                  // add border
+                                  border:
+                                      Border.all(width: 3, color: Colors.white),
+                                  // set border radius
+                                  borderRadius: BorderRadius.circular(15),
+                                ),
+                                child: ClipRRect(
+                                  borderRadius: BorderRadius.circular(13),
+                                  // implement image
+                                  child: Image.network(
+                                    'assets/images/exemple_profile.png',
+                                    fit: BoxFit.cover,
+                                  ),
+                                ),
+                              ),
+                            ))
+                      ],
                     ),
-                    Padding(
+                  ),
-                      padding: EdgeInsets.all(15),
-                      child: AutoSizeText(
-                        '“J’écoute en boucle ce son. B2O<3”',
-                        style: GoogleFonts.plusJakartaSans(
-                            color: Colors.white,
-                            fontWeight: FontWeight.w400,
-                            fontSize: 15.sp),
-                        maxFontSize: 20,
-                        maxLines: 1,
-                      ),
-                    )
-                  ],
                 ),
-              ),
+              )),
-            ),
-          ),
           SizedBox(height: 10),
           Row(
             crossAxisAlignment: CrossAxisAlignment.end,
@@ -166,7 +206,6 @@ class PostComponent extends StatelessWidget {
               ),
             ],
           ),
-          SizedBox(height: 60),
         ],
       ),
     );

justMUSIC/lib/components/top_nav_bar_component.dart

@@ -55,10 +55,12 @@ class _TopNavBarComponentState extends State<TopNavBarComponent> {
                     children: [
                       GestureDetector(
                         onTap: () {
-                          setState(() {
+                          if (!choice) {
-                            choice = !choice;
+                            setState(() {
-                            actionSurBouton();
+                              choice = !choice;
-                          });
+                              actionSurBouton();
+                            });
+                          }
                         },
                         child: LayoutBuilder(
                           builder: (BuildContext context,
@@ -85,10 +87,12 @@ class _TopNavBarComponentState extends State<TopNavBarComponent> {
                       ),
                       GestureDetector(
                         onTap: () {
-                          setState(() {
+                          if (choice) {
-                            choice = !choice;
+                            setState(() {
-                            actionSurBouton();
+                              choice = !choice;
-                          });
+                              actionSurBouton();
+                            });
+                          }
                         },
                         child: LayoutBuilder(
                           builder: (BuildContext context,

justMUSIC/lib/screens/feed_screen.dart

@@ -3,6 +3,7 @@ import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
 
+import '../components/comment_component.dart';
 import '../components/post_component.dart';
 import '../components/top_nav_bar_component.dart';
 import '../values/constants.dart';
@@ -18,19 +19,27 @@ class _FeedScreenState extends State<FeedScreen>
     with SingleTickerProviderStateMixin {
   late AnimationController animationController;
   late Animation<double> animation;
-  List<PostComponent> friendFeed = [
+  late List<PostComponent> friendFeed;
-    PostComponent(),
+  late List<PostComponent> discoveryFeed;
-    PostComponent(),
-    PostComponent(),
-  ];
-  List<PostComponent> discoveryFeed = [
-    PostComponent(),
-  ];
   late List<PostComponent> displayFeed;
 
   @override
   void initState() {
     super.initState();
+    friendFeed = [
+      PostComponent(
+        callback: openDetailPost,
+      ),
+      PostComponent(
+        callback: openDetailPost,
+      ),
+      PostComponent(
+        callback: openDetailPost,
+      ),
+    ];
+    discoveryFeed = [
+      PostComponent(callback: openDetailPost),
+    ];
     displayFeed = friendFeed;
     animationController = AnimationController(
       vsync: this,
@@ -60,6 +69,59 @@ class _FeedScreenState extends State<FeedScreen>
     }
   }
 
+  void openDetailPost() {
+    showModalBottomSheet(
+      backgroundColor: bgModal,
+      elevation: 1,
+      constraints: const BoxConstraints(
+        maxWidth: 600,
+      ),
+      isScrollControlled: true,
+      context: context,
+      shape: const RoundedRectangleBorder(
+          borderRadius: BorderRadius.only(
+              topLeft: Radius.circular(20), topRight: Radius.circular(20))),
+      builder: ((context) {
+        return Container(
+            height: 720.h,
+            margin: EdgeInsets.only(
+                top: defaultPadding,
+                left: defaultPadding,
+                right: defaultPadding),
+            child: Column(
+              children: [
+                Align(
+                  child: Container(
+                      width: 60,
+                      height: 5,
+                      decoration: BoxDecoration(
+                          color: Colors.white,
+                          borderRadius: BorderRadius.circular(20))),
+                ),
+                Expanded(
+                  child: SingleChildScrollView(
+                    child: Wrap(
+                      // to apply margin in the main axis of the wrap
+                      runSpacing: 10,
+                      children: [
+                        PostComponent(
+                          callback: null,
+                        ),
+                        Container(height: 40),
+                        CommentComponent(),
+                        CommentComponent(),
+                        CommentComponent(),
+                        Container(height: 10),
+                      ],
+                    ),
+                  ),
+                ),
+              ],
+            ));
+      }),
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
@@ -69,13 +131,13 @@ class _FeedScreenState extends State<FeedScreen>
           CircularRevealAnimation(
             animation: animation,
 //                centerAlignment: Alignment.centerRight,
-            centerOffset: Offset(70, 0),
+            centerOffset: Offset(30.w, -100),
             child: SingleChildScrollView(
               child: SizedBox(
                   width: double.infinity,
                   child: Align(
                     child: ConstrainedBox(
-                      constraints: BoxConstraints(maxWidth: 500),
+                      constraints: BoxConstraints(maxWidth: 600),
                       child: Padding(
                         padding: const EdgeInsets.symmetric(
                             horizontal: defaultPadding),
@@ -84,8 +146,8 @@ class _FeedScreenState extends State<FeedScreen>
                           child: Padding(
                               padding: EdgeInsets.only(top: 100.h),
                               child: SingleChildScrollView(
-                                child: Column(
+                                child: Wrap(
-                                  crossAxisAlignment: CrossAxisAlignment.start,
+                                  runSpacing: 60,
                                   children: displayFeed,
                                 ),
                               )),

justMUSIC/lib/values/constants.dart

@@ -13,6 +13,8 @@ const bgTextField = Color(0xFF1C1B23);
 const strokeTextField = Color(0xFF373546);
 const unactiveFeed = Color(0xFF848484);
 const gradiantPost = Color(0xFF0D0D0D);
+const bgModal = Color(0xFF1E1E1E);
+const bgComment = Color(0xFF222222);
 
 // All constants important too us
 

justMUSIC/pubspec.lock

@@ -64,6 +64,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.0.5"
+  custom_draggable_widget:
+    dependency: "direct main"
+    description:
+      name: custom_draggable_widget
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.0.2"
   fake_async:
     dependency: transitive
     description:
@@ -186,6 +193,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.8.0"
+  modal_bottom_sheet:
+    dependency: "direct main"
+    description:
+      name: modal_bottom_sheet
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.1.2"
   path:
     dependency: transitive
     description:
@@ -345,6 +359,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.0.0"
+  zoom_tap_animation:
+    dependency: "direct main"
+    description:
+      name: zoom_tap_animation
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.1.0"
 sdks:
   dart: ">=2.18.2 <3.0.0"
   flutter: ">=3.3.0"

justMUSIC/pubspec.yaml

@@ -45,6 +45,9 @@ dependencies:
   gradient_borders: ^1.0.0
   text_scroll: ^0.2.0
   circular_reveal_animation: ^2.0.1
+  zoom_tap_animation: ^1.1.0
+  custom_draggable_widget: ^0.0.2
+  modal_bottom_sheet: ^2.1.2
 
 dev_dependencies:
   flutter_test: