diff --git a/.idea/libraries/Dart_Packages.xml b/.idea/libraries/Dart_Packages.xml
index 0eb01f0..0a71dbc 100644
--- a/.idea/libraries/Dart_Packages.xml
+++ b/.idea/libraries/Dart_Packages.xml
@@ -65,6 +65,13 @@
+
+
+
+
+
+
+
@@ -191,6 +198,13 @@
+
+
+
+
+
+
+
@@ -352,6 +366,13 @@
+
+
+
+
+
+
+
@@ -364,6 +385,7 @@
+
@@ -380,6 +402,7 @@
+
@@ -402,6 +425,7 @@
+
diff --git a/justMUSIC/lib/components/comment_component.dart b/justMUSIC/lib/components/comment_component.dart
new file mode 100644
index 0000000..924d44b
--- /dev/null
+++ b/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),
+ ),
+ ],
+ ),
+ );
+ }
+}
diff --git a/justMUSIC/lib/components/post_component.dart b/justMUSIC/lib/components/post_component.dart
index 7f7a7e3..90332f3 100644
--- a/justMUSIC/lib/components/post_component.dart
+++ b/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(
- aspectRatio: 1 / 1,
- child: Container(
- width: 300,
- height: 300,
- decoration: BoxDecoration(
- // add border
- border: const GradientBoxBorder(
- gradient: LinearGradient(colors: [
- Colors.transparent,
- Color(0xFF323232),
- ], begin: Alignment.topCenter, end: Alignment.bottomCenter),
- width: 2.5,
- ),
- // set border radius
- borderRadius: BorderRadius.circular(20),
- ),
- 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,
+ ZoomTapAnimation(
+ onTap: callback,
+ enableLongTapRepeatEvent: false,
+ longTapRepeatDuration: const Duration(milliseconds: 100),
+ begin: 1.0,
+ end: 0.99,
+ beginDuration: const Duration(milliseconds: 70),
+ endDuration: const Duration(milliseconds: 100),
+ beginCurve: Curves.decelerate,
+ endCurve: Curves.easeInOutSine,
+ child: AspectRatio(
+ aspectRatio: 1 / 1,
+ child: Container(
+ decoration: BoxDecoration(
+ // add border
+ border: const GradientBoxBorder(
+ gradient: LinearGradient(
+ colors: [
+ Colors.transparent,
+ Color(0xFF323232),
+ ],
+ begin: Alignment.topCenter,
+ end: Alignment.bottomCenter),
+ width: 2.5,
),
- Image(
- image: AssetImage("assets/images/shadow_post.png"),
- fit: BoxFit.fitHeight,
- width: double.infinity,
+ // set border radius
+ borderRadius: BorderRadius.circular(20),
+ ),
+ 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),
],
),
);
diff --git a/justMUSIC/lib/components/top_nav_bar_component.dart b/justMUSIC/lib/components/top_nav_bar_component.dart
index de181e2..cb73a50 100644
--- a/justMUSIC/lib/components/top_nav_bar_component.dart
+++ b/justMUSIC/lib/components/top_nav_bar_component.dart
@@ -55,10 +55,12 @@ class _TopNavBarComponentState extends State {
children: [
GestureDetector(
onTap: () {
- setState(() {
- choice = !choice;
- actionSurBouton();
- });
+ if (!choice) {
+ setState(() {
+ choice = !choice;
+ actionSurBouton();
+ });
+ }
},
child: LayoutBuilder(
builder: (BuildContext context,
@@ -85,10 +87,12 @@ class _TopNavBarComponentState extends State {
),
GestureDetector(
onTap: () {
- setState(() {
- choice = !choice;
- actionSurBouton();
- });
+ if (choice) {
+ setState(() {
+ choice = !choice;
+ actionSurBouton();
+ });
+ }
},
child: LayoutBuilder(
builder: (BuildContext context,
diff --git a/justMUSIC/lib/screens/feed_screen.dart b/justMUSIC/lib/screens/feed_screen.dart
index 746f420..7216c44 100644
--- a/justMUSIC/lib/screens/feed_screen.dart
+++ b/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
with SingleTickerProviderStateMixin {
late AnimationController animationController;
late Animation animation;
- List friendFeed = [
- PostComponent(),
- PostComponent(),
- PostComponent(),
- ];
- List discoveryFeed = [
- PostComponent(),
- ];
+ late List friendFeed;
+ late List discoveryFeed;
late List 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
}
}
+ 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
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
child: Padding(
padding: EdgeInsets.only(top: 100.h),
child: SingleChildScrollView(
- child: Column(
- crossAxisAlignment: CrossAxisAlignment.start,
+ child: Wrap(
+ runSpacing: 60,
children: displayFeed,
),
)),
diff --git a/justMUSIC/lib/values/constants.dart b/justMUSIC/lib/values/constants.dart
index fd0dbb5..0bc9068 100644
--- a/justMUSIC/lib/values/constants.dart
+++ b/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
diff --git a/justMUSIC/pubspec.lock b/justMUSIC/pubspec.lock
index bbc6777..adfb5cd 100644
--- a/justMUSIC/pubspec.lock
+++ b/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"
diff --git a/justMUSIC/pubspec.yaml b/justMUSIC/pubspec.yaml
index 036e576..0be4218 100644
--- a/justMUSIC/pubspec.yaml
+++ b/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: