Flutter 새로고침 동작하기 RefreshIndicator

우리가 스마트폰을 사용할 때, 스크롤을 밑으로 쫙 내리면 상단 부분에 새로고침이 표시되는 것을  확인할 수 있다

이번에는 그걸 한번 해보겠다.

 

1. 기본 코드

일단 기본코드 main.dart와 연습용 practice_page.dart를 준비한다.

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/pages/practice_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const PracticePage(),
    );
  }
}

 

practice_page.dart

import 'package:flutter/material.dart';

class PracticePage extends StatelessWidget {
  const PracticePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Future _onRefresh() async {
      await Future.delayed(Duration(milliseconds: 1000));
    }

    return RefreshIndicator(
      onRefresh: _onRefresh,
      child: ListView.builder(
        itemBuilder: (context, index) => Image.asset("assets/flutter.png"),
      ),
    );
  }
}

 

2. 코드 포인트

일단 딜레이 시간을 주게 하는 _onRefresh 함수를 선언한 뒤, async {} 를 사용한다.

async는 비동기 통신에 자주 쓰이는 걸로 알고 잇다 (javaScript에서)

그리고 위젯 RefreshIndicator에서 아들래미로 onRefresh를 넣어주고 _onRefresh로 값을 넣어주면 된다

 

3. 결과

스크롤을 쫙 내리다 보면, 상단에 동글동글 돌아가는 것을 볼 수가 있다.

이렇게 실제 백에다가 데이터를 요청하고 받을때 사용하면 좋을 거 같다