[Flutter] 입문 - 기본 위젯 & Stateful vs Stateless 이해

목표

• Flutter의 기본 위젯 사용법 익히기
• 레이아웃 구성 방법 배우기
• StatelessWidget 과 StatefulWidget의 차이 이해하기

---

Flutter 기본 위젯

Flutter는 '모든 것이 위젯이다.' 라는 철학을 가지고 있다. 그만큼 다양한 UI 요소들이 Widget 형태로 제공된다.

주요 위젯 소개

위젯	설명
Text	텍스트 표시
Container	박스 형태, 배경색, 패딩, 마진 등을 설정할 수 있음
Row, Column	수평 / 수직 정렬
Image	네트워크 이미지 또는 에셋 이미지 표시
Center	자식 위젯을 중앙 정렬
ElevatedButton	기본 버튼 위젯
SizedBox	여백 주기용 (공간 확보)

예시 : 간단한 레이아웃 구성

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text('Hello Flutter!'),
    SizedBox(height: 20),
    ElevatedButton(
      onPressed: () {},
      child: Text('Click Me'),
    ),
  ],
)

---

StatelessWidget vs StatefulWidget

1. StatelessWidget (비상태 위젯)

• 한번 그려지면 다시 변하지 않는 UI
• 사용 예 : 로고, 단순 텍스트 등

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('I never change!');
  }
}

---

2. StatefulWidget 상태 위젯)

• 내부 상태에 따라 다시 그려질 수 있는 위젯
• 버튼 클릭, 입력 필드 등 동적 변화에 사용

class MyCounter extends StatefulWidget {
  @override
  State<MyCounter> createState() => _MyCounterState();
}

class _MyCounterState extends State<MyCounter> {
  int count = 0;

  void increment() {
    setState(() {
      count += 1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $count'),
        ElevatedButton(onPressed: increment, child: Text('Increment')),
      ],
    );
  }
}

setState() 는 화면을 다시 그리게 만들어주는 중요한 함수이다.

---

요약

 

• Flutter는 다양한 기본 위젯을 제공하며, 이를 조합해 UI를 구성
• Stateless는 변하지 않는 UI, Stateful은 상태 변화가 필요한 UI에 사용
• build() 메서드에서 UI를 정의하며, 상태 변경 시 setState()로 갱신