ajout debut page messages et ajout placeholder

pull/81/head
Lucas Delanier 3 years ago
parent 16b5f9fe5c
commit ae5859aab1

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

@ -4,6 +4,7 @@ import './w_settings.dart';
import './w_spot.dart'; import './w_spot.dart';
import './w_discovery.dart'; import './w_discovery.dart';
import './w_profile.dart'; import './w_profile.dart';
import './w_messages.dart';
class MainPage extends StatefulWidget { class MainPage extends StatefulWidget {
const MainPage({Key? key}) : super(key: key); const MainPage({Key? key}) : super(key: key);
@ -21,7 +22,7 @@ class _MainPageState extends State<MainPage> {
DiscoveryWidget(), DiscoveryWidget(),
SpotsWidget(), SpotsWidget(),
Center(child: Text('Tops'),), Center(child: Text('Tops'),),
Center(child: Text('Messages'),), MessagesWidget(),
SettingsWidget(), SettingsWidget(),
]; ];
@override @override

@ -12,7 +12,7 @@ class User{
required this.chanteur, required this.chanteur,
required this.titre, required this.titre,
required this.urlImage, required this.urlImage,
}); });
} }
@ -44,21 +44,21 @@ class _CardWidgetState extends State<CardWidget>{
} }
@override @override
Widget build(BuildContext context) => SizedBox.expand( Widget build(BuildContext context) => SizedBox.expand(
child: widget.isFront ? buildFrontCard() : buildCard(), child: widget.isFront ? buildFrontCard() : buildCard(),
); );
Widget buildCard() => ClipRRect( Widget buildCard() => ClipRRect(
borderRadius: BorderRadius.circular(20), borderRadius: BorderRadius.circular(20),
child: Container( child: Container(
decoration: BoxDecoration( decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(widget.urlImage),
fit: BoxFit.cover,
alignment: Alignment(0,0),
),
borderRadius: BorderRadius.all(Radius.circular(20)) borderRadius: BorderRadius.all(Radius.circular(20))
), ),
child: FadeInImage.assetNetwork(
height: double.infinity,
width: double.infinity,
fit: BoxFit.cover,
placeholder: "assets/images/loadingPlaceholder.gif", image: widget.urlImage),
), ),
); );
@ -84,29 +84,29 @@ class _CardWidgetState extends State<CardWidget>{
} }
Widget buildStamp({ Widget buildStamp({
double angle = 0, double angle = 0,
required String image, required String image,
required double opacity, required double opacity,
}) { }) {
return Opacity(opacity: opacity, return Opacity(opacity: opacity,
child: ClipRRect( child: ClipRRect(
borderRadius: BorderRadius.circular(20), borderRadius: BorderRadius.circular(20),
child: Container( child: Container(
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.black.withOpacity(0.75), color: Colors.black.withOpacity(0.75),
border: Border.all(color: Color(0xFF3F1DC3), width: 6), border: Border.all(color: Color(0xFF3F1DC3), width: 6),
borderRadius: BorderRadius.all(Radius.circular(20)) borderRadius: BorderRadius.all(Radius.circular(20))
),
child: Center(
child: Image.asset(
image,
width: 100,
), ),
child: Center(
child: Image.asset(
image,
width: 100,
),
),
), ),
), ),);
),);
} }
Widget buildFrontCard() => GestureDetector( Widget buildFrontCard() => GestureDetector(

@ -13,162 +13,197 @@ class _DiscoveryWidgetState extends State<DiscoveryWidget> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Container(
backgroundColor: Color(0xFF141414), color: Color(0xFF141414),
resizeToAvoidBottomInset: false,
child: Padding(padding: EdgeInsets.fromLTRB(30, 50, 30, 0),
body: Padding(padding: EdgeInsets.fromLTRB(30, 50, 30, 0), child: Column(
child: Column( crossAxisAlignment: CrossAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start, children: [
children: [ Container(
Container( child: Column(
child: Column( crossAxisAlignment: CrossAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start, children: [
children: [ Row(
Row( children: [
children: [ Text('Playlist découverte', style: TextStyle(color: Colors.white, fontWeight: FontWeight.w500, fontSize: 25),),
Text('Playlist découverte', style: TextStyle(color: Colors.white, fontWeight: FontWeight.w500, fontSize: 25),), Spacer(),
Spacer(), Icon(FontAwesome5.sort_amount_down, size: 30, color: Colors.white,),
Icon(FontAwesome5.sort_amount_down, size: 30, color: Colors.white,), ]
] ),
), Padding(padding: EdgeInsets.fromLTRB(0, 5, 0, 0)),
Padding(padding: EdgeInsets.fromLTRB(0, 5, 0, 0)), Text('Retrouvez ici vos nouvelles découvertes.', style: TextStyle(color: Colors.grey.withOpacity(0.4), fontSize: 15),),
Text('Retrouvez ici vos nouvelles découvertes.', style: TextStyle(color: Colors.grey.withOpacity(0.4), fontSize: 15),), ],
],
),
), ),
Expanded( ),
child: ListView( Expanded(
child: ListView(
children: [
SizedBox(height: 40,), children: [
Container( SizedBox(height: 40,),
margin: EdgeInsets.fromLTRB(0, 10, 0, 0), Container(
child: Column( margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
children: [ child: Column(
children: [
Container(
margin: EdgeInsets.fromLTRB(0, 5, 0, 0), Container(
width: double.infinity, margin: EdgeInsets.fromLTRB(0, 5, 0, 0),
child: Row( width: double.infinity,
children: [ child: Row(
Container( children: [
height: 60, Container(
width: 60, height: 60,
decoration: BoxDecoration( width: 60,
image: DecorationImage( decoration: BoxDecoration(
image: NetworkImage('https://www.goutemesdisques.com/uploads/tx_gmdchron/pi1/L_Etrange_Histoire_de_Mr_Anderson.jpg'), border: Border.all(width: 0, color: Colors.grey.withOpacity(0)),
fit: BoxFit.cover, borderRadius: BorderRadius.all(Radius.circular(10)),
), ),
border: Border.all(width: 0, color: Colors.grey.withOpacity(0)), child: Container(
borderRadius: BorderRadius.all(Radius.circular(10)), child: FadeInImage.assetNetwork(placeholder: "assets/images/loadingPlaceholder.gif", image: 'https://www.goutemesdisques.com/uploads/tx_gmdchron/pi1/L_Etrange_Histoire_de_Mr_Anderson.jpg'),
),), ),),
Container( Container(
margin: EdgeInsets.fromLTRB(20, 0, 0, 0), margin: EdgeInsets.fromLTRB(20, 0, 0, 0),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
Text('IVERSON',style: TextStyle(fontFamily: 'DMSans', color: Colors.white.withOpacity(1) ,fontSize: 20, fontWeight: FontWeight.w800),), Text('IVERSON',style: TextStyle(fontFamily: 'DMSans', color: Colors.white.withOpacity(1) ,fontSize: 20, fontWeight: FontWeight.w800),),
Text('Laylow',style: TextStyle(fontFamily: 'DMSans', color: Colors.white.withOpacity(0.6) ,fontSize: 16, fontWeight: FontWeight.w400),), Text('Laylow',style: TextStyle(fontFamily: 'DMSans', color: Colors.white.withOpacity(0.6) ,fontSize: 16, fontWeight: FontWeight.w400),),
], ],
),), ),),
], ],
), ),
),
],
)
),
Container(
margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
child: Column(
children: [
Container(
margin: EdgeInsets.fromLTRB(0, 5, 0, 0),
width: double.infinity,
child: Row(
children: [
Container(
height: 60,
width: 60,
decoration: BoxDecoration(
border: Border.all(width: 0, color: Colors.grey.withOpacity(0)),
borderRadius: BorderRadius.all(Radius.circular(10)),
),
child: Container(
child: FadeInImage.assetNetwork(placeholder: "assets/images/loadingPlaceholder.gif", image: 'https://www.goutemesdisques.com/uploads/tx_gmdchron/pi1/L_Etrange_Histoire_de_Mr_Anderson.jpg'),
),),
Container(
margin: EdgeInsets.fromLTRB(20, 0, 0, 0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('IVERSON',style: TextStyle(fontFamily: 'DMSans', color: Colors.white.withOpacity(1) ,fontSize: 20, fontWeight: FontWeight.w800),),
Text('Laylow',style: TextStyle(fontFamily: 'DMSans', color: Colors.white.withOpacity(0.6) ,fontSize: 16, fontWeight: FontWeight.w400),),
],
),),
],
), ),
),
],
)
),
Container(
margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
child: Column(
children: [
], Container(
) margin: EdgeInsets.fromLTRB(0, 5, 0, 0),
), width: double.infinity,
Container( child: Row(
margin: EdgeInsets.fromLTRB(0, 10, 0, 0), children: [
child: Column( Container(
children: [ height: 60,
width: 60,
Container( decoration: BoxDecoration(
margin: EdgeInsets.fromLTRB(0, 5, 0, 0), border: Border.all(width: 0, color: Colors.grey.withOpacity(0)),
width: double.infinity, borderRadius: BorderRadius.all(Radius.circular(10)),
child: Row( ),
children: [ child: Container(
Container( child: FadeInImage.assetNetwork(placeholder: "assets/images/loadingPlaceholder.gif", image: 'https://www.goutemesdisques.com/uploads/tx_gmdchron/pi1/L_Etrange_Histoire_de_Mr_Anderson.jpg'),
height: 60, ),),
width: 60, Container(
decoration: BoxDecoration( margin: EdgeInsets.fromLTRB(20, 0, 0, 0),
image: DecorationImage( child: Column(
image: NetworkImage('https://www.goutemesdisques.com/uploads/tx_gmdchron/pi1/L_Etrange_Histoire_de_Mr_Anderson.jpg'), crossAxisAlignment: CrossAxisAlignment.start,
fit: BoxFit.cover, mainAxisAlignment: MainAxisAlignment.center,
), children: [
border: Border.all(width: 0, color: Colors.grey.withOpacity(0)), Text('IVERSON',style: TextStyle(fontFamily: 'DMSans', color: Colors.white.withOpacity(1) ,fontSize: 20, fontWeight: FontWeight.w800),),
borderRadius: BorderRadius.all(Radius.circular(10)), Text('Laylow',style: TextStyle(fontFamily: 'DMSans', color: Colors.white.withOpacity(0.6) ,fontSize: 16, fontWeight: FontWeight.w400),),
),),
Container( ],
margin: EdgeInsets.fromLTRB(20, 0, 0, 0), ),),
child: Column( ],
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('IVERSON',style: TextStyle(fontFamily: 'DMSans', color: Colors.white.withOpacity(1) ,fontSize: 20, fontWeight: FontWeight.w800),),
Text('Laylow',style: TextStyle(fontFamily: 'DMSans', color: Colors.white.withOpacity(0.6) ,fontSize: 16, fontWeight: FontWeight.w400),),
],
),),
],
),
), ),
),
],
)
),
Container(
margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
child: Column(
children: [
], Container(
) margin: EdgeInsets.fromLTRB(0, 5, 0, 0),
), width: double.infinity,
Container( child: Row(
margin: EdgeInsets.fromLTRB(0, 10, 0, 0), children: [
child: Column( Container(
children: [ height: 60,
width: 60,
Container( decoration: BoxDecoration(
margin: EdgeInsets.fromLTRB(0, 5, 0, 0), border: Border.all(width: 0, color: Colors.grey.withOpacity(0)),
width: double.infinity, borderRadius: BorderRadius.all(Radius.circular(10)),
child: Row( ),
children: [ child: Container(
Container( child: FadeInImage.assetNetwork(placeholder: "assets/images/loadingPlaceholder.gif", image: 'https://www.goutemesdisques.com/uploads/tx_gmdchron/pi1/L_Etrange_Histoire_de_Mr_Anderson.jpg'),
height: 60, ),),
width: 60, Container(
decoration: BoxDecoration( margin: EdgeInsets.fromLTRB(20, 0, 0, 0),
image: DecorationImage( child: Column(
image: NetworkImage('https://www.goutemesdisques.com/uploads/tx_gmdchron/pi1/L_Etrange_Histoire_de_Mr_Anderson.jpg'), crossAxisAlignment: CrossAxisAlignment.start,
fit: BoxFit.cover, mainAxisAlignment: MainAxisAlignment.center,
), children: [
border: Border.all(width: 0, color: Colors.grey.withOpacity(0)), Text('IVERSON',style: TextStyle(fontFamily: 'DMSans', color: Colors.white.withOpacity(1) ,fontSize: 20, fontWeight: FontWeight.w800),),
borderRadius: BorderRadius.all(Radius.circular(10)), Text('Laylow',style: TextStyle(fontFamily: 'DMSans', color: Colors.white.withOpacity(0.6) ,fontSize: 16, fontWeight: FontWeight.w400),),
),),
Container( ],
margin: EdgeInsets.fromLTRB(20, 0, 0, 0), ),),
child: Column( ],
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('IVERSON',style: TextStyle(fontFamily: 'DMSans', color: Colors.white.withOpacity(1) ,fontSize: 20, fontWeight: FontWeight.w800),),
Text('Laylow',style: TextStyle(fontFamily: 'DMSans', color: Colors.white.withOpacity(0.6) ,fontSize: 16, fontWeight: FontWeight.w400),),
],
),),
],
),
), ),
),
], ],
) )
), ),
], ],
),
), ),
], ),
),), ],
),),
); );
} }
} }

