Wyszarz przycisk

Część sekcji Dodajemy interaktywność ścieżki Flutter w Coddy. Lekcja 21 z 34.

W lekcji „Twój pierwszy przycisk” wartość onPressed: null wyszarzyła przycisk. Teraz możesz decydować w trakcie działania aplikacji: przypisz funkcję do onPressed, gdy przycisk ma sens, a null, gdy nie ma.

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

Operator ? : wybiera między metodą a wartością null. Za każdym razem, gdy setState ponownie buduje ekran, porównanie jest wykonywane ponownie, więc przycisk sam się wyszarza i ponownie staje się aktywny.

Wyszarzony przycisk informuje użytkowników, dlaczego nic się nie stanie, zanim go nacisną. Przycisk, który można nacisnąć, ale po cichu nic nie robi, po prostu wygląda na zepsuty.

Wyzwanie

Łatwy

W koszyku może być mniej niż zero produktów. Wyszarz przycisk Remove, gdy nie ma żadnych produktów, aby można go było nacisnąć tylko wtedy, gdy _items jest większe niż 0.

Spróbuj swoich sił

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