Griser un bouton

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

Dans votre premier bouton, onPressed: null a grisé un bouton. Maintenant, vous pouvez décider pendant l’exécution de l’application : donnez la fonction à onPressed lorsque le bouton est pertinent, et null lorsqu’il ne l’est pas.

ElevatedButton(
  onPressed: _count > 0 ? _decrease : null,
  child: const Text('Minus'),
)

? : choisit entre la méthode et null. Chaque fois que setState reconstruit l’écran, la comparaison est réévaluée ; le bouton se grise et se réactive donc de lui-même.

Un bouton grisé indique aux utilisateurs pourquoi rien ne se passerait, avant même qu’ils appuient dessus. Un bouton sur lequel on peut appuyer, mais qui ne fait rien sans explication, donne simplement l’impression d’être cassé.

Défi

Facile

Le panier peut avoir un nombre d’articles inférieur à zéro. Désactive le bouton Remove lorsqu’il n’y a aucun article, afin qu’il ne puisse être utilisé que lorsque _items est supérieur à 0.

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: const HomePage(),
    );
  }
}

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

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

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

  void _add() {
    setState(() {
      _items++;
    });
  }

  void _remove() {
    setState(() {
      _items--;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Cart')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Items: $_items', style: const TextStyle(fontSize: 24)),
            const SizedBox(height: 16),
            ElevatedButton(onPressed: _add, child: const Text('Add')),
            ElevatedButton(onPressed: _remove, child: const Text('Remove')),
          ],
        ),
      ),
    );
  }
}