@ -0,0 +1,215 @@
import 'package:flutter/material.dart';
import 'package:fluttericon/font_awesome5_icons.dart';
class MessagesWidget extends StatefulWidget {
const MessagesWidget({Key? key}) : super(key: key);
@override
State<MessagesWidget> createState() => _MessagesWidgetState();
}
class _MessagesWidgetState extends State<MessagesWidget> {
int indexSectedButton = 0;
Widget listeActuelle = ListConfirmedWidget();
var colorConfirm = Color(0xFFFFFFFF);
var colorWaiting = Color(0xFFA8A8A8);
void changeSelected(int num){
if(indexSectedButton == num){
return;
}
else{
if(num == 0){
setState((){
colorConfirm = Color(0xFFFFFFFF);
colorWaiting = Color(0xFFA8A8A8);
listeActuelle = ListConfirmedWidget();
indexSectedButton = num;
});
}
else{
setState((){
colorConfirm = Color(0xFFA8A8A8);
colorWaiting = Color(0xFFFFFFFF);
listeActuelle = ListWaitingWidget();
indexSectedButton = num;
});
}
}
}
@override
Widget build(BuildContext context) {
double height = MediaQuery.of(context).size.height;
double width = MediaQuery.of(context).size.width;
return Container(
color: Color(0xFF141414),
child: Padding(padding: EdgeInsets.fromLTRB(30, 50, 30, 0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Messages', style: TextStyle(color: Colors.white, fontWeight: FontWeight.w500, fontSize: 25)),
Padding(padding: EdgeInsets.fromLTRB(0, 5, 0, 0)),
Text('Retrouvez ici vos discussions.', style: TextStyle(color: Colors.grey.withOpacity(0.4), fontSize: 15),),
Padding(
padding: EdgeInsets.fromLTRB(0, height*0.01, 0, 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
SizedBox(
height: 35,
width: width*0.35,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: colorConfirm,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),// background// foreground
),
onPressed: () {
changeSelected(0);
},
child: Text("Validées",
style: TextStyle(color: Colors.black ,fontSize: 17, fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
),
),),
SizedBox(
height: 35,
width: width*0.35,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: colorWaiting,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),// background// foreground
),
onPressed: () {
changeSelected(1);
},
child: Text("En attente",
style: TextStyle(color: Colors.black ,fontSize: 17, fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
),
),),
],
),),
],
),
),
Expanded(
child:
listeActuelle,
),
],
),),
);
}
}
class MessagesButtonWidget extends StatelessWidget{
@override
Widget build(BuildContext context) {
double height = MediaQuery.of(context).size.height;
double width = MediaQuery.of(context).size.width;
return Container(
margin: EdgeInsets.fromLTRB(0, 0, 0, 10),
child: Column(
children: [
Container(
margin: EdgeInsets.fromLTRB(0, 5, 0, 0),
child: Row(
children: [
Container(
height: 60,
width: 60,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage('https://www.goutemesdisques.com/uploads/tx_gmdchron/pi1/L_Etrange_Histoire_de_Mr_Anderson.jpg'),
fit: BoxFit.cover,
),
border: Border.all(width: 0, color: Colors.grey.withOpacity(0)),
borderRadius: BorderRadius.all(Radius.circular(30)),
),),
Container(
width: width-160,
margin: EdgeInsets.fromLTRB(20, 0, 20, 0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('Max',style: TextStyle(fontFamily: 'DMSans', color: Colors.white.withOpacity(1) ,fontSize: 20, fontWeight: FontWeight.w800),),
Spacer(),
Text('1 jour(s)',style: TextStyle(fontFamily: 'DMSans', color: Colors.white.withOpacity(0.8) ,fontSize: 15, fontWeight: FontWeight.w400),),
],
),
Text('A envoyé un musique.',style: TextStyle(fontFamily: 'DMSans', color: Colors.white.withOpacity(0.6) ,fontSize: 16, fontWeight: FontWeight.w400),),
],
),),
],
),
),
],
)
);
}
}
class ListConfirmedWidget extends StatelessWidget{
@override
Widget build(BuildContext context) {
double height = MediaQuery.of(context).size.height;
double width = MediaQuery.of(context).size.width;
return ListView(
children: [
SizedBox(height: 40,),
MessagesButtonWidget(),
MessagesButtonWidget(),
MessagesButtonWidget(),
MessagesButtonWidget(),
],
);
}
}
class ListWaitingWidget extends StatelessWidget{
@override
Widget build(BuildContext context) {
double height = MediaQuery.of(context).size.height;
double width = MediaQuery.of(context).size.width;
return ListView(
children: [
SizedBox(height: 40,),
MessagesButtonWidget(),
],
);
}
}

