[Flutter3.61][Dart3.2] 튜토리얼 입문 프로젝트 Counter Button 개발 실습

 

1. 단순 카운터 구현 예제 1

 

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  State<MyApp> createState() => _AppStateState();
}

class _AppStateState extends State<MyApp> {
  int counter = 0;

  void onClicked() {
    setState(() {
      counter += 1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.black,
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            const Text(
              "Count",
              style: TextStyle(color: Colors.white),
            ),
            Text(
              "$counter",
              style: const TextStyle(color: Colors.blue),
            ),
            IconButton(
              onPressed: onClicked,
              icon: const Icon(Icons.add),
              color: Colors.red,
            )
          ],
        ),
      ),
    );
  }
}

 

 - 단, setState() 안에 counter += 1 을 넣지않고, counter += 1 아래에 setState()를 두더라도 정상적으로 state 변경을 Flutter에서 인지 후 UI를 다시 그려준다.

 

// setState 안에 구현

// ...

class _AppStateState extends State<MyApp> {
  int counter = 0;

  void onClicked() {
    setState(() {
      counter += 1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
    
// ...



// setState 에 구현

// ...

class _AppStateState extends State<MyApp> {
  int counter = 0;

  void onClicked() {
    counter += 1;
    setState((){});
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
    
// ...

 

 

 

 

 

2. 예제1 결과 예시 스샷