Un compteur qui monte et qui descend

Fait partie de la section Rendre l’application interactive du Journey Flutter de Coddy. Leçon 13 sur 34.

Une fonction peut aussi se trouver dans la classe State. Elle peut alors lire les variables de State et appeler setState :

void _increase() {
  setState(() {
    _count++;
  });
}

_count++ est une forme abrégée de _count = _count + 1, et _count-- en retire un. Une fonction qui appartient à une classe s’appelle une méthode, et une méthode privée commence par _, comme les variables.

Passe-la à un bouton en indiquant son nom, sans parenthèses, comme dans Vos propres fonctions : IconButton(icon: Icon(Icons.add), onPressed: _increase).

Défi

Facile

Le compteur ne fait qu’augmenter. Ajoute une méthode _decrease qui enlève une unité à l’intérieur de setState, ainsi qu’un IconButton avec Icons.remove avant le nombre, qui appelle cette méthode.

Essayez vous-même

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _count = 0;

  void _increase() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: Center(
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('$_count', style: TextStyle(fontSize: 48)),
            IconButton(icon: Icon(Icons.add), onPressed: _increase),
          ],
        ),
      ),
    );
  }
}