@ -16,198 +16,209 @@ class _ProfilWidgetState extends State<ProfilWidget> {
Widget build(BuildContext context) { Widget build(BuildContext context) {
double height = MediaQuery.of(context).size.height; double height = MediaQuery.of(context).size.height;
return MainPageProfil();
}
}
class MainPageProfil extends StatelessWidget {
const MainPageProfil({super.key});
@override
Widget build(BuildContext context) {
double height = MediaQuery.of(context).size.height;
double width = MediaQuery.of(context).size.width;
return Container( return Container(
color: Color(0xFF141414), color: Color(0xFF141414),
child: Container( child: Container(
width: double.infinity, width: double.infinity,
height: double.infinity, height: double.infinity,
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center,
children: [ children: [
Container( Container(
width: double.infinity, width: double.infinity,
margin: EdgeInsets.fromLTRB(30, 50, 0, 0), margin: EdgeInsets.fromLTRB(30, 50, 0, 0),
child: Text( child: Text(
"Profil", "Profil",
style: TextStyle(fontSize: 25, fontWeight: FontWeight.w600, color: Colors.white),), style: TextStyle(fontSize: 25, fontWeight: FontWeight.w600, color: Colors.white),),
),
Container(
margin: EdgeInsets.fromLTRB(0, 10, 0, 40),
height: height*0.14,
width: height*0.14,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100.0),
color: Colors.blue,border: Border.all(width: 6.0, color: Colors.white),
), ),
), Container(
Container( margin: EdgeInsets.fromLTRB(0, 10, 0, 40),
height: 55, height: height*0.14,
width: double.infinity, width: height*0.14,
decoration: BoxDecoration( decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0), borderRadius: BorderRadius.circular(100.0),
color: Colors.transparent, color: Colors.blue,border: Border.all(width: 6.0, color: Colors.white),
),
), ),
margin: EdgeInsets.fromLTRB(30, 0, 30, 0), Container(
child: SizedBox(
height: 55, height: 55,
width: double.infinity, width: double.infinity,
child: ElevatedButton( decoration: BoxDecoration(
style: ElevatedButton.styleFrom( borderRadius: BorderRadius.circular(10.0),
backgroundColor: Color(0xFFD9D9D9).withOpacity(0.08), color: Colors.transparent,
shape: RoundedRectangleBorder( ),
borderRadius: BorderRadius.circular(10.0), margin: EdgeInsets.fromLTRB(30, 0, 30, 0),
),// background// foreground child: SizedBox(
), height: 55,
onPressed: () { width: double.infinity,
}, child: ElevatedButton(
child: Row( style: ElevatedButton.styleFrom(
children: [ backgroundColor: Color(0xFFD9D9D9).withOpacity(0.08),
Image.asset('assets/images/fav_logo.png', height: 25,), shape: RoundedRectangleBorder(
SizedBox(width: 12,), borderRadius: BorderRadius.circular(10.0),
Text("Préférences musicales", ),// background// foreground
style: TextStyle(color: Colors.white ,fontSize: 17, fontWeight: FontWeight.w400), ),
textAlign: TextAlign.center, onPressed: () {
), },
Spacer(), child: Row(
Icon(Icons.arrow_forward_ios, color: Colors.white.withOpacity(0.3),), children: [
], Image.asset('assets/images/fav_logo.png', height: 25,),
) SizedBox(width: 12,),
),), Text("Préférences musicales",
), style: TextStyle(color: Colors.white ,fontSize: 17, fontWeight: FontWeight.w400),
Container( textAlign: TextAlign.center,
height: 55, ),
width: double.infinity, Spacer(),
decoration: BoxDecoration( Icon(Icons.arrow_forward_ios, color: Colors.white.withOpacity(0.3),),
borderRadius: BorderRadius.circular(10.0), ],
color: Colors.transparent, )
),),
), ),
margin: EdgeInsets.fromLTRB(30, 10, 30, 0), Container(
child: SizedBox(
height: 55, height: 55,
width: double.infinity, width: double.infinity,
child: ElevatedButton( decoration: BoxDecoration(
style: ElevatedButton.styleFrom( borderRadius: BorderRadius.circular(10.0),
backgroundColor: Color(0xFFD9D9D9).withOpacity(0.08), color: Colors.transparent,
shape: RoundedRectangleBorder( ),
borderRadius: BorderRadius.circular(10.0), margin: EdgeInsets.fromLTRB(30, 10, 30, 0),
),// background// foreground child: SizedBox(
), height: 55,
onPressed: () { width: double.infinity,
Navigator.push(context,MaterialPageRoute(builder: (context)=> DisplayInfoWidget())); child: ElevatedButton(
}, style: ElevatedButton.styleFrom(
child: Row( backgroundColor: Color(0xFFD9D9D9).withOpacity(0.08),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),// background// foreground
),
onPressed: () {
Navigator.push(context,MaterialPageRoute(builder: (context)=> DisplayInfoWidget()));
},
child: Row(
children: [
Icon(Icons.remove_red_eye, color: Colors.white,size: 30,),
SizedBox(width: 12,),
Text("Aperçu de mon profil",
style: TextStyle(color: Colors.white ,fontSize: 17, fontWeight: FontWeight.w400),
textAlign: TextAlign.center,
),
Spacer(),
Icon(Icons.arrow_forward_ios, color: Colors.white.withOpacity(0.3),),
],
)
),),
),
Container(
height: height*0.27,
width: double.infinity,
margin: EdgeInsets.fromLTRB(30, 15, 30, 0),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [ children: [
Icon(Icons.remove_red_eye, color: Colors.white,size: 30,), Icon(Icons.wifi_tethering, color: Colors.white, size: 35,),
SizedBox(width: 12,), SizedBox(width: 10,),
Text("Aperçu de mon profil", Text("En cours d'écoute...",
style: TextStyle(color: Colors.white ,fontSize: 17, fontWeight: FontWeight.w400), style: TextStyle(color: Colors.white ,fontSize: 17, fontWeight: FontWeight.w400),
textAlign: TextAlign.center, textAlign: TextAlign.center,
), ),
Spacer(),
Icon(Icons.arrow_forward_ios, color: Colors.white.withOpacity(0.3),),
], ],
)
),),
),
Container(
height: height*0.27,
width: double.infinity,
margin: EdgeInsets.fromLTRB(30, 15, 30, 0),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(Icons.wifi_tethering, color: Colors.white, size: 35,),
SizedBox(width: 10,),
Text("En cours d'écoute...",
style: TextStyle(color: Colors.white ,fontSize: 17, fontWeight: FontWeight.w400),
textAlign: TextAlign.center,
),
],
),
Container(
margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
height: height*0.14,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
color: Color(0xFFD9D9D9).withOpacity(0.08),
), ),
child: Container(
Row( margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
mainAxisAlignment: MainAxisAlignment.start, height: height*0.14,
crossAxisAlignment: CrossAxisAlignment.center, decoration: BoxDecoration(
children: [ borderRadius: BorderRadius.circular(15.0),
Container( color: Color(0xFFD9D9D9).withOpacity(0.08),
margin: EdgeInsets.fromLTRB(15, 0, 0, 0), ),
child: ClipRRect( child:
borderRadius: BorderRadius.circular(15), Row(
child: Image( mainAxisAlignment: MainAxisAlignment.start,
height: 90, crossAxisAlignment: CrossAxisAlignment.center,
width: 90, children: [
image: NetworkImage('https://images.genius.com/ef4849be3da5fdb22ea9e656679be3a3.600x600x1.jpg'), Container(
margin: EdgeInsets.fromLTRB(15, 0, 0, 0),
child: ClipRRect(
borderRadius: BorderRadius.circular(15),
child: FadeInImage.assetNetwork(
height: 90,
width: 90,
placeholder: "assets/images/loadingPlaceholder.gif", image: 'https://images.genius.com/ef4849be3da5fdb22ea9e656679be3a3.600x600x1.jpg'),
), ),
), ),
), Container(
Container( margin: EdgeInsets.fromLTRB(12, 20, 0, 0),
margin: EdgeInsets.fromLTRB(12, 20, 0, 0), child: Column(
child: Column( mainAxisAlignment: MainAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start, children: [
children: [ Text('BAMBINA', style: TextStyle(fontSize:18, fontWeight: FontWeight.w500, color: Colors.white),),
Text('BAMBINA', style: TextStyle(fontSize:18, fontWeight: FontWeight.w500, color: Colors.white),), Text('PNL', style: TextStyle(fontSize:16, fontWeight: FontWeight.w400, color: Colors.grey),),
Text('PNL', style: TextStyle(fontSize:16, fontWeight: FontWeight.w400, color: Colors.grey),), ],
], ),
), )
)
], ],
),
), ),
), ],
], ),
),
),
Spacer(),
Container(
height: 55,
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.transparent,
), ),
margin: EdgeInsets.fromLTRB(30, 0, 30, height*0.04), Spacer(),
child: SizedBox( Container(
height: 55, height: 55,
width: double.infinity, width: double.infinity,
child: ElevatedButton( decoration: BoxDecoration(
style: ElevatedButton.styleFrom( borderRadius: BorderRadius.circular(10.0),
backgroundColor: Color(0xFFD9D9D9).withOpacity(0.08), color: Colors.transparent,
shape: RoundedRectangleBorder( ),
borderRadius: BorderRadius.circular(10.0), margin: EdgeInsets.fromLTRB(30, 0, 30, height*0.04),
),// background// foreground child: SizedBox(
), height: 55,
onPressed: () { width: double.infinity,
Navigator.push(context,MaterialPageRoute(builder: (context)=> SettingsWidget())); child: ElevatedButton(
}, style: ElevatedButton.styleFrom(
child: Row( backgroundColor: Color(0xFFD9D9D9).withOpacity(0.08),
children: [ shape: RoundedRectangleBorder(
Icon(Icons.settings, color: Colors.white,size: 30,), borderRadius: BorderRadius.circular(10.0),
SizedBox(width: 12,), ),// background// foreground
Text("Paramètres", ),
style: TextStyle(color: Colors.white ,fontSize: 17, fontWeight: FontWeight.w400), onPressed: () {
textAlign: TextAlign.center, Navigator.push(context,MaterialPageRoute(builder: (context)=> SettingsWidget()));
), },
Spacer(), child: Row(
Icon(Icons.arrow_forward_ios, color: Colors.white.withOpacity(0.3),), children: [
], Icon(Icons.settings, color: Colors.white,size: 30,),
) SizedBox(width: 12,),
),), Text("Paramètres",
), style: TextStyle(color: Colors.white ,fontSize: 17, fontWeight: FontWeight.w400),
], textAlign: TextAlign.center,
),
Spacer(),
Icon(Icons.arrow_forward_ios, color: Colors.white.withOpacity(0.3),),
],
)
),),
),
],
),
), ),
),
); );
} }
} }

