jmartin/petitspas
1
0
Fork 0
Code Issues 52 Pull Requests Actions Packages Projects Releases Wiki Activity

style(login): � Ajustement de la mise en page du formulaire de connexion - Alignement des labels et des champs - Ajustement de la taille de police

Browse Source
This commit is contained in:
Julien Martin 2025-05-01 16:34:23 +02:00
parent aaf7070757
commit 30e72242a8
1 changed files with 124 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
frontend/lib/screens/auth/login_screen.dart
View File

@ -51,43 +51,90 @@ class LoginPage extends StatelessWidget {
fit: BoxFit.contain, fit: BoxFit.contain,
), ),
), ),
// Formulaire // Formulaire dans le cadran en bas à droite
Positioned( Positioned(
left: leftMargin + imageWidth + (remainingWidth - leftMargin) / 2 - 200, right: 0,
top: h * 0.3, bottom: 0,
width: w * 0.5, // Moitié droite de l'écran
height: h * 0.5, // Moitié basse de l'écran
child: Padding(
padding: EdgeInsets.all(w * 0.02), // 2% de padding
child: Column( child: Column(
mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.stretch,
children: [ children: [
// Champ email // Labels au-dessus des champs
_ImageTextField( Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Text(
'Email',
style: GoogleFonts.merienda(
fontSize: 20,
color: Colors.black87,
fontWeight: FontWeight.w600,
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 20),
child: Text(
'Mot de passe',
style: GoogleFonts.merienda(
fontSize: 20,
color: Colors.black87,
fontWeight: FontWeight.w600,
),
),
),
),
],
),
const SizedBox(height: 10),
// Champs côte à côte
Row(
children: [
Expanded(
child: _ImageTextField(
bg: 'assets/images/field_email.png', bg: 'assets/images/field_email.png',
width: 400, width: 400,
height: 80, height: 80,
hint: 'Email', hint: 'Email',
), ),
const SizedBox(height: 20), ),
// Champ mot de passe const SizedBox(width: 20),
_ImageTextField( Expanded(
child: _ImageTextField(
bg: 'assets/images/field_password.png', bg: 'assets/images/field_password.png',
width: 400, width: 400,
height: 80, height: 80,
hint: 'Mot de passe', hint: 'Mot de passe',
obscure: true, obscure: true,
), ),
const SizedBox(height: 30), ),
// Bouton de connexion ],
_ImageButton( ),
const Spacer(),
// Bouton centré
Center(
child: _ImageButton(
bg: 'assets/images/btn_green.png', bg: 'assets/images/btn_green.png',
width: 400, width: 300,
height: 80, height: 60,
text: 'Se connecter', text: 'Se connecter',
textColor: const Color(0xFF8AD0C8), // Vert harmonieux
onPressed: () { onPressed: () {
// TODO: Implémenter la logique de connexion // TODO: Implémenter la logique de connexion
}, },
), ),
),
const SizedBox(height: 40),
], ],
), ),
), ),
),
], ],
); );
}, },
@ -144,30 +191,35 @@ class _ImageTextField extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return SizedBox( return Container(
width: width, width: width,
height: height, height: height,
child: Stack( decoration: BoxDecoration(
children: [ image: DecorationImage(
Positioned.fill(child: Image.asset(bg, fit: BoxFit.fill)), image: AssetImage(bg),
TextField( fit: BoxFit.fill,
),
),
child: TextField(
obscureText: obscure, obscureText: obscure,
style: GoogleFonts.merienda(fontSize: width * 0.045), textAlign: TextAlign.left,
style: GoogleFonts.merienda(
fontSize: height * 0.25, // Réduction de la taille de la police
color: Colors.black87,
),
decoration: InputDecoration( decoration: InputDecoration(
border: InputBorder.none, border: InputBorder.none,
hintText: hint, hintText: hint,
hintStyle: GoogleFonts.merienda( hintStyle: GoogleFonts.merienda(
fontSize: width * 0.045, fontSize: height * 0.25, // Même taille pour le placeholder
color: Colors.black54, color: Colors.black38,
), ),
contentPadding: EdgeInsets.symmetric( contentPadding: EdgeInsets.symmetric(
horizontal: width * 0.07, // 7 % latéral horizontal: width * 0.1,
vertical: height * 0.22, // 22 % vertical vertical: height * 0.3,
), ),
), ),
), ),
],
),
); );
} }
} }
@ -180,37 +232,37 @@ class _ImageButton extends StatelessWidget {
final double width; final double width;
final double height; final double height;
final String text; final String text;
final Color textColor;
final VoidCallback onPressed; final VoidCallback onPressed;
const _ImageButton({ const _ImageButton({
required this.bg, required this.bg,
required this.width, required this.width,
required this.height, required this.height,
required this.text, required this.text,
required this.textColor,
required this.onPressed, required this.onPressed,
}); });
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return SizedBox( return Container(
width: width, width: width,
height: height, height: height,
child: Material( decoration: BoxDecoration(
color: Colors.transparent, image: DecorationImage(
child: InkWell( image: AssetImage(bg),
onTap: onPressed, fit: BoxFit.fill,
child: Stack( ),
children: [ ),
Positioned.fill(child: Image.asset(bg, fit: BoxFit.fill)), child: TextButton(
Center( onPressed: onPressed,
child: Text( child: Text(
text, text,
style: GoogleFonts.merienda( style: GoogleFonts.merienda(
fontSize: width * 0.045, fontSize: height * 0.3,
color: Colors.white, color: textColor,
), fontWeight: FontWeight.w600,
),
),
],
), ),
), ),
), ),