Flutter 기초부터 심화까지 완벽 가이드

Flutter의 핵심 개념과 위젯을 기초부터 심화까지 단계별로 학습합니다. StatelessWidget, StatefulWidget, 상태 관리, 레이아웃 구성 등 실무에 필요한 모든 내용을 다룹니다.

---

---

들어가며

이 글에서는 Flutter 기초부터 심화까지 완벽 가이드에 대해 상세히 알아보겠습니다. 총 12가지 주요 개념을 다루며, 각각의 개념에 대한 설명과 실제 코드 예제를 함께 제공합니다.

목차

1. StatelessWidget_기초
2. StatefulWidget_생성
3. setState_상태_업데이트
4. Column과_Row_레이아웃
5. Container_스타일링
6. ListView_스크롤_리스트
7. Navigator_화면_전환
8. TextField_입력_처리
9. FutureBuilder_비동기_처리
10. StreamBuilder_실시간_데이터
11. GestureDetector_제스처_처리
12. Provider_상태_관리

---

1. StatelessWidget 기초

개요

StatelessWidget은 상태가 변하지 않는 정적인 위젯입니다. 한 번 생성되면 화면에 표시된 후 변경되지 않습니다.

코드 예제

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Hello Flutter')),
        body: Center(child: Text('Welcome!')),
      ),
    );
  }
}

설명

build 메서드는 UI를 구성하는 위젯 트리를 반환합니다. MaterialApp과 Scaffold는 Flutter 앱의 기본 구조를 제공합니다.

---

2. StatefulWidget 생성

개요

StatefulWidget은 상태가 변할 수 있는 동적인 위젯입니다. 사용자 인터랙션이나 데이터 변경에 반응합니다.

코드 예제

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Text('Count: $count');
  }
}

설명

StatefulWidget은 createState()로 State 객체를 생성하며, State 클래스에서 실제 상태와 UI 로직을 관리합니다.

---

3. setState 상태 업데이트

개요

setState()는 위젯의 상태를 변경하고 UI를 다시 빌드하는 메서드입니다. 모든 상태 변경은 setState() 안에서 수행해야 합니다.

코드 예제

class _CounterState extends State<Counter> {
  int count = 0;

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

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

설명

setState()가 호출되면 Flutter는 해당 위젯의 build() 메서드를 다시 실행하여 UI를 업데이트합니다.

---

4. Column과 Row 레이아웃

개요

Column은 위젯을 세로로, Row는 가로로 배치하는 레이아웃 위젯입니다. children 속성으로 여러 위젯을 배치할 수 있습니다.

코드 예제

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text('첫 번째'),
    Text('두 번째'),
    Row(
      children: [Icon(Icons.star), Text('별')],
    ),
  ],
)

설명

mainAxisAlignment는 주축(Column은 세로) 정렬을, crossAxisAlignment는 교차축(Column은 가로) 정렬을 제어합니다.

---

5. Container 스타일링

개요

Container는 패딩, 마진, 크기, 색상, 테두리 등 다양한 스타일을 적용할 수 있는 다목적 위젯입니다.

코드 예제

Container(
  width: 200,
  height: 100,
  padding: EdgeInsets.all(16),
  margin: EdgeInsets.symmetric(vertical: 8),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(12),
  ),
  child: Text('Styled Box'),
)

설명

decoration 속성으로 배경색, 테두리, 그림자 등을 설정하고, padding과 margin으로 여백을 조절합니다.

---

6. ListView 스크롤 리스트

개요

ListView는 스크롤 가능한 리스트를 만드는 위젯입니다. 많은 양의 데이터를 효율적으로 표시할 수 있습니다.

코드 예제

ListView.builder(
  itemCount: 20,
  itemBuilder: (context, index) {
    return ListTile(
      leading: Icon(Icons.person),
      title: Text('Item $index'),
      subtitle: Text('Subtitle $index'),
      onTap: () => print('Tapped $index'),
    );
  },
)

설명