@ -30,21 +30,21 @@ class _SettingsWidgetState extends State<SettingsWidget> {
crossAxisAlignment: CrossAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center,
children: [ children: [
Container( Container(
margin: EdgeInsets.fromLTRB(30, height*0.07, 30, 0), margin: EdgeInsets.fromLTRB(30, height*0.07, 30, 0),
width: double.infinity, width: double.infinity,
height: 30, height: 30,
alignment: Alignment.centerLeft, alignment: Alignment.centerLeft,
decoration: BoxDecoration( decoration: BoxDecoration(
color: Color(0xFFD9D9D9).withOpacity(0.16), color: Color(0xFFD9D9D9).withOpacity(0.16),
borderRadius: BorderRadius.circular(7.0), borderRadius: BorderRadius.circular(7.0),
), ),
child: Padding( child: Padding(
padding: EdgeInsets.fromLTRB(20, 0, 0, 0), padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
child: Text('Pseudo', child: Text('Pseudo',
style: TextStyle( style: TextStyle(
color: Color(0xFFAEAEAE) color: Color(0xFFAEAEAE)
),), ),),
) )
), ),
Padding(padding: EdgeInsets.fromLTRB(30, 0, 30, 0), Padding(padding: EdgeInsets.fromLTRB(30, 0, 30, 0),
child: SizedBox( child: SizedBox(
@ -68,8 +68,8 @@ class _SettingsWidgetState extends State<SettingsWidget> {
), ),
Spacer(), Spacer(),
Padding(padding: EdgeInsets.fromLTRB(0, 0, 20, 0), Padding(padding: EdgeInsets.fromLTRB(0, 0, 20, 0),
child: Text('modifier', child: Text('modifier',
style: TextStyle( color: Colors.blue, fontSize: 17),),), style: TextStyle( color: Colors.blue, fontSize: 17),),),
], ],
), ),
@ -129,3 +129,4 @@ class _SettingsWidgetState extends State<SettingsWidget> {
); );
} }
} }

