|
Composants réutilisables sont les aspects essentiels du langage de programmation Dart sur lequel est basé Flutter. Dart et Flutter sont tous deux fortement influencés par les principes de programmation orientée objet.
Avec les composants réutilisables, nous pouvons simplement définir un widget et y intégrer un autre widget, comme une relation parent-enfant. Ce faisant, nous pouvons facilement partager les propriétés communes entre un groupe de widgets et maintenir la lisibilité de la base de code de l'interface utilisateur.
Prenons un exemple simple pour mieux comprendre ce concept. Supposons que vous souhaitiez créer un composant de bouton personnalisé pouvant être réutilisé dans n'importe quelle partie de votre application Flutter.
Pour cela, nous définissons une nouvelle classe qui étend la classe `StatefulWidget`. Vous trouverez ci-dessous l'extrait de code du widget `CustomButton`.
```fléchette
importer 'package:flutter/material.dart';
la classe CustomButton étend StatefulWidget {
Texte de chaîne final ;
couleur finale ;
final VoidCallback onPressed ;
const BoutonPersonnalisé(
{requis this.text, requis this.color, requis this.onPressed});
@outrepasser
State createState() => _CustomButtonState();
}
la classe _CustomButtonState étend State {
@outrepasser
Construction du widget (contexte BuildContext) {
retourner le bouton élevé (
onPressed :widget.onPressed,
style : ElevatedButton.styleFrom(
primaire :widget.color,
),
enfant :Texte(widget.text),
);
}
}
```
Voyons maintenant comment utiliser ce `CustomButton`. Supposons que nous ayons une classe « MyApp » qui étend la classe « StatelessWidget ». Nous devons simplement créer une instance du widget `CustomButton` et transmettre les paramètres requis.
```fléchette
importer 'package:flutter/material.dart';
importer 'package:flutter_training_app/CustomButton.dart';
la classe MyApp étend StatelessWidget {
const MonApp({Clé? clé}) :super(clé:clé);
@outrepasser
Construction du widget (contexte BuildContext) {
renvoyer MaterialApp (
maison : échafaudage (
barre d'application :barre d'application (
titre :Texte('Mon App'),
),
corps :Centre (
enfant :CustomButton (
texte :'Cliquez sur moi',
couleur:couleurs.bleu,
surAppuyé :() {
// Faites quelque chose ici.
},
),
),
),
);
}
}
```
C'est ça! Nous avons créé et utilisé avec succès un composant réutilisable en utilisant la composition du Widget. Grâce à cette technique, nous pouvons améliorer la réutilisabilité et la maintenabilité du code de notre interface utilisateur Flutter.
|
