Atenuar un botón

Parte de la sección Cómo hacerla interactiva del Journey de Flutter de Coddy. Lección 21 de 34.

En Tu primer botón, onPressed: null dejó un botón deshabilitado. Ahora puedes decidir mientras se ejecuta la aplicación: asigna a onPressed la función cuando el botón tenga sentido y null cuando no lo tenga.

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

El operador ? : elige entre el método y null. Cada vez que setState vuelve a construir la pantalla, la comparación se ejecuta de nuevo, así que el botón se deshabilita y vuelve a habilitarse por sí solo.

Un botón deshabilitado les indica a las personas por qué no pasaría nada antes de que lo toquen. Un botón que se puede pulsar, pero que no hace nada en silencio, simplemente parece estar roto.

Desafío

Fácil

El carrito puede tener menos de cero artículos. Desactiva el botón Remove cuando no haya artículos, para que solo se pueda pulsar mientras _items sea mayor que 0.

Pruébalo tú mismo

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