카운터 값 증가 및 감소

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

함수는 State 클래스 안에도 있을 수 있습니다. 여기서 State의 변수를 읽고 setState를 호출할 수 있습니다:

void _increase() {
  setState(() {
    _count++;
  });
}

_count++는 _count = _count + 1의 줄임 표현이고, _count--는 1을 뺍니다. 클래스에 속한 함수는 메서드라고 하며, 비공개 메서드는 변수처럼 _로 시작합니다.

Your Own Functions에서처럼 괄호 없이 이름으로 버튼에 전달합니다: IconButton(icon: Icon(Icons.add), onPressed: _increase).

챌린지

쉬움

카운터는 증가만 합니다. setState 안에서 값을 1 감소시키는 _decrease 메서드와, 숫자 앞에 배치되어 이 메서드를 호출하는 Icons.remove가 있는 IconButton을 추가하세요.

직접 해보기

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: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _count = 0;

  void _increase() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: Center(
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('$_count', style: TextStyle(fontSize: 48)),
            IconButton(icon: Icon(Icons.add), onPressed: _increase),
          ],
        ),
      ),
    );
  }
}