Start of the feed page

pull/14/head
Lucas Delanier 2 years ago
parent 1c82a6962e
commit e2a13215c0

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 792 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 439 KiB

@ -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(
"Aujourdhui, 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),
],
),
);
}
}

@ -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,
))
],
),
),
);
}
}

@ -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),
);

@ -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(),
),
),
],
),
);
}
}

@ -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

Loading…
Cancel
Save