[Flutter 트랙] 앱개발 종합반 2-1 - Flutter 기본기

📌 Flutter 기본기 익히기 (2주차)

이번 주차에서는 Flutter의 핵심 개념인 위젯(Widget)과 상태(State) 관리를 익히는 것이 목표입니다.

특히, StatelessWidget과 StatefulWidget을 학습하고, 자주 사용되는 뷰(View) 위젯, 레이아웃(Layout) 위젯, 기능성(Functional) 위젯을 살펴보겠습니다.

---

1. Flutter에서 위젯(Widget)이란?

Flutter에서 UI의 모든 요소는 위젯(Widget)으로 구성됩니다. 버튼, 이미지, 텍스트, 레이아웃 등 화면에 보이는 모든 것은 위젯입니다.

위젯은 크게 StatelessWidget과 StatefulWidget으로 나뉩니다.

• StatelessWidget - 상태 변화가 없는 정적인 UI 구성
• StatefulWidget - 상태(State)에 따라 동적으로 변화하는 UI 구성

---

2. Flutter에서 위젯을 사용하는 3가지 방법

📌 1) 기본 내장 위젯 활용

Flutter는 내장 위젯을 제공하며, 공식 문서에서 확인할 수 있습니다.

• 📌 공식 문서: Flutter Widget Catalog
• 📌 iOS 스타일: Cupertino 디자인 위젯
• 📌 안드로이드 스타일: Material 디자인 위젯

이 문서를 활용하면 각 위젯의 특성, 사용법, 예제 코드를 확인할 수 있습니다.

📌 2) 패키지 공유 사이트 활용 (pub.dev)

개발자들이 만든 다양한 패키지를 pub.dev에서 검색하고 활용할 수 있습니다.

• 📌 패키지 검색: https://pub.dev/
• 📌 인기 패키지 예시: GetX (상태 관리 라이브러리)

// pubspec.yaml에 추가
dependencies:
  get: ^4.6.5

📌 3) 직접 위젯 제작

Flutter에서는 직접 커스텀 위젯을 만들어 **코드를 재사용하고 유지보수를 쉽게** 할 수 있습니다.

class CustomButton extends StatelessWidget {
    final String text;
    final VoidCallback onPressed;

    CustomButton({required this.text, required this.onPressed});

    @override
    Widget build(BuildContext context) {
        return ElevatedButton(
            onPressed: onPressed,
            child: Text(text),
        );
    }
}

---

3. Flutter의 기본 위젯 구조

📌 1) StatelessWidget (변하지 않는 UI)

StatelessWidget은 상태 변화 없이 한 번 생성되면 그대로 유지되는 위젯입니다.

class MyTextWidget extends StatelessWidget {
    final String text;

    MyTextWidget({required this.text});

    @override
    Widget build(BuildContext context) {
        return Text(
            text,
            style: TextStyle(fontSize: 20),
        );
    }
}

📌 2) StatefulWidget (상태 변화가 있는 UI)

StatefulWidget은 사용자의 입력, 네트워크 요청 등의 이벤트에 따라 UI가 변경될 수 있는 위젯입니다.

class CounterWidget extends StatefulWidget {
    @override
    _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
    int counter = 0;

    void incrementCounter() {
        setState(() {
            counter++;
        });
    }

    @override
    Widget build(BuildContext context) {
        return Column(
            children: [
                Text('카운트: $counter'),
                ElevatedButton(
                    onPressed: incrementCounter,
                    child: Text('증가'),
                ),
            ],
        );
    }
}

이처럼 setState()를 호출하면 UI가 업데이트됩니다.

---

4. 텍스트 위젯 분석

텍스트를 출력할 때 사용하는 **Text 위젯**을 분석해보겠습니다.

📌 Text 위젯 생성자 및 주요 속성

Text(
    '안녕하세요, Flutter!',
    style: TextStyle(
        fontSize: 20,
        fontWeight: FontWeight.bold,
        color: Colors.blue,
    ),
    textAlign: TextAlign.center,
)

• Text() - 텍스트 출력
• style - 폰트 크기, 색상, 굵기 설정
• textAlign - 정렬 방식 설정

---

5. Flutter 위젯을 활용한 화면 구성

Flutter로 앱을 만들 때 기획서 및 시안을 바탕으로 화면을 구성합니다.

📌 Flutter에서 화면을 구성하는 과정

• 기획서/시안을 분석
• 필요한 위젯을 선택 (Text, Button, Image 등)
• 위젯 배치를 위한 Layout 설정 (Column, Row, Stack 등)
• 위젯 간의 관계를 고려하여 State 관리

📌 화면 구성 예제

class MyHomePage extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text('Flutter 기본기 익히기')),
            body: Center(
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                        Text('Flutter 공부 시작!'),
                        ElevatedButton(
                            onPressed: () {},
                            child: Text('시작하기'),
                        ),
                    ],
                ),
            ),
        );
    }
}

---

6. 결론

• Flutter에서 UI는 StatelessWidget과 StatefulWidget을 기반으로 한다.
• 내장 위젯, pub.dev 패키지, 커스텀 위젯을 활용하여 UI를 구성할 수 있다.
• 위젯의 속성과 메서드를 분석하면 직접 원하는 UI를 제작할 수 있다.
• 실제 앱 화면을 구성하기 위해서는 기획서 기반으로 위젯을 선택하고 배치하는 과정이 필요하다.

다음 강의에서는 Flutter의 다양한 UI 위젯을 학습하고, 이를 활용하여 앱 화면을 제작하는 실습을 진행하겠습니다! 🚀