ListView.builder는 필요한 항목만 동적으로 생성하여 메모리를 효율적으로 사용합니다. itemBuilder는 각 항목의 UI를 생성합니다.

---

7. Navigator 화면 전환

개요

Navigator는 화면 간 전환을 관리하는 클래스입니다. push로 새 화면으로 이동하고, pop으로 이전 화면으로 돌아갑니다.

코드 예제

// 다음 화면으로 이동
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => DetailPage()),
);

// 이전 화면으로 돌아가기
Navigator.pop(context);

설명

MaterialPageRoute는 플랫폼별 전환 애니메이션을 제공하며, context를 통해 현재 위젯 트리의 위치를 파악합니다.

---

8. TextField 입력 처리

개요

TextField는 사용자로부터 텍스트 입력을 받는 위젯입니다. TextEditingController로 입력값을 제어할 수 있습니다.

코드 예제

class MyForm extends StatefulWidget {
  @override
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  final controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: controller,
      decoration: InputDecoration(labelText: '이름'),
      onChanged: (text) => print(text),
    );
  }
}

설명

TextEditingController는 입력값을 읽고 수정할 수 있게 해주며, onChanged 콜백으로 입력 변경을 감지합니다.

---

9. FutureBuilder 비동기 처리

개요

FutureBuilder는 비동기 작업의 결과를 기다리면서 로딩 상태를 표시하고, 완료되면 데이터를 화면에 보여줍니다.

코드 예제

FutureBuilder<String>(
  future: fetchData(),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return CircularProgressIndicator();
    }
    if (snapshot.hasError) return Text('Error');
    return Text('Data: ${snapshot.data}');
  },
)

설명

snapshot.connectionState로 로딩 상태를 확인하고, snapshot.data로 완료된 데이터에 접근합니다.

---

10. StreamBuilder 실시간 데이터

개요

StreamBuilder는 Stream에서 지속적으로 발생하는 데이터 변화를 감지하고 UI를 자동으로 업데이트합니다.

코드 예제

StreamBuilder<int>(
  stream: countStream(),
  initialData: 0,
  builder: (context, snapshot) {
    return Text(
      'Current: ${snapshot.data}',
      style: TextStyle(fontSize: 24),
    );
  },
)

설명

Stream에서 새로운 데이터가 발생할 때마다 builder가 자동으로 호출되어 UI가 갱신됩니다.

---

11. GestureDetector 제스처 처리

개요

GestureDetector는 탭, 더블탭, 드래그, 스와이프 등 다양한 사용자 제스처를 감지하는 위젯입니다.

코드 예제

GestureDetector(
  onTap: () => print('Tapped'),
  onDoubleTap: () => print('Double Tapped'),
  onLongPress: () => print('Long Pressed'),
  child: Container(
    width: 200,
    height: 200,
    color: Colors.blue,
    child: Center(child: Text('Touch Me')),
  ),
)

설명

다양한 on 콜백을 통해 여러 종류의 제스처를 처리할 수 있으며, child 위젯에 제스처 인식 기능을 추가합니다.

---

12. Provider 상태 관리

개요

Provider는 Flutter에서 가장 널리 사용되는 상태 관리 패키지로, 위젯 트리 전체에서 데이터를 공유할 수 있습니다.

코드 예제

class Counter extends ChangeNotifier {
  int _count = 0;
  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

// 사용
Consumer<Counter>(
  builder: (context, counter, child) {
    return Text('${counter.count}');
  },
)

설명

ChangeNotifier를 상속받아 상태 변경 시 notifyListeners()를 호출하면, Consumer가 자동으로 UI를 업데이트합니다.

---

마치며

이번 글에서는 Flutter 기초부터 심화까지 완벽 가이드에 대해 알아보았습니다. 총 12가지 개념을 다루었으며, 각각의 사용법과 예제를 살펴보았습니다.

관련 태그

#Flutter #StatelessWidget #StatefulWidget #State Management #Layout