Digital Nomad and FIRE

🧩 Flutter UI의 핵심 철학 : 모든 것이 위젯이다!

Flutter를 처음 접하면 가장 먼저 듣게 되는 말이 있습니다.

“ Flutter는 모든 것이 위젯이다! ”

Flutter에서 UI를 구성하는 모든 요소는 위젯(Widget) 입니다.

그 예시를 볼까요?

심지어 Padding, Margin, 애니메이션도 전부 위젯입니다!

🧱 위젯의 종류: Stateless vs Stateful

• StatelessWidget : 값이 변하지 않는 정적인 화면 요소
• StatefulWidget : 입력에 따라 바뀌는 동적인 화면 요소

화면에 입력창이나 버튼처럼 상호작용이 필요하다면 StatefulWidget이 쓰입니다.

🎯 UI는 어떻게 구성할까?

Flutter는 XML이나 Storyboard 없이, 코드로 UI를 직접 구성합니다.

즉, 위젯들을 조합하고 중첩하여 트리 구조(Tree) 를 만드는 방식입니다.

💡 예제 코드

Scaffold(
  appBar: AppBar(title: Text('Hello')),
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('Welcome!'),
        ElevatedButton(
          onPressed: () {
            print('Clicked!');
          },
          child: Text('Click'),
        ),
      ],
    ),
  ),
);

• Scaffold는 페이지 전체 레이아웃을 담당
  • Scaffold는 Material Design의 시각적 Layout 구조를 표현함.
• AppBar, Text, Button 모두 위젯
• Center, Column은 레이아웃을 배치하는 위젯

이런 식으로 위젯 안에 또 다른 위젯이 들어가는 구조로 UI가 만들어집니다.