Flutter Button onPressed
Flutter Button on Pressed
-
Présentation
- Comme son nom l’indique, le bouton d’icône Flutter
onPressed
est utilisé pour rendre le bouton d’icône Flutter cliquable. Onpressed
est utilisé pour définir une action qui sera déclenchée lorsque l’utilisateur cliquera sur ce bouton d’icône Flutter particulier.- Pour exécuter une fonction lorsque le bouton est enfoncé, utilisez la propriété onPressed() du bouton.
-
Étapes pour implémenter la propriété
onPressed
-
Étape 1 : Créer un widget avec état (stateFull)
- Pour créer un Widget
Stateful
consltez la page suivante: Comment créer un ‘Stateful Widget’ - Étape 1 : Importer le package requis
- Étape 2 : Créer une classe étendue Flutter
StatefulWidget
- Étape 3 : Créer un état pour la classe
- Ici, vous pouvez voir que j’ai défini un
IconButton()
et à l’intérieur, il y a une icône, une couleur et une taille ainsi qu’un attributonPressed
défini où vous pouvez ajouter votre propre logique pour la manipulation des boutons d’icônes. -
Étape 2 : Créer une classe de widget principal
- La deuxième étape consiste à créer une classe de widget Main qui utilisera la classe
MaterialApp()
, avec la classe OnPressedTextButton(). - Ajoutez les lignes de code suivantes dans le fichier
-
Étape 3 : Exécutez l’application
- Maintenant, la dernière étape consiste à exécuter l’application.
-
Application
- Créer un nouveau projet Flutter qui permet de changer une icône lorsque l’utilisateur appuie dessus
- L’image ci-dessous illustre le travail souhaité
Étapes pour créer un ‘Stateful Widget’
import 'package:flutter/material.dart';
class OnPressedTextButton extends StatefulWidget {
const OnPressedTextButton({super.key});
@override
State createState() => _OnPressedTextButtonState();
}
class _OnPressedTextButtonState extends State {
Color color = Colors.red;
@override
Widget build(BuildContext context) {
return Scaffold(
...
);
}
}
Solution