Làm mờ nút

Thuộc phần Tạo tính tương tác trong hành trình Flutter của Coddy. Bài học 21 trên 34.

Trong bài học Nút bấm đầu tiên, onPressed: null làm nút chuyển sang màu xám. Giờ đây, bạn có thể quyết định khi ứng dụng đang chạy: gán hàm cho onPressed khi nút có tác dụng, và gán null khi không có tác dụng.

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

? : chọn giữa phương thức và null. Mỗi lần setState dựng lại màn hình, phép so sánh cũng chạy lại, vì vậy nút tự chuyển sang màu xám rồi bật lại.

Nút chuyển sang màu xám cho mọi người biết vì sao sẽ không có gì xảy ra trước khi họ nhấn. Một nút vẫn nhấn được nhưng lặng lẽ không làm gì trông như bị hỏng.

Thử thách

Dễ

Số mặt hàng trong giỏ hàng có thể giảm xuống dưới 0. Làm mờ nút Remove khi không có mặt hàng nào, để chỉ có thể nhấn nút khi _items lớn hơn 0.

Tự làm thử

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