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