비동기 및 특수 위젯

🎯 학습 목표

• 다양한 특수 위젯(FutureBuilder, StreamBuilder, TabBar, PageView 등)의 동작 원리 이해
• 비동기 데이터를 활용한 UI 구성 능력 향상
• 탭 전환 및 슬라이드 UI 구현 능력 습득
• 복잡한 위젯 조합을 통한 실전 앱 UI 설계 경험

---

🔹 FutureBuilder

✅ 개념 정리

FutureBuilder는 Future 객체의 상태 변화에 따라 UI를 자동으로 갱신해주는 위젯입니다.
비동기 작업의 결과를 기다릴 때 로딩 스피너, 성공/실패 메시지를 표시하는 데 사용됩니다.

⚠️ 주의: future는 build() 함수 내부가 아닌, initState() 등 외부에서 선언해야 불필요한 재빌드를 방지할 수 있습니다.

🔧 주요 속성

속성	설명
future	감시할 Future 객체
builder	AsyncSnapshot을 인자로 받아 UI를 반환하는 함수
snapshot.hasData	정상적으로 데이터가 도착했는지 여부
snapshot.hasError	오류 발생 여부
snapshot.connectionState	none, waiting, active, done 상태 반환

🧪 기본 예제

class FutureDemo extends StatefulWidget {
  @override
  _FutureDemoState createState() => _FutureDemoState();
}

class _FutureDemoState extends State<FutureDemo> {
  late Future<String> _calculation;

  @override
  void initState() {
    super.initState();
    _calculation = Future.delayed(Duration(seconds: 2), () => '데이터 로드 완료!');
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<String>(
      future: _calculation,
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Center(child: CircularProgressIndicator());
        } else if (snapshot.hasError) {
          return Center(child: Text('에러: ${snapshot.error}'));
        } else {
          return Center(child: Text(snapshot.data!));
        }
      },
    );
  }
}

🧩 실습 과제

• Future.delayed(Duration(seconds: 3))로 변경하고, 완료 메시지와 함께 아이콘 표시해보기
• Future.error('문제 발생')을 이용해 에러 발생 상황 테스트

• 참고

  • Future.error('문제 발생')를 Future.delayed의 콜백 안에서 직접 리턴하면 snapshot.data로 전달되거나 무시될 수 있어.
  • throw '문제 발생'처럼 직접 예외를 던져야 FutureBuilder가 hasError == true로 인식함.

  import 'package:flutter/material.dart';
  
  void main() {
    runApp(DiaryApp());
  }
  
  class DiaryApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(title: 'Future Error Demo', home: FutureErrorDemo());
    }
  }
  
  class FutureErrorDemo extends StatefulWidget {
    @override
    _FutureErrorDemoState createState() => _FutureErrorDemoState();
  }
  
  class _FutureErrorDemoState extends State<FutureErrorDemo> {
    late Future<String> _calculation;
  
    @override
    void initState() {
      super.initState();
      // 2초 후 에러 던지기 (정확히 '에러 발생: 문제 발생' 출력됨)
      _calculation = Future.delayed(Duration(seconds: 2), () => throw '문제 발생');
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(title: Text('에러 테스트')),
        body: FutureBuilder<String>(
          future: _calculation,
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return Center(child: CircularProgressIndicator());
            } else if (snapshot.hasError) {
              return Center(
                child: Text(
                  '에러 발생: ${snapshot.error}', // ← 여기에 정확히 출력됨
                  style: TextStyle(color: Colors.red, fontSize: 18),
                ),
              );
            } else {
              return Center(child: Text(snapshot.data!));
            }
          },
        ),
      );
    }
  }

 

---

🔹 StreamBuilder

✅ 개념 정리

StreamBuilder는 실시간 데이터 스트림을 감지하여 UI를 자동으로 갱신합니다.
센서 데이터, WebSocket 통신, 타이머 등에 활용됩니다.

🔧 주요 속성

속성	설명
stream	구독할 Stream 객체
builder	Stream에서 발행된 값을 기반으로 UI를 생성
snapshot.connectionState	waiting, active, done 등 상태 확인
snapshot.hasData / hasError	데이터 도착 여부 및 에러 여부

🧪 기본 예제

