플러터 공부 Day7: StatefulWidget

[분류 전체보기] - 플러터 공부 Day6: UI

플러터 공부 Day6: UI

반응형

StatelessWidget vs StatefulWidget

- StatelessWidget은 build method를 override해 ui를 화면에 보여준다. 데이터를 저장하지 않는다.

- StatefulWidget은 Widget안에 state들이 있어서 데이터를 저장하고 state에 따라 ui를 바꿀 수 있다.

StatefulWidget 만들기

- 간단하게 stf를 써서 만들 수도 있고 기존에 있던 statelesswidget을 command+. 로 statefulwidget으로 바꿀 수도 있다.

- StatefulWidget은 두 파트가 있는데, 하나는 statelesswidget이 있고, 다른 하나는 state와 ui를 화면에 보여주는 부분이 있다.

- Stateful에서는 properties가 바뀔때 마다 보여지는 ui가 다르기 때문에 properties를 만들때 final, const 가 아닌 type을 넣어줘야한다.

SetState

- setstate함수는 State에게 새로운 데이터가 들어왔다고 알려준다. 그러므로 원래 가지고 있던 properties를 변경할 함수안에 setState((){});를 넣어주고 setState함수안에서 데이터를 변경해 주면 된다.

- build함수를 다시 실행시켜준다. -> ui를 refresh 한다

BuildContext

- 부모 Widget의 properties를 가져올 수 있게 도와준다.

- 예를 들어 MaterialApp Widget안에

theme: ThemeData(

textTheme: const TextTheme(

titleLarge: TextStyle(

color: Colors.red,

fontSize: 40,

),

),

),

를 넣고 child widget에서 사용하고 싶으면

fontSize: Theme.of(context).textTheme.titleLarge?.fontSize,

color: Theme.of(context).textTheme.titleLarge?.color,

와 같이 context를 사용해 가져올 수 있다. ?또는! 를 넣어 null이 아닐 수도 있다고 알려주거나 null이 아니라고 확신을 줘야한다.

*이 Theme.of(context)를 사용할때 작동이 안되면 Scaffold를 Builder Widget으로 한번 감싸라.

*ThemeData에 backgroundColor가 버전 업데이트때문에 없어져서 colorScheme: ColorScheme.fromSwatch(backgroundColor:Colors.red), 같이 ColorScheme을 사용해야한다.

WidgetLifeCycle

- StatefulWidget은 생명주기를 가지고 있다. 중요한 InitState, build, dispose method 등이 있다.

InitState

- InitState method는 StatefulWidget이 시작할때 딱 1번만 작동한다. 

- initializes state, 처음 변수를 선언한 것과 비슷하다.

- build method전에 실행된다

Dispose

- 위젯이 화면에서 사라질때 실행되는 method이다.