Disabilitare visivamente un pulsante

Fa parte della sezione Rendere l’app interattiva del percorso Flutter di Coddy. Lezione 21 di 34.

In Il tuo primo pulsante, onPressed: null ha disattivato un pulsante rendendolo grigio. Ora puoi decidere mentre l'app è in esecuzione: assegna la funzione onPressed quando il pulsante ha senso e null quando non ne ha.

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

? : sceglie tra il metodo e null. Ogni volta che setState ricostruisce la schermata, il confronto viene eseguito di nuovo, così il pulsante diventa grigio e si riattiva da solo.

Un pulsante disattivato e grigio fa capire alle persone perché non succederebbe nulla, prima che lo tocchino. Un pulsante che si può premere ma che non fa nulla in silenzio sembra semplicemente non funzionare.

Sfida

Facile

Il numero di articoli nel carrello può scendere sotto zero. Mostra il pulsante Remove in grigio quando non ci sono articoli, in modo che possa essere premuto solo quando _items è maggiore di 0.

Provalo tu

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')),
          ],
        ),
      ),
    );
  }
}