[Flutter] 아래로 스와이프하여 새로고침 (RefreshIndicator) [맥북💻]

 목차

1. 사용된 기능 설명
2. 사용 예시
3. Dio 설정 시 에러 처리 방법

 

 

 

✅ 사용된 기능 설명

• async : 비동기 함수를 표시하는 키워드로, 함수 앞에 async를 붙이면 그 함수는 무조건 Future를 반환
• await : 비동기 작업(Future)이 끝날 때까지 함수 안의 다음 줄 실행을 잠시 멈추게 하는 키워드
  ** 해당 함수 안에서만 작성된 코드의 작업 순서를 보장
  
• dio.get() : Dio 라이브러리로 GET 요청 
  
• RefreshIndicator : 사용자가 화면을 아래로 당기면 새로고침 동작을 수행하는 위젯 (화면 새로고침에 사용)
  ** 내부 요소로 사용되는 child에는 스크롤 가능한 위젯만 가능 (ListView, SingleChildScrollView 등)
  
  • onRefresh : 새로고침 시 호출될 비동기 함수 호출
• SingleChildScrollView : 하나의 자식 위젯을 스크롤 가능하게 만들어주는 컨테이너
  ** 여러 자식 위젯을 스크롤 시키려면, Column, Row 등으로 감싸면 가능
  • physics : 스크롤 동작의 물리적 성질을 제어하는 속성으로 사용자가 느끼는 '감속, 튕김, 고정' 효과 설정 가능
    
    • BouncingScrollPhysics() : iOS 스타일 바운스 효과 
    • ClampingScrollPhysics() : Android 스타일 끝에서 튕기지 않고 멈춤 
    • AlwaysScrollableScrollPhysics() : 내용이 작아도 항상 스크롤 가능 
    • NeverScrollableScrollPhysics() : 스크롤 불가
      
• FutureBuilder : 비동기(Future) 데이터를 기다렸다가 UI에 반영할 때 사용하는 위젯
  ** API 호출, 로컬 JSON 읽기, 데이터베이스 조회 같은 작업을 처리할 때 사용
  • future : 기다릴 Future 객체 (ex: API 요청 결과)
  • builder : Future 상태에 따라 UI를 만들어주는 함수
  • initialData : Future 완료 전 초기 데이터 (선택)
    
• AsyncSnapshot : Future나 Stream의 현재 상태와 데이터를 담는 객체
  • snapshot.data : Future/Stream이 완료되었을 때 반환된 실제 데이터 
  • snapshot.hasData : 데이터가 존재하면 true, 없으면 false 
  • snapshot.hasError : 에러가 발생하면 true 
  • snapshot.error : 발생한 에러 객체 
  • snapshot.connectionState : Future/Stream 상태 (none, waiting, active, done)
    
• CircularProgressIndicator : 원형 회전 로딩 스피너를 표시하는 위젯
  • value : 0.0 ~ 1.0 사이 값으로 진행률을 표시할 때 사용. null이면 무한 회전 
  • strokeWidth : 원형 선의 굵기(두께) 지정 
  • color : 회전 원의 색상 지정 
  • backgroundColor : 원의 배경색 지정

 

 

✅ 사용 예시

 

1️⃣ pubspec.yaml 설정

• dio 설정

 

 

2️⃣ 신규 파일 작성

• product.dart 작성

 

 

3️⃣ 메소드 및 변수 선언

1. productList 변수 선언 및 dio 초기화
2. 앱 실행 시 초기화 메소드 작성
3. 작성된 https 를 통해 받아온 데이터를 처리하는 메소드 작성

 

 

4️⃣ Scaffold 작성

• body 작성

 

 

5️⃣ 테스트

 

 

 

 

✅ Dio 설정 시 에러 처리 방법

 

1️⃣ pubspec.yaml 에서 dio 설정 후, import를 진행하면 '패키지를 찾을 수 없다'는 에러 발생

 

 

2️⃣ 터미널에 패키지 적용을 위해 명령어 입력

1. flutter pub get
2. flutter upgrade

 

 

 

 

 

 

 

✔️사용된 코드

class _MyHomePageState extends State<MyHomePage>{
  late Future<List<Product>> productList;
  Dio dio = Dio();

  @override
  void initState() {
    super.initState();
    productList = getProductData();
  }

  Future<List<Product>> getProductData() async{
    late List<Product> products;
    try{
      var response = await dio.get("https://dummyjson.com/products");
      products = response.data['products']
        .map<Product>((json) => Product.fromJson(json))
        .toList();
    }catch(e){
      print("error 입니다.");
    }
    return products;
  }

  Future<void> refreshData() async{
    productList = getProductData();
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Test App"),
      ),
      body: RefreshIndicator.adaptive(
        onRefresh: () => refreshData(),
        child: SingleChildScrollView(
          physics: const AlwaysScrollableScrollPhysics(),
          child: FutureBuilder<List<Product>>(
            future: productList,
            builder: (BuildContext con, AsyncSnapshot snapshot){
              if(!snapshot.hasData){
                return const Center(
                  child: CircularProgressIndicator(strokeWidth: 2,),
                );
              }else{
                return ListView.builder(
                  shrinkWrap: true,
                  physics: const NeverScrollableScrollPhysics(),
                  itemCount: snapshot.data.length,
                  itemBuilder: (BuildContext cont, int index) {
                    var data = snapshot.data[index];
                    return Container(
                      padding: const EdgeInsets.all(10),
                      decoration: BoxDecoration(
                        border: Border.all(width: 1, color: Colors.black26),
                      ),
                      child: Text("제목 : ${data.title} \n설명 : ${data.description}"),
                    );
                  },
                );
              }
            },
          ),
        ),
      ),
    );
  }
}