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,
),
),
// Formulaire
// Formulaire dans le cadran en bas à droite
Positioned(
left: leftMargin + imageWidth + (remainingWidth - leftMargin) / 2 - 200,
top: h * 0.3,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// Champ email
_ImageTextField(
bg: 'assets/images/field_email.png',
width: 400,
height: 80,
hint: 'Email',
),
const SizedBox(height: 20),
// Champ mot de passe
_ImageTextField(
bg: 'assets/images/field_password.png',
width: 400,
height: 80,
hint: 'Mot de passe',
obscure: true,
),
const SizedBox(height: 30),
// Bouton de connexion
_ImageButton(
bg: 'assets/images/btn_green.png',
width: 400,
height: 80,
text: 'Se connecter',
onPressed: () {
// TODO: Implémenter la logique de connexion
},
),
],
right: 0,
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(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// Labels au-dessus des champs
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',
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
Widget build(BuildContext context) {
return SizedBox(
return Container(
width: width,
height: height,
child: Stack(
children: [
Positioned.fill(child: Image.asset(bg, fit: BoxFit.fill)),
TextField(
obscureText: obscure,
style: GoogleFonts.merienda(fontSize: width * 0.045),
decoration: InputDecoration(
border: InputBorder.none,
hintText: hint,
hintStyle: GoogleFonts.merienda(
fontSize: width * 0.045,
color: Colors.black54,
),
contentPadding: EdgeInsets.symmetric(
horizontal: width * 0.07, // 7 % latéral
vertical: height * 0.22, // 22 % vertical
),
),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(bg),
fit: BoxFit.fill,
),
),
child: TextField(
obscureText: obscure,
textAlign: TextAlign.left,
style: GoogleFonts.merienda(
fontSize: height * 0.25, // Réduction de la taille de la police
color: Colors.black87,
),
decoration: InputDecoration(
border: InputBorder.none,
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 height;
final String text;
final Color textColor;
final VoidCallback onPressed;
const _ImageButton({
required this.bg,
required this.width,
required this.height,
required this.text,
required this.textColor,
required this.onPressed,
});
@override
Widget build(BuildContext context) {
return SizedBox(
return Container(
width: width,
height: height,
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: onPressed,
child: Stack(
children: [
Positioned.fill(child: Image.asset(bg, fit: BoxFit.fill)),
Center(
child: Text(
text,
style: GoogleFonts.merienda(
fontSize: width * 0.045,
color: Colors.white,
),
),
),
],
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(bg),
fit: BoxFit.fill,
),
),
child: TextButton(
onPressed: onPressed,
child: Text(
text,
style: GoogleFonts.merienda(
fontSize: height * 0.3,
color: textColor,
fontWeight: FontWeight.w600,
),
),
),