Avez-vous une question? (216) 97 656 803 hajjriadh@gmail.com
Flutter

Flutter Button onPressed

Un cours complet pour maîtriser Flutter Button onPressed.

0 chapitres 0 QCM Accès gratuit

  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