버튼 비활성화하기

Coddy Flutter 여정의 앱에 상호작용 추가하기 섹션에 포함된 레슨. 34개 중 21번째.

「첫 번째 버튼」에서는 onPressed: null을 사용해 버튼을 회색으로 비활성화했습니다. 이제 앱이 실행되는 동안 직접 결정할 수 있습니다. 버튼을 눌러도 되는 상황에서는 onPressed에 함수를 전달하고, 그렇지 않을 때는 null을 전달하세요.

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

? :는 메서드와 null 중 하나를 선택합니다. setState가 화면을 다시 그릴 때마다 비교도 다시 실행되므로, 버튼은 자동으로 회색이 되었다가 다시 활성화됩니다.

회색으로 비활성화된 버튼은 탭하기 전에 아무 일도 일어나지 않는 이유를 알려 줍니다. 눌러도 되지만 아무 반응 없이 조용히 작동하지 않는 버튼은 고장 난 것처럼 보일 뿐입니다.

챌린지

쉬움

장바구니의 항목 수가 0보다 작아질 수 있습니다. 항목이 없을 때 Remove 버튼을 회색으로 표시하여 _items가 0보다 클 때만 누를 수 있게 하세요.

직접 해보기

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