플러터 기초 - StatefulWidget

이전 포스팅에서는 StatelessWidget에 대해 알아봤습니다.

 

StatelessWidget은 딱 처음 보여준 UI에서 변화가 없는 UI 위젯을 의미합니다.

플러터 기초 - UI 구성

 

하지만, 대부분의 UI는 사용자 반응에 따라 다른 데이터를 보여주는 등

 

상호작용이 필요하기 때문에

 

대부분의 경우에는 StatefulWidget을 사용해서 앱을 만듭니다.

---

Statefulwidget의 구성 분석하기

VS 코드에서 st를 입력하면 Flutter StatefulWidget 자동완성을 사용할 수 있다.

 

해당 자동 완성 기능을 사용하면 

 

다음과 같은 코드가 자동으로 완성된다.

 

void main() {
  
}

// 자동으로 완성되는 부분
class App extends StatefulWidget {
  const App({super.key});

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

 

super.key

 

App 클래스에 super.key 라는 것을 constructor로 보내주고 있는데

 

이는 각각의 위젯이 id를 갖고 있고

 

해당 id를 보내주는 것이다. (이렇게 하면 flutter가 해당 위젯을 좀 더 빠르게 찾을 수 있다)

 

 

State를 상속받은 _AppState 클래스

State를 갖고 있는 UI가 있는 클래스이다.

 

해당 클래스 내에 UI에 대한 내용을 정의한다.

 

 

StatefulWidget을 상속받은 App 클래스

State를 갱신할 필요가 있는 변수나 함수를 정의하는 클래스이다.

 

해당 클래스 안에 있는 값들이 변경되면

 

_AppState 클래스에 있는 UI가 갱신된다.

---

테스트용 UI 만들기

다음과 같은 UI를 만들어본다.

 

+ 이미지 버튼을 클릭하면 Counter 가 올라는 앱이다.

 

전체 코드는 다음과 같다.

 

import 'package:flutter/material.dart';

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

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

  @override
  State<App> createState() => _AppState();
}

// State가 바뀔 때 UI를 새로고침해준다.
class _AppState extends State<App> {
  int counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text(
                "Click Counter",
                style: TextStyle(
                  fontSize: 28,
                ),
              ),
              Text(
                "$counter",
                style: const TextStyle(
                  fontSize: 28,
                ),
              ),
              IconButton(
                onPressed: onClicked,
                icon: const Icon(Icons.add_box_rounded),
                iconSize: 40,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

---

setState

위 와 같이 코드를 작성 한 후 IconButton을 클릭해도 동작하지 않는다.

 

그 이유는 해당 클릭에 대해 UI 다시 그리는 행위를 지정하지 않았기 때문이다.

 

IconButton을 클릭하면 counter에 +1을 하지만,

 

그것을 UI에 새롭게 그리지 않는다.

 

setState 함수를 통해 UI를 새롭게 그릴 수 있다.

 

_AppState 클래스 안에 setState 함수를 정의한다.

 

class _AppState extends State<App> {
      int counter = 0;

      void onClicked() {
        // setState()가 호출되면 UI를 업데이트 한다.
        // 즉, build 함수를 한 번 더 호출하는 것이다.
        setState(() {
          ++counter;
        });
      }

~~~~
}

 

setState() 함수는 UI를 새롭게 그리게 하는 함수이다.

 

즉, build() 함수를 한 번 더 호출하는 기능을 갖고 있다.

---

 

플러터 기초 - BuildContext