Lucas Delanier
2 years ago
parent
6fc57002aa
commit
74b50aae81
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 816 B |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 4.8 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 230 B |
@ -0,0 +1,105 @@
|
|||||||
|
import 'package:flutter/Material.dart';
|
||||||
|
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
||||||
|
import 'package:google_fonts/google_fonts.dart';
|
||||||
|
import 'package:justmusic/values/constants.dart';
|
||||||
|
|
||||||
|
class EditablePostComponent extends StatefulWidget {
|
||||||
|
const EditablePostComponent({Key? key}) : super(key: key);
|
||||||
|
|
||||||
|
@override
|
||||||
|
State<EditablePostComponent> createState() => _EditablePostComponentState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class _EditablePostComponentState extends State<EditablePostComponent> {
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return ClipRRect(
|
||||||
|
borderRadius: BorderRadius.circular(25),
|
||||||
|
child: Container(
|
||||||
|
width: double.infinity,
|
||||||
|
color: warningBttnColor,
|
||||||
|
child: Column(
|
||||||
|
children: [
|
||||||
|
AspectRatio(
|
||||||
|
aspectRatio: 1 / 1,
|
||||||
|
child: Container(
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
// add border
|
||||||
|
border: Border.all(width: 3.0, color: grayColor),
|
||||||
|
// set border radius
|
||||||
|
borderRadius: BorderRadius.circular(20),
|
||||||
|
),
|
||||||
|
child: ClipRRect(
|
||||||
|
borderRadius: BorderRadius.circular(18),
|
||||||
|
// implement image
|
||||||
|
child: Image(
|
||||||
|
image: AssetImage("assets/images/exemple_cover.png"),
|
||||||
|
fit: BoxFit.cover,
|
||||||
|
width: double.infinity,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
Padding(
|
||||||
|
padding: EdgeInsets.fromLTRB(15.sp, 25.sp, 15.sp, 25.sp),
|
||||||
|
child: Row(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||||
|
children: [
|
||||||
|
Text("France, Lyon",
|
||||||
|
style: GoogleFonts.plusJakartaSans(
|
||||||
|
color: Colors.white, fontSize: 13.sp)),
|
||||||
|
Image(
|
||||||
|
image: AssetImage("assets/images/camera_icon.png"),
|
||||||
|
width: 30,
|
||||||
|
),
|
||||||
|
Text("10 Juil. 2023",
|
||||||
|
style: GoogleFonts.plusJakartaSans(
|
||||||
|
color: Colors.white, fontSize: 13.sp)),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
Padding(
|
||||||
|
padding: EdgeInsets.fromLTRB(15.sp, 0, 10.sp, 25.sp),
|
||||||
|
child: SizedBox(
|
||||||
|
width: double.infinity,
|
||||||
|
child: TextFormField(
|
||||||
|
keyboardAppearance: Brightness.dark,
|
||||||
|
minLines: 1,
|
||||||
|
cursorColor: primaryColor,
|
||||||
|
style: GoogleFonts.plusJakartaSans(
|
||||||
|
color: Colors.white,
|
||||||
|
fontSize: 13.sp,
|
||||||
|
fontWeight: FontWeight.w300),
|
||||||
|
maxLines: 4,
|
||||||
|
maxLength: 120,
|
||||||
|
decoration: InputDecoration(
|
||||||
|
counterStyle: GoogleFonts.plusJakartaSans(
|
||||||
|
color: grayText, fontSize: 9.sp),
|
||||||
|
focusedBorder: const OutlineInputBorder(
|
||||||
|
borderSide:
|
||||||
|
BorderSide(width: 0, color: Colors.transparent),
|
||||||
|
borderRadius:
|
||||||
|
BorderRadius.all(Radius.circular(10))),
|
||||||
|
contentPadding:
|
||||||
|
const EdgeInsets.only(top: 0, bottom: 0, left: 0),
|
||||||
|
fillColor: Colors.transparent,
|
||||||
|
filled: true,
|
||||||
|
focusColor: Colors.transparent,
|
||||||
|
enabledBorder: const OutlineInputBorder(
|
||||||
|
borderSide:
|
||||||
|
BorderSide(width: 0, color: Colors.transparent),
|
||||||
|
borderRadius:
|
||||||
|
BorderRadius.all(Radius.circular(10))),
|
||||||
|
hintText: 'Description...',
|
||||||
|
hintStyle: GoogleFonts.plusJakartaSans(
|
||||||
|
color: grayText,
|
||||||
|
fontSize: 13.sp,
|
||||||
|
fontWeight: FontWeight.w300),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
)),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
));
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
import 'package:flutter/Material.dart';
|
||||||
|
import 'package:google_fonts/google_fonts.dart';
|
||||||
|
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
||||||
|
|
||||||
|
class PostButtonComponent extends StatelessWidget {
|
||||||
|
const PostButtonComponent({Key? key}) : super(key: key);
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Container(
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
gradient: LinearGradient(colors: [
|
||||||
|
Color(0xFF141414),
|
||||||
|
Color(0xFF272727),
|
||||||
|
Color(0xFF141414)
|
||||||
|
]),
|
||||||
|
borderRadius: BorderRadius.circular(10000)),
|
||||||
|
padding: EdgeInsets.symmetric(vertical: 25.sp),
|
||||||
|
width: double.infinity,
|
||||||
|
child: Align(
|
||||||
|
child: Text(
|
||||||
|
"Publier la capsule",
|
||||||
|
style: GoogleFonts.plusJakartaSans(
|
||||||
|
color: Color(0xFF474747),
|
||||||
|
fontWeight: FontWeight.w800,
|
||||||
|
fontStyle: FontStyle.italic,
|
||||||
|
fontSize: 24.sp),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
import 'package:flutter/Material.dart';
|
||||||
|
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
||||||
|
import 'package:google_fonts/google_fonts.dart';
|
||||||
|
|
||||||
|
import '../values/constants.dart';
|
||||||
|
|
||||||
|
class SearchBarComponent extends StatefulWidget {
|
||||||
|
final String? text;
|
||||||
|
const SearchBarComponent({Key? key, this.text}) : super(key: key);
|
||||||
|
|
||||||
|
@override
|
||||||
|
State<SearchBarComponent> createState() => _SearchBarComponentState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class _SearchBarComponentState extends State<SearchBarComponent> {
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return ClipRRect(
|
||||||
|
borderRadius: BorderRadius.all(Radius.circular(20)),
|
||||||
|
child: Container(
|
||||||
|
color: searchBarColor,
|
||||||
|
width: double.infinity,
|
||||||
|
padding:
|
||||||
|
EdgeInsets.fromLTRB(defaultPadding, 16.sp, defaultPadding, 16.sp),
|
||||||
|
child: Text(
|
||||||
|
widget.text ?? "Chercher une musique...",
|
||||||
|
style: GoogleFonts.plusJakartaSans(color: Colors.white),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,69 @@
|
|||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:google_fonts/google_fonts.dart';
|
||||||
|
import 'package:justmusic/values/icons.dart';
|
||||||
|
|
||||||
|
import '../values/constants.dart';
|
||||||
|
|
||||||
|
class SettingPartComponent extends StatelessWidget {
|
||||||
|
final JustMusicIcon icon;
|
||||||
|
final String label;
|
||||||
|
final bool important;
|
||||||
|
const SettingPartComponent(
|
||||||
|
{Key? key,
|
||||||
|
required this.icon,
|
||||||
|
required this.label,
|
||||||
|
this.important = false})
|
||||||
|
: super(key: key);
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Material(
|
||||||
|
color: important ? warningBttnColor : settingColor,
|
||||||
|
borderOnForeground: false,
|
||||||
|
child: InkWell(
|
||||||
|
onTap: () {
|
||||||
|
print('InkWell was tapped!');
|
||||||
|
},
|
||||||
|
splashColor: Colors.transparent,
|
||||||
|
highlightColor: Colors.white.withOpacity(0.08),
|
||||||
|
child: Container(
|
||||||
|
width: double.infinity,
|
||||||
|
child: Padding(
|
||||||
|
padding: const EdgeInsets.fromLTRB(
|
||||||
|
defaultPadding, 19, defaultPadding, 19),
|
||||||
|
child: Row(
|
||||||
|
children: [
|
||||||
|
Image(
|
||||||
|
image: AssetImage(icon.imagePath),
|
||||||
|
width: 13,
|
||||||
|
),
|
||||||
|
const SizedBox(
|
||||||
|
width: 15,
|
||||||
|
),
|
||||||
|
Expanded(
|
||||||
|
flex: 10,
|
||||||
|
child: Text(
|
||||||
|
label,
|
||||||
|
overflow: TextOverflow.ellipsis,
|
||||||
|
style: GoogleFonts.plusJakartaSans(
|
||||||
|
color: Colors.white, fontWeight: FontWeight.w700),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
Spacer(),
|
||||||
|
Transform(
|
||||||
|
alignment: Alignment.center,
|
||||||
|
transform: Matrix4.rotationY(3.14159265),
|
||||||
|
child: Image(
|
||||||
|
image: AssetImage("assets/images/return_icon.png"),
|
||||||
|
height: 11,
|
||||||
|
opacity: const AlwaysStoppedAnimation(.5),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,60 @@
|
|||||||
|
import 'package:flutter/Material.dart';
|
||||||
|
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
||||||
|
|
||||||
|
import '../components/editable_post_component.dart';
|
||||||
|
import '../components/post_button_component.dart';
|
||||||
|
import '../components/search_bar_component.dart';
|
||||||
|
import '../values/constants.dart';
|
||||||
|
|
||||||
|
class PostScreen extends StatefulWidget {
|
||||||
|
const PostScreen({Key? key}) : super(key: key);
|
||||||
|
|
||||||
|
@override
|
||||||
|
State<PostScreen> createState() => _PostScreenState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class _PostScreenState extends State<PostScreen> {
|
||||||
|
final scrollController = ScrollController();
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Scaffold(
|
||||||
|
resizeToAvoidBottomInset: true,
|
||||||
|
backgroundColor: bgColor,
|
||||||
|
body: Container(
|
||||||
|
padding: EdgeInsets.only(
|
||||||
|
left: defaultPadding, top: defaultPadding, right: defaultPadding),
|
||||||
|
width: double.infinity,
|
||||||
|
height: double.infinity,
|
||||||
|
decoration: const BoxDecoration(
|
||||||
|
image: DecorationImage(
|
||||||
|
image: AssetImage("assets/images/background_justMusic.png"),
|
||||||
|
fit: BoxFit.cover,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
child: Stack(
|
||||||
|
children: [
|
||||||
|
SingleChildScrollView(
|
||||||
|
controller: scrollController,
|
||||||
|
child: Column(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.end,
|
||||||
|
children: [
|
||||||
|
SizedBox(
|
||||||
|
height: 150.h,
|
||||||
|
),
|
||||||
|
EditablePostComponent(),
|
||||||
|
SizedBox(
|
||||||
|
height: 40.sp,
|
||||||
|
),
|
||||||
|
PostButtonComponent(),
|
||||||
|
SizedBox(
|
||||||
|
height: 40.sp,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
SearchBarComponent(),
|
||||||
|
],
|
||||||
|
)),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,33 @@
|
|||||||
|
enum JustMusicIcon {
|
||||||
|
profile,
|
||||||
|
spotify,
|
||||||
|
trash,
|
||||||
|
cross,
|
||||||
|
history,
|
||||||
|
theme,
|
||||||
|
notification
|
||||||
|
}
|
||||||
|
|
||||||
|
extension MyIconExtension on JustMusicIcon {
|
||||||
|
String get imagePath {
|
||||||
|
switch (this) {
|
||||||
|
case JustMusicIcon.profile:
|
||||||
|
return 'assets/images/profile_icon.png';
|
||||||
|
case JustMusicIcon.spotify:
|
||||||
|
return 'assets/images/spotify_icon.png';
|
||||||
|
case JustMusicIcon.trash:
|
||||||
|
return 'assets/images/trash_icon.png';
|
||||||
|
case JustMusicIcon.cross:
|
||||||
|
return 'assets/images/cross_icon.png';
|
||||||
|
case JustMusicIcon.history:
|
||||||
|
return 'assets/images/history_icon.png';
|
||||||
|
case JustMusicIcon.theme:
|
||||||
|
return 'assets/images/theme_icon.png';
|
||||||
|
case JustMusicIcon.notification:
|
||||||
|
return 'assets/images/notification_icon.png';
|
||||||
|
|
||||||
|
default:
|
||||||
|
throw 'assets/images/unknown.png';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in new issue