: Flutter는 모든 것이 ‘Widget’으로 이루어져 있음. Java에서 모든 객체가 Object라는 클래스를 상속 받듯 UI와 관련된 모든것은 Widget
StatelessWidget
: 변하지 않는 정적인 화면을 구성할때 사용합니다. 단순 텍스트나 앱에 대한 정보 화면 등이 이 경우에 해당
class StatelessExample extends StatelessWidget {
const StatelessExample({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
color: Colors.blue,
child: const Text('StatelessWidget Example'),
);
}
}
StatefulWidget
: 화면에 변화가 있는 동적인 화면을 구성할때 사용합니다. 체크박스나 라디오박스, 사용자가 텍스트를 입력하는 필드, 게임의 점수 등 실시간으로 업데이트되는 UI가 포함된 화면의 경우 StatefulWidget을 사용
import 'package:flutter/material.dart';
class StatefulExample extends StatefulWidget {
const StatefulExample({Key? key}) : super(key: key);
@override
State<StatefulExample> createState() => _StatefulExampleState();
}
class _StatefulExampleState extends State<StatefulExample> { // setState() 의 영향을 받는 영역
int _counter = 0;
@override
Widget build(BuildContext context) { // UI가 렌더링 되는 영역
return Scaffold(
appBar: AppBar(
title: const Text('StatefulWidget Example'),
),
body: Center(
child: ElevatedButton(
child: Text(
'현재 숫자: $_counter',
),
onPressed: () {
setState(() { // 누르는 순간 재렌더링
_counter++;
});
},
),
),
);
}
}
: 실시간으로 변하는 여러 데이터들을의 상태를 효율적으로 관리하기 위함
→ 특정 데이터가 바뀔 때 마다 화면 전체를 재렌더링 하는것은 어플리케이션에서의 자원의 낭비가 너무 큼
→ 특정 데이터가 바뀔 때 다른 화면에서도 해당 데이터의 변화가 동일하게 이루어져야하는 경우가 있음