당겨서 새로고침

Coddy Flutter 여정의 데이터와 네트워크 섹션에 포함된 레슨. 27개 중 9번째.

휴대전화에서는 목록을 아래로 당겨 새로고침합니다. 위쪽에서 로딩 표시기가 내려오고 데이터가 업데이트됩니다. 이를 위한 Flutter 위젯은 RefreshIndicator입니다:

RefreshIndicator(
  onRefresh: refresh,
  child: ListView(
    children: [ ... ],
  ),
)

onRefresh는 Future를 반환하는 함수입니다. 해당 Future가 완료될 때까지 당기기 로딩 표시기가 계속 표시되므로, 함수 안에서 새 데이터를 await하세요:

Future<void> refresh() async {
  setState(() {
    _tip = fetch('/tip');
  });
  await _tip;
}

아래로 당기는 동작은 스크롤할 수 있는 항목에서만 작동합니다. 항목이 하나뿐인 경우에도 콘텐츠를 ListView에 넣으세요. ListView는 언제든 아래로 당길 수 있습니다. 당기기 로딩 표시기만으로도 앱이 작업 중임을 알 수 있으므로, 빌더는 hasData 검사로 이전 팁을 계속 표시할 수 있습니다.

챌린지

중급

화면을 아래로 당기면 팁이 새로고침되도록 하세요:

refresh 메서드를 추가하고, setState에서 새 _tip을 설정한 다음 이를 기다리세요
본문을 onRefresh: refresh가 있는 RefreshIndicator로 감싸세요
그 안에 FutureBuilder를 ListView에 넣으세요

미리보기에서 마우스로 화면을 아래로 끌어 보세요.

직접 해보기

import 'package:flutter/material.dart';

import 'api.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: TipScreen(),
    );
  }
}

class TipScreen extends StatefulWidget {
  const TipScreen({super.key});

  @override
  State<TipScreen> createState() => _TipScreenState();
}

class _TipScreenState extends State<TipScreen> {
  late Future<String> _tip;

  @override
  void initState() {
    super.initState();
    _tip = fetch('/tip');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Tip of the Day'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(24),
          child: FutureBuilder<String>(
              future: _tip,
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return Text(
                    snapshot.data!,
                    textAlign: TextAlign.center,
                    style: const TextStyle(fontSize: 24),
                  );
                }
                return const CircularProgressIndicator();
              },
            ),
        ),
      ),
    );
  }
}

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.

데이터와 네트워크의 모든 레슨

직접 연습해 보세요: 온라인 Flutter 컴파일러