Back

Flutter Button onPressed

Flutter Button on Pressed

  1. 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.
  2. Étapes pour implémenter la propriété onPressed

    • Étape 1 : Créer un widget avec état (stateFull)
      • Flutter Button on Pressed

        Étapes pour créer un ‘Stateful Widget’

      • Pour créer un Widget Stateful consltez la page suivante: Comment créer un ‘Stateful Widget’
      • Étape 1 : Importer le package requis
        • import 'package:flutter/material.dart';
      • Étape 2 : Créer une classe étendue Flutter StatefulWidget
        • class OnPressedTextButton extends StatefulWidget {
            const OnPressedTextButton({super.key});
            @override
            State createState() => _OnPressedTextButtonState();
          }
      • Étape 3 : Créer un état pour la classe
        • class _OnPressedTextButtonState extends State {
            Color color = Colors.red;
            @override
            Widget build(BuildContext context) {
              return Scaffold(
                ...
              );
            }
          }
      • 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 attribut onPressed 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
      • Flutter Button onPressed

    • Étape 3 : Exécutez l’application
      • Maintenant, la dernière étape consiste à exécuter l’application.
      • Flutter Button onPressed

  3. 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é
    • Flutter Button onPressed1

    Solution





Riadh HAJJI

Abonnez vous à notre chaîne YouTube gratuitement