[Flutter] RefreshIndicator (새로 고침)

✍ RefreshIndicator 

스크롤할 수 있는 화면의 맨 상단을 위로 당기면 로딩 아이콘이 나오면서 서버에 데이터를 다시 가져오거나 하는 등 새롭게 다시 데이터를 뿌려줄 때 이용하면 좋은 위젯이다.

 

사용 방법은 간단하다. RefreshIndicator 에 child 와 onRefresh 에 새로 고침 아이콘을 하면서 실행할 작업을 정의한다. child 에 스크롤이 가능한 위젯을 넣으면 된다.

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: RefreshIndicatorScreen()));

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("RefreshIndicatorScreen")),
      body: RefreshIndicator(
        onRefresh: () async{
          await Future<void>.delayed(Duration(seconds: 2));
        },
        child: ListView(
          children: List.generate(
            100,
                (index) => Container(
              color: Colors.greenAccent,
              height: 100,
              margin: EdgeInsets.all(16.0),
              child: Center(child: Text("$index")),
            ),
          ),
        ),
      ),
    );
  }
}

 

 

 

 

RefreshIndicator class - material library - Dart API