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

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

@ -51,41 +51,88 @@ 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,
child: Column( width: w * 0.5, // Moitié droite de l'écran
mainAxisSize: MainAxisSize.min, height: h * 0.5, // Moitié basse de l'écran
children: [ child: Padding(
// Champ email padding: EdgeInsets.all(w * 0.02), // 2% de padding
_ImageTextField( child: Column(
bg: 'assets/images/field_email.png', crossAxisAlignment: CrossAxisAlignment.stretch,
width: 400, children: [
height: 80, // Labels au-dessus des champs
hint: 'Email', Row(
), mainAxisAlignment: MainAxisAlignment.spaceBetween,
const SizedBox(height: 20), crossAxisAlignment: CrossAxisAlignment.start,
// Champ mot de passe children: [
_ImageTextField( Expanded(
bg: 'assets/images/field_password.png', child: Text(
width: 400, 'Email',
height: 80, style: GoogleFonts.merienda(
hint: 'Mot de passe', fontSize: 20,
obscure: true, color: Colors.black87,
), fontWeight: FontWeight.w600,
const SizedBox(height: 30), ),
// Bouton de connexion ),
_ImageButton( ),
bg: 'assets/images/btn_green.png', Expanded(
width: 400, child: Padding(
height: 80, padding: const EdgeInsets.only(left: 20),
text: 'Se connecter', child: Text(
onPressed: () { 'Mot de passe',
// TODO: Implémenter la logique de connexion 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',
width: 400,
height: 80,
hint: 'Email',
),
),
const SizedBox(width: 20),
Expanded(
child: _ImageTextField(
bg: 'assets/images/field_password.png',
width: 400,
height: 80,
hint: 'Mot de passe',
obscure: true,
),
),
],
),
const Spacer(),
// Bouton centré
Center(
child: _ImageButton(
bg: 'assets/images/btn_green.png',
width: 300,
height: 60,
text: 'Se connecter',
textColor: const Color(0xFF8AD0C8), // Vert harmonieux
onPressed: () {
// TODO: Implémenter la logique de connexion
},
),
),
const SizedBox(height: 40),
],
),
), ),
), ),
], ],
@ -144,29 +191,34 @@ 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,
obscureText: obscure, ),
style: GoogleFonts.merienda(fontSize: width * 0.045), ),
decoration: InputDecoration( child: TextField(
border: InputBorder.none, obscureText: obscure,
hintText: hint, textAlign: TextAlign.left,
hintStyle: GoogleFonts.merienda( style: GoogleFonts.merienda(
fontSize: width * 0.045, fontSize: height * 0.25, // Réduction de la taille de la police
color: Colors.black54, color: Colors.black87,
), ),
contentPadding: EdgeInsets.symmetric( decoration: InputDecoration(
horizontal: width * 0.07, // 7 % latéral border: InputBorder.none,
vertical: height * 0.22, // 22 % vertical hintText: hint,
), hintStyle: GoogleFonts.merienda(
), fontSize: height * 0.25, // Même taille pour le placeholder
color: Colors.black38,
), ),
], contentPadding: EdgeInsets.symmetric(
horizontal: width * 0.1,
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,
),
),
],
), ),
), ),
), ),