[flutter] RefreshIndicator를 사용하여 프로필 정보 새로 고침하기

12 Dec 2023

flutter

플러터(Flutter) 앱에서는 사용자의 프로필 정보를 표시하는 화면에서 주기적으로 업데이트된 정보를 보여주어야 할 때가 있습니다. 이를 위해서 RefreshIndicator 위젯을 사용하여 사용자가 손가락을 아래로 끌어당겨 화면을 새로고침할 수 있도록 구현할 수 있습니다.

RefreshIndicator란 무엇인가요?

RefreshIndicator는 사용자가 리스트를 아래로 당겨서 새로고침할 수 있도록 하는 플러터 내장 위젯입니다. 일반적으로 ListView나 GridView와 함께 사용되며, 사용자 경험을 향상시키는 기능을 제공합니다.

프로필 정보 새로고침을 위한 RefreshIndicator 구현

다음은 RefreshIndicator를 사용하여 프로필 정보를 새로고침하는 간단한 예제 코드입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('프로필 정보'),
        ),
        body: ProfileScreen(),
      ),
    );
  }
}

class ProfileScreen extends StatefulWidget {
  @override
  _ProfileScreenState createState() => _ProfileScreenState();
}

class _ProfileScreenState extends State<ProfileScreen> {
  List<String> profileInfo = ['이름: 홍길동', '이메일: test@example.com'];
  
  Future<void> _refresh() async {
    // 새로운 프로필 정보를 가져오는 비동기 작업 수행
    await Future.delayed(Duration(seconds: 2));
    setState(() {
      profileInfo = ['이름: 홍길동', '이메일: new@example.com'];
    });
  }

  @override
  Widget build(BuildContext context) {
    return RefreshIndicator(
      onRefresh: _refresh,
      child: ListView.builder(
        itemCount: profileInfo.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(profileInfo[index]),
          );
        },
      ),
    );
  }
}

위 코드에서는 ProfileScreen 위젯에서 RefreshIndicator를 사용하여 ListView를 감싸고 있습니다. ListView.builder는 프로필 정보를 표시하며, onRefresh 콜백 함수를 사용하여 새로고침 작업을 수행합니다. 이 예제에서는 단순히 2초 후에 새로운 이메일 정보를 업데이트하는 비동기 작업을 수행하고 화면을 갱신하는 방식으로 구현되었습니다.

이제 사용자가 화면을 아래로 당기면 _refresh 함수가 호출되어 새로운 정보를 가져오게 됩니다. 사용자의 프로필 정보를 업데이트할 때 RefreshIndicator를 통해 새로고침하는 간단하면서도 빠른 방법을 사용할 수 있습니다.

마치며

RefreshIndicator를 사용하여 사용자 프로필 정보를 새로고침하는 방법을 알아보았습니다. 이러한 방식을 사용하면 사용자가 손쉽게 최신 정보를 확인할 수 있도록 도와줄 수 있습니다. 계속해서 사용자 경험을 향상시키기 위한 방법을 탐구해보세요!

더 많은 정보는 플러터 공식 문서를 참고해보세요.