상태

StatefulWidget

지금까지는 StatelessWidget을 사용해왔다.
하지만 이제 StatefulWidget을 사용하여 실시간으로 데이터의 변화를 볼 수 있다.

• StatelessWidget : 단순 UI 보여주기
• StatefulWidget : 데이터가 변경되면 UI도 변경된다.

그럼 어떻게 만들까?

stf를 입력하면 vscode가 자동으로 만들어준다.
만약 이미 less로 만들어져있는 것은 code actions로 변환할 수 있다.

본격 공부

state가 추가됨.
State안의 데이터가 변경될 때 UI도 변함

import 'package:flutter/cupertino.dart';

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

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

초기 상태를 보면 State<위젯명> createState() => _위젯명State(); 을 볼 수 있다.

그럼 이대로 이전처럼 코드 작성하면 됨?

int counter= 0
void clicked() {
	counter = counter + 1;
}

안됨

이제부터는 setState() { ... } 함수를 이용해서 적용해야함

int counter= 0
void clicked() {
	setState() { 
    	counter = counter + 1;
    }
}

setState()로 값이 바꼈다는 걸 알려줘야 flutter가 새로 build를 하게 되기 때문에 setState()없이는 UI가 변하지 않는 것

데이터의 변화를 setState()로 사용하자.(근데 변경 코드를 setState(){}에 안넣어도 동작하긴 한다. 가독성을 위해 넣자.)