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

@ -51,14 +51,14 @@ class _CardWidgetState extends State<CardWidget>{
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),
), ),
); );

@ -13,11 +13,10 @@ 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,
body: Padding(padding: EdgeInsets.fromLTRB(30, 50, 30, 0), child: Padding(padding: EdgeInsets.fromLTRB(30, 50, 30, 0),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
@ -56,12 +55,11 @@ class _DiscoveryWidgetState extends State<DiscoveryWidget> {
height: 60, height: 60,
width: 60, width: 60,
decoration: BoxDecoration( 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)), border: Border.all(width: 0, color: Colors.grey.withOpacity(0)),
borderRadius: BorderRadius.all(Radius.circular(10)), 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( Container(
margin: EdgeInsets.fromLTRB(20, 0, 0, 0), margin: EdgeInsets.fromLTRB(20, 0, 0, 0),
@ -96,12 +94,11 @@ class _DiscoveryWidgetState extends State<DiscoveryWidget> {
height: 60, height: 60,
width: 60, width: 60,
decoration: BoxDecoration( 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)), border: Border.all(width: 0, color: Colors.grey.withOpacity(0)),
borderRadius: BorderRadius.all(Radius.circular(10)), 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( Container(
margin: EdgeInsets.fromLTRB(20, 0, 0, 0), margin: EdgeInsets.fromLTRB(20, 0, 0, 0),
@ -136,12 +133,50 @@ class _DiscoveryWidgetState extends State<DiscoveryWidget> {
height: 60, height: 60,
width: 60, width: 60,
decoration: BoxDecoration( decoration: BoxDecoration(
image: DecorationImage( border: Border.all(width: 0, color: Colors.grey.withOpacity(0)),
image: NetworkImage('https://www.goutemesdisques.com/uploads/tx_gmdchron/pi1/L_Etrange_Histoire_de_Mr_Anderson.jpg'), borderRadius: BorderRadius.all(Radius.circular(10)),
fit: BoxFit.cover, ),
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,
child: Row(
children: [
Container(
height: 60,
width: 60,
decoration: BoxDecoration(
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(10)), 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( Container(
margin: EdgeInsets.fromLTRB(20, 0, 0, 0), margin: EdgeInsets.fromLTRB(20, 0, 0, 0),

@ -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,6 +16,17 @@ 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(
@ -144,11 +155,10 @@ class _ProfilWidgetState extends State<ProfilWidget> {
margin: EdgeInsets.fromLTRB(15, 0, 0, 0), margin: EdgeInsets.fromLTRB(15, 0, 0, 0),
child: ClipRRect( child: ClipRRect(
borderRadius: BorderRadius.circular(15), borderRadius: BorderRadius.circular(15),
child: Image( child: FadeInImage.assetNetwork(
height: 90, height: 90,
width: 90, width: 90,
image: NetworkImage('https://images.genius.com/ef4849be3da5fdb22ea9e656679be3a3.600x600x1.jpg'), placeholder: "assets/images/loadingPlaceholder.gif", image: 'https://images.genius.com/ef4849be3da5fdb22ea9e656679be3a3.600x600x1.jpg'),
),
), ),
), ),
Container( Container(
@ -209,5 +219,6 @@ class _ProfilWidgetState extends State<ProfilWidget> {
), ),
), ),
); );
} }
} }

@ -129,3 +129,4 @@ class _SettingsWidgetState extends State<SettingsWidget> {
); );
} }
} }

@ -26,11 +26,10 @@ 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, color: Color(0xFF141414),
backgroundColor: Color(0xFF141414), child: Container(
body: Container(
height: double.maxFinite, height: double.maxFinite,
child: Stack( child: Stack(
children: [ children: [
@ -50,9 +49,7 @@ class _SpotsWidgetState extends State<SpotsWidget> {
decoration: BoxDecoration(color: Colors.black.withOpacity(0.4)), decoration: BoxDecoration(color: Colors.black.withOpacity(0.4)),
),), ),),
),), ),),
Padding( Align(
padding: EdgeInsets.fromLTRB(0, 0, 0,height*0.03),
child: Align(
alignment: FractionalOffset.bottomCenter, alignment: FractionalOffset.bottomCenter,
child: OpenContainer( child: OpenContainer(
@ -67,7 +64,6 @@ class _SpotsWidgetState extends State<SpotsWidget> {
}, },
), ),
), ),
),
Center( Center(
child: Container( child: Container(
width: 300, width: 300,
@ -666,7 +662,10 @@ 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,

Loading…
Cancel
Save