Desativar visualmente um botão

Parte da seção Tornando o app interativo do Journey de Flutter da Coddy. Lição 21 de 34.

Em Seu Primeiro Botão, onPressed: null deixou um botão acinzentado. Agora você pode decidir enquanto o app está em execução: atribua a função a onPressed quando o botão fizer sentido e null quando não fizer.

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

O ? : escolhe entre o método e null. Cada vez que setState constrói a tela novamente, a comparação é executada outra vez, então o botão fica acinzentado e volta a ficar ativo automaticamente.

Um botão acinzentado informa às pessoas por que nada aconteceria antes de elas tocarem nele. Um botão que pode ser pressionado, mas não faz nada discretamente, simplesmente parece estar com defeito.

Desafio

Fácil

O carrinho pode ficar com menos de zero itens. Desative visualmente o botão Remove quando não houver itens, para que ele só possa ser pressionado enquanto _items for maior que 0.

Experimente você mesmo

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