@ -26,33 +26,30 @@ class _SpotsWidgetState extends State<SpotsWidget> {
double height = MediaQuery.of(context).size.height; double height = MediaQuery.of(context).size.height;
double width = MediaQuery.of(context).size.width; double width = MediaQuery.of(context).size.width;
final provider = Provider.of<CardProvider>(context); final provider = Provider.of<CardProvider>(context);
return Scaffold( return Container(
resizeToAvoidBottomInset: false,
backgroundColor: Color(0xFF141414),
body: Container(
height: double.maxFinite,
child: Stack(
children: [
Transform.scale(scale: 1.1,
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(provider.urlImages.isEmpty != true
?provider.urlImages.last
:"https://i.imgur.com/Uovh293.png"),
fit: BoxFit.cover,
), color: Color(0xFF141414),
), child: Container(
child: BackdropFilter(filter: ImageFilter.blur(sigmaX: 20.0, sigmaY: 20.0), height: double.maxFinite,
child: Stack(
children: [
Transform.scale(scale: 1.1,
child: Container( child: Container(
decoration: BoxDecoration(color: Colors.black.withOpacity(0.4)), decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(provider.urlImages.isEmpty != true
?provider.urlImages.last
:"https://i.imgur.com/Uovh293.png"),
fit: BoxFit.cover,
),
),
child: BackdropFilter(filter: ImageFilter.blur(sigmaX: 20.0, sigmaY: 20.0),
child: Container(
decoration: BoxDecoration(color: Colors.black.withOpacity(0.4)),
),),
),), ),),
),), Align(
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0,height*0.03),
child: Align(
alignment: FractionalOffset.bottomCenter, alignment: FractionalOffset.bottomCenter,
child: OpenContainer( child: OpenContainer(
@ -67,68 +64,67 @@ class _SpotsWidgetState extends State<SpotsWidget> {
}, },
), ),
), ),
), Center(
Center( child: Container(
child: Container( width: 300,
width: 300, height: 300,
height: 300, child: RiveAnimation.asset('assets/images/search_spot_animation.riv'),
child: RiveAnimation.asset('assets/images/search_spot_animation.riv'), ),
), ),
), Positioned(
Positioned( top: height*0.68,
top: height*0.68, width: width,
width: width, child: Row(
child: Row( mainAxisAlignment: MainAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center, children: [
children: [ GestureDetector(
GestureDetector( onTap: () {
onTap: () { final provider = Provider.of<CardProvider>(context, listen: false);
final provider = Provider.of<CardProvider>(context, listen: false); provider.dislike();
provider.dislike();
},
}, child: Image.asset(
child: Image.asset( 'assets/images/bouton_dislike.png',
'assets/images/bouton_dislike.png', height: 70,
height: 70, width: 70,
width: 70, fit: BoxFit.cover,
fit: BoxFit.cover, ),
), ),
), SizedBox(
SizedBox( width: width*0.1,
width: width*0.1,
),
GestureDetector(
onTap: () {
final provider = Provider.of<CardProvider>(context, listen: false);
provider.discovery();
},
child: Image.asset(
'assets/images/bouton_discovery.png',
height: 70,
width: 70,
fit: BoxFit.cover,
), ),
), GestureDetector(
SizedBox( onTap: () {
width: width*0.1, final provider = Provider.of<CardProvider>(context, listen: false);
), provider.discovery();
GestureDetector( },
onTap: () { child: Image.asset(
final provider = Provider.of<CardProvider>(context, listen: false); 'assets/images/bouton_discovery.png',
provider.like(); height: 70,
}, width: 70,
child: Image.asset( fit: BoxFit.cover,
'assets/images/bouton_like.png', ),
height: 70,
width: 70,
fit: BoxFit.cover,
), ),
), SizedBox(
], width: width*0.1,
),
GestureDetector(
onTap: () {
final provider = Provider.of<CardProvider>(context, listen: false);
provider.like();
},
child: Image.asset(
'assets/images/bouton_like.png',
height: 70,
width: 70,
fit: BoxFit.cover,
),
),
],
),
), ),
), Align(
Align( child:Container(
child:Container(
width: 400, width: 400,
height: height*0.8, height: height*0.8,
margin: EdgeInsets.fromLTRB(width*0.09,height/5,width*0.09,height/3.7), margin: EdgeInsets.fromLTRB(width*0.09,height/5,width*0.09,height/3.7),
@ -136,28 +132,28 @@ class _SpotsWidgetState extends State<SpotsWidget> {
child: Container( child: Container(
child: buildCards(), child: buildCards(),
) )
) , ) ,
), ),
IgnorePointer(child: Container(height: 200, IgnorePointer(child: Container(height: 200,
decoration: BoxDecoration( decoration: BoxDecoration(
gradient: gradiant.LinearGradient( gradient: gradiant.LinearGradient(
colors: [Colors.black, Colors.transparent], colors: [Colors.black, Colors.transparent],
begin: Alignment.topCenter, begin: Alignment.topCenter,
end: Alignment.bottomCenter, end: Alignment.bottomCenter,
) )
),),), ),),),
Padding(padding: EdgeInsets.fromLTRB(20, 60, 0, 0), Padding(padding: EdgeInsets.fromLTRB(20, 60, 0, 0),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Text('COULEURS',style: TextStyle(fontFamily: 'DMSans', color: Colors.white.withOpacity(1) ,fontSize: 20, fontWeight: FontWeight.w800),), Text('COULEURS',style: TextStyle(fontFamily: 'DMSans', color: Colors.white.withOpacity(1) ,fontSize: 20, fontWeight: FontWeight.w800),),
Text('Khali',style: TextStyle(fontFamily: 'DMSans', color: Colors.white.withOpacity(1) ,fontSize: 17, fontWeight: FontWeight.w200),), Text('Khali',style: TextStyle(fontFamily: 'DMSans', color: Colors.white.withOpacity(1) ,fontSize: 17, fontWeight: FontWeight.w200),),
], ],
),), ),),
], ],
), ),
) )
); );
} }
@ -168,8 +164,8 @@ class _SpotsWidgetState extends State<SpotsWidget> {
return Stack( return Stack(
children: urlImages children: urlImages
.map((urlImage) => CardWidget( .map((urlImage) => CardWidget(
urlImage: urlImage, urlImage: urlImage,
isFront: urlImages.last == urlImage, isFront: urlImages.last == urlImage,
)) ))
.toList(), .toList(),
); );
@ -192,61 +188,61 @@ class DisplayInfoWidget extends StatelessWidget{
body: ListView( body: ListView(
children: [ children: [
Container( Container(
margin: EdgeInsets.fromLTRB(30, 10, 30, 0), margin: EdgeInsets.fromLTRB(30, 10, 30, 0),
child: Column( child: Column(
children: [ children: [
Text('Pour mon mariage',style: TextStyle(fontFamily: 'DMSans', color: Colors.white.withOpacity(1) ,fontSize: 20, fontWeight: FontWeight.w800),), Text('Pour mon mariage',style: TextStyle(fontFamily: 'DMSans', color: Colors.white.withOpacity(1) ,fontSize: 20, fontWeight: FontWeight.w800),),
Container( Container(
margin: EdgeInsets.fromLTRB(0, 10, 0, 0), margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
decoration: BoxDecoration( decoration: BoxDecoration(
color: Color(0xFF2E2C2E), color: Color(0xFF2E2C2E),
border: Border.all(width: 1, color: Colors.grey.withOpacity(0.05)), border: Border.all(width: 1, color: Colors.grey.withOpacity(0.05)),
borderRadius: BorderRadius.all(Radius.circular(20)), borderRadius: BorderRadius.all(Radius.circular(20)),
boxShadow: [ boxShadow: [
BoxShadow( BoxShadow(
color: Colors.black.withOpacity(0.2), color: Colors.black.withOpacity(0.2),
blurRadius: 5, blurRadius: 5,
spreadRadius: 1, spreadRadius: 1,
offset: Offset(2.0, 2.0), // shadow direction: bottom right offset: Offset(2.0, 2.0), // shadow direction: bottom right
) )
], ],
),
width: double.infinity,
height: 100,
child: Padding(padding: EdgeInsets.fromLTRB(10, 10, 10, 10),child: Row(
children: [
Container(
height: 75,
width: 75,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/dadju-cover-poison.png"),
fit: BoxFit.cover,
),
border: Border.all(width: 0, color: Colors.grey.withOpacity(0)),
borderRadius: BorderRadius.all(Radius.circular(15)),
),),
SizedBox(
), ),
Container( width: double.infinity,
margin: EdgeInsets.fromLTRB(20, 0, 0, 0), height: 100,
child: Column( child: Padding(padding: EdgeInsets.fromLTRB(10, 10, 10, 10),child: Row(
crossAxisAlignment: CrossAxisAlignment.start, children: [
mainAxisAlignment: MainAxisAlignment.center, Container(
children: [ height: 75,
Text('Ma vie',style: TextStyle(fontFamily: 'DMSans', color: Colors.white.withOpacity(1) ,fontSize: 20, fontWeight: FontWeight.w800),), width: 75,
Text('Dadju',style: TextStyle(fontFamily: 'DMSans', color: Colors.white.withOpacity(0.6) ,fontSize: 16, fontWeight: FontWeight.w400),), decoration: BoxDecoration(
image: DecorationImage(
], image: AssetImage("assets/images/dadju-cover-poison.png"),
),), fit: BoxFit.cover,
], ),
),), border: Border.all(width: 0, color: Colors.grey.withOpacity(0)),
), borderRadius: BorderRadius.all(Radius.circular(15)),
),),
SizedBox(
),
Container(
margin: EdgeInsets.fromLTRB(20, 0, 0, 0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Ma vie',style: TextStyle(fontFamily: 'DMSans', color: Colors.white.withOpacity(1) ,fontSize: 20, fontWeight: FontWeight.w800),),
Text('Dadju',style: TextStyle(fontFamily: 'DMSans', color: Colors.white.withOpacity(0.6) ,fontSize: 16, fontWeight: FontWeight.w400),),
], ],
) ),),
],
),),
),
],
)
), ),
Container( Container(
margin: EdgeInsets.fromLTRB(30, 10, 30, 0), margin: EdgeInsets.fromLTRB(30, 10, 30, 0),
@ -666,13 +662,16 @@ class PreviewInfoWidget extends StatelessWidget{
decoration: BoxDecoration( decoration: BoxDecoration(
color: Color(0xFF24243A).withOpacity(0.40), color: Color(0xFF24243A).withOpacity(0.40),
border: Border.all(width: 0, color: Colors.grey.withOpacity(0)), border: Border.all(width: 0, color: Colors.grey.withOpacity(0)),
borderRadius: BorderRadius.all(Radius.circular(15)), borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
), ),
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
Text('Me découvrir...',style: TextStyle(fontFamily: 'DMSans', color: Colors.white.withOpacity(1) ,fontSize: 17, fontWeight: FontWeight.w800),), Text('Me découvrir...',style: TextStyle(fontFamily: 'DMSans', color: Colors.white.withOpacity(1) ,fontSize: 17, fontWeight: FontWeight.w800),),
], ],
), ),
); );

Loading…
Cancel
Save