diff --git a/justMUSIC/assets/images/add_friend.png b/justMUSIC/assets/images/add_friend.png new file mode 100644 index 0000000..3e4195e Binary files /dev/null and b/justMUSIC/assets/images/add_friend.png differ diff --git a/justMUSIC/assets/images/exemple_cover.png b/justMUSIC/assets/images/exemple_cover.png new file mode 100644 index 0000000..0bbaebf Binary files /dev/null and b/justMUSIC/assets/images/exemple_cover.png differ diff --git a/justMUSIC/assets/images/exemple_profile.png b/justMUSIC/assets/images/exemple_profile.png new file mode 100644 index 0000000..19cf8e9 Binary files /dev/null and b/justMUSIC/assets/images/exemple_profile.png differ diff --git a/justMUSIC/assets/images/shadow_post.png b/justMUSIC/assets/images/shadow_post.png new file mode 100644 index 0000000..bd3de94 Binary files /dev/null and b/justMUSIC/assets/images/shadow_post.png differ diff --git a/justMUSIC/lib/components/post_component.dart b/justMUSIC/lib/components/post_component.dart new file mode 100644 index 0000000..811434e --- /dev/null +++ b/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), + ], + ), + ); + } +} diff --git a/justMUSIC/lib/components/top_nav_bar_component.dart b/justMUSIC/lib/components/top_nav_bar_component.dart new file mode 100644 index 0000000..a3c13da --- /dev/null +++ b/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 createState() => _TopNavBarComponentState(); +} + +class _TopNavBarComponentState extends State { + @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, + )) + ], + ), + ), + ); + } +} diff --git a/justMUSIC/lib/main.dart b/justMUSIC/lib/main.dart index bac6ccc..a633f84 100644 --- a/justMUSIC/lib/main.dart +++ b/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, - theme: ThemeData( - // This is the theme of your application. - // - // Try running your application with "flutter run". You'll see the - // application has a blue toolbar. Then, without quitting the app, try - // changing the primarySwatch below to Colors.green and then invoke - // "hot reload" (press "r" in the console where you ran "flutter run", - // or simply save your changes to "hot reload" in a Flutter IDE). - // Notice that the counter didn't reset back to zero; the application - // is not restarted. - primarySwatch: Colors.blue, - ), - home: const ExplanationsScreen(), - ); + debugShowCheckedModeBanner: false, + theme: ThemeData( + // This is the theme of your application. + // + // Try running your application with "flutter run". You'll see the + // application has a blue toolbar. Then, without quitting the app, try + // changing the primarySwatch below to Colors.green and then invoke + // "hot reload" (press "r" in the console where you ran "flutter run", + // or simply save your changes to "hot reload" in a Flutter IDE). + // Notice that the counter didn't reset back to zero; the application + // is not restarted. + primarySwatch: Colors.blue, + ), + home: const SafeArea( + child: FeedScreen(), + )); }, designSize: Size(390, 844), ); diff --git a/justMUSIC/lib/screens/feed_screen.dart b/justMUSIC/lib/screens/feed_screen.dart new file mode 100644 index 0000000..9d76663 --- /dev/null +++ b/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 createState() => _FeedScreenState(); +} + +class _FeedScreenState extends State { + @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(), + ), + ), + ], + ), + ); + } +} diff --git a/justMUSIC/lib/values/constants.dart b/justMUSIC/lib/values/constants.dart index 50d327a..fd0dbb5 100644 --- a/justMUSIC/lib/values/constants.dart +++ b/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