Files
afterwork/lib/presentation/widgets/fields/description_field.dart
2024-11-17 23:00:18 +00:00

80 lines
3.5 KiB
Dart

import 'package:flutter/material.dart';
/// `DescriptionField` est un champ de texte utilisé pour saisir une description.
/// Ce champ fait partie d'un formulaire et est conçu pour accepter plusieurs lignes de texte.
/// Il est doté de validations et d'une logique d'enregistrement personnalisée via `onSaved`.
///
/// Ce widget utilise des icônes et un style personnalisé pour correspondre à l'apparence de l'application.
///
/// Arguments :
/// - `onSaved`: Une fonction callback utilisée pour enregistrer la valeur du champ de texte une fois que le formulaire est soumis.
/// ```
class DescriptionField extends StatelessWidget {
// Callback utilisé pour enregistrer la valeur de la description
final FormFieldSetter<String> onSaved;
// Constructeur du widget DescriptionField
const DescriptionField({Key? key, required this.onSaved}) : super(key: key);
@override
Widget build(BuildContext context) {
// Log : Construction du champ DescriptionField
debugPrint('Construction du champ DescriptionField');
return TextFormField(
// Décoration du champ de texte
decoration: InputDecoration(
labelText: 'Description', // Texte étiquette affiché à l'utilisateur
labelStyle: const TextStyle(color: Colors.blueGrey), // Style de l'étiquette
filled: true, // Active le fond coloré
fillColor: Colors.blueGrey.withOpacity(0.1), // Couleur de fond plus douce et plus subtile
hintStyle: const TextStyle(color: Colors.blueGrey),
hintText: 'Entrez un la description ici...',
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(12.0)), // Bordure arrondie améliorée
borderSide: BorderSide.none, // Pas de bordure visible
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(12.0)),
borderSide: const BorderSide(
color: Colors.blueGrey, // Bordure de base en bleu gris
width: 2.0, // Largeur de la bordure
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(12.0)),
borderSide: const BorderSide(
color: Colors.blue, // Bordure bleue lors du focus
width: 2.0, // Épaisseur de la bordure lors du focus
),
),
prefixIcon: const Icon(Icons.description, color: Colors.blueGrey), // Icône de description avant le texte
),
// Style du texte dans le champ
style: const TextStyle(color: Colors.blueGrey, fontSize: 16.0),
// Limite le champ à 3 lignes, avec un retour à la ligne automatique
maxLines: 3,
// Autres configurations du champ
textInputAction: TextInputAction.done, // Permet de soumettre avec la touche "Done" du clavier
// Validation du champ : assure que le champ n'est pas vide
validator: (value) {
// Log : Validation du champ DescriptionField
debugPrint('Validation du champ DescriptionField');
if (value == null || value.isEmpty) {
return 'Veuillez entrer une description'; // Message d'erreur si la description est vide
}
return null; // Retourne null si la validation passe
},
// Lors de la soumission du formulaire, enregistre la valeur saisie
onSaved: (value) {
// Log : Sauvegarde de la valeur de la description
debugPrint('Valeur de la description sauvegardée : $value');
onSaved(value); // Appel de la fonction onSaved passée en paramètre
},
);
}
}