https://youtube.com/shorts/e8BHDkDwoKY?feature=share

 

class StreamDemo extends StatefulWidget {
  @override
  _StreamDemoState createState() => _StreamDemoState();
}

class _StreamDemoState extends State<StreamDemo> {
  late Stream<int> _counterStream;

  @override
  void initState() {
    super.initState();
    _counterStream = Stream.periodic(Duration(seconds: 1), (count) => count).take(10);
  }

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<int>(
      stream: _counterStream,
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Center(child: Text('스트림 대기 중...'));
        } else if (snapshot.hasError) {
          return Center(child: Text('에러: ${snapshot.error}'));
        } else if (snapshot.connectionState == ConnectionState.active) {
          return Center(child: Text('카운트: ${snapshot.data}'));
        } else {
          return Center(child: Text('스트림 종료'));
        }
      },
    );
  }
}

🧩 실습 과제

• Stream.periodic(Duration(seconds: 5), (_) => Random().nextInt(100))로 랜덤 숫자 표시  : 카운트 값이 랜덤으로 출력
• https://youtube.com/shorts/pC3edBiMIZ8
• 0~100사이의 랜덤 값 까지 카운트

  class _StreamDemoState extends State<StreamDemo> {
    late Stream<int> _counterStream;
    var num = Random().nextInt(100); // 0 이상 100 미만의 정수
  
    @override
    void initState() {
      super.initState();
      _counterStream = Stream.periodic(
        Duration(seconds: 1),
        (count) => count,
      ).take(num);
    }

if (i == 3) throw Exception('에러 발생') 형태로 에러 테스트

---

🔹 TabBar & TabBarView

✅ 개념 정리

DefaultTabController로 상태를 관리하고, TabBar와 TabBarView를 연계하여 탭 UI를 구현합니다.

🔧 주요 구성 요소

구성요소	설명
TabBar	탭 버튼 UI
TabBarView	탭에 따른 콘텐츠 UI
length	탭 개수
TabController	수동 제어시 사용 가능 (선택 이벤트 감지 등)

🧪 기본 예제

class TabDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: Text('탭 예제'),
          bottom: TabBar(
            tabs: [
              Tab(icon: Icon(Icons.home), text: '홈'),
              Tab(icon: Icon(Icons.person), text: '프로필'),
              Tab(icon: Icon(Icons.settings), text: '설정'),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            Center(child: Text('홈 화면')),
            Center(child: Text('프로필 화면')),
            Center(child: Text('설정 화면')),
          ],
        ),
      ),
    );
  }
}

🧩 실습 과제

• 탭에 아이콘과 텍스트를 조합하여 커스터마이징
• TabController를 수동으로 생성하고, 탭 변경 시 index를 출력해보기

---

🔹 PageView

✅ 개념 정리

PageView는 여러 페이지를 스와이프로 전환할 수 있는 위젯입니다.
PageController를 사용하면 프로그램적으로 페이지 전환도 가능하며, 페이지 변경 이벤트도 감지할 수 있습니다.

🔧 주요 속성

속성	설명
children	페이지로 표시할 위젯 리스트
controller	PageController를 통해 초기 페이지, 이동 제어
onPageChanged	페이지 전환 시 콜백 실행

🧪 기본 예제

class PageDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PageView(
      children: [
        Container(color: Colors.red),
        Container(color: Colors.green),
        Container(color: Colors.blue),
      ],
    );
  }
}

🧩 실습 과제

• PageController(initialPage: 1) 설정
• 페이지 이동 버튼 구현 (controller.jumpToPage, animateToPage)
• onPageChanged를 통해 현재 페이지 인덱스를 출력

---

🔹 복합 UI 실습 프로젝트

✨ 실습: 일기장 앱 화면 설계

1. 메인 화면
   • PageView로 월별 달력 화면을 좌우 스와이프
   • GridView로 달력 구성
2. 일기 작성 화면
   • FutureBuilder로 이미지 첨부 미리보기 구현
   • Future.delayed로 2초 후 이미지 URL 로딩, Image.network로 표시
3. 일정 추가/수정 화면
   • TabBar 또는 PageView로 반복 설정 화면 구성
   • 예: 탭 "매일 / 매주 / 매월" 선택 시 각기 다른 옵션 표시