Incrémentation et décrémentation dans Flutter


Avatar de Pierre Courtois

Incrémenter ou décrémenter est une action simple dans Flutter vous permettant d’augmenter ou réduire une valeur numérique. Dans ce guide, je vous apprends rapidement à utiliser ces deux méthodes.


Mosaique de couleurs

Qu’est-ce qu’une incrémentation ou décrémentation dans Flutter ?

Dans Flutter, incrémenter une valeur numérique signifie l’augmenter de manière répétée, souvent en lui ajoutant 1. Au contraire, décrémenter signifie diminuer cette même valeur, généralement en lui soustrayant 1.

Incrémenter ou décrémenter un nombre dans une application peut être utile pour : 

  • Gérer un panier d’achat et permettre à l’utilisateur d’ajouter ou retirer des items ; 
  • Suivre le score dans un jeu ; 
  • Compter le nombre de fois où une action se répète ; 
  • Passer d’une étape à une autre dans un tutoriel et pouvoir revenir en arrière, etc.

Incrémenter et Décrémenter dans Flutter

La première manière d’incrémenter ou de décrémenter dans Flutter est d’utiliser les signes ++ et –. L’opérateur ++ est utilisé pour ajouter 1 à une variable, tandis que — permet au contraire de lui retirer 1. 

Pour incrémenter ou décrémenter une variable d’une valeur autre que 1, vous pouvez utiliser les opérateurs d’addition et de soustraction avec la valeur désirée. Par exemple, pour incrémenter ou décrémenter une variable de 2, vous pouvez utiliser les opérateurs += et -=.

variable += 2 //permet d’ajouter 2 à ma variable ;
variable -= 2 //permet de soustraire 2 de la variable.

Voici un exemple de comment incrémenter et décrémenter une variable dans Flutter : 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterScreen(),
    );
  }
}

class CounterScreen extends StatefulWidget {
  @override
  _CounterScreenState createState() => _CounterScreenState();
}

class _CounterScreenState extends State<CounterScreen> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;  // Incrémentation de 1
    });
  }

  void _decrementCounter() {
    setState(() {
      _counter--;  // Décrémentation de 1
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Incrémenter / Décrémenter'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Valeur actuelle : $_counter',
              style: TextStyle(fontSize: 24),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                ElevatedButton(
                  onPressed: _decrementCounter,
                  child: Text('-'),
                ),
                SizedBox(width: 20),
                ElevatedButton(
                  onPressed: _incrementCounter,
                  child: Text('+'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Afficher ma valeur numérique en temps réel

Pour afficher une valeur en temps réel dans une application Flutter, placez votre incrémentation dans une méthode SetState(). Celle-ci va permettre de mettre à jour l’interface utilisateur lorsque les données changent et afficher la valeur correcte. Attention toutefois, la méthode SetState ne peut être utilisée que dans un StatefulWidget.

Plus de guides Flutter

À la recherche de plus de guides pour coder rapidement une application Flutter dynamique ? Pourquoi ne pas consulter la liste complète ?

Avatar de Pierre Courtois