[flutter] RefreshIndicator를 사용하여 이미지 갤러리 새로 고침하기

12 Dec 2023

flutter

이미지 갤러리 앱을 개발 중인 경우, 사용자가 새로운 이미지를 추가하거나 기존 이미지를 업데이트하는 경우에 앱 화면을 새로 고쳐야 할 때가 있습니다. Flutter에서는 RefreshIndicator 위젯을 사용하여 새로 고침 기능을 쉽게 구현할 수 있습니다.

이번 포스트에서는 Flutter 앱에서 RefreshIndicator를 사용하여 이미지 갤러리를 새로 고치는 방법에 대해 알아보겠습니다.

RefreshIndicator란?

RefreshIndicator는 사용자가 앱 화면을 아래로 당겨 새로 고침할 수 있는 기능을 제공하는 위젯입니다. 주로 리스트나 그리드와 같은 스크롤 가능한 위젯과 함께 사용되어 콘텐츠를 업데이트할 때 유용합니다.

이미지 갤러리 앱에 RefreshIndicator 추가하기

우선, 이미지 갤러리 앱의 화면을 구성한 후에 RefreshIndicator를 추가해보겠습니다. 아래는 간단한 이미지 갤러리 앱의 코드 예시입니다.

import 'package:flutter/material.dart';

void main() => runApp(ImageGalleryApp());

class ImageGalleryApp extends StatelessWidget {
  // 이미지 리스트
  final List<String> _images = [
    'image1.jpg',
    'image2.jpg',
    'image3.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('이미지 갤러리'),
        ),
        body: RefreshIndicator(
          onRefresh: _onRefresh,
          child: GridView.builder(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
            ),
            itemCount: _images.length,
            itemBuilder: (BuildContext context, int index) {
              return Image.asset(_images[index]);
            },
          ),
        ),
      ),
    );
  }

  // 새로고침 이벤트 핸들러
  Future<void> _onRefresh() {
    // 이미지 갱신 로직
    return Future.delayed(Duration(seconds: 1));
  }
}

이 예제에서는 이미지 갤러리 앱을 GridView로 구성하고, RefreshIndicator를 이용하여 새로고침 기능을 추가했습니다. onRefresh 콜백을 통해 새로 고침이 시작될 때 수행할 로직을 작성할 수 있습니다.

결론

이렇게 Flutter의 RefreshIndicator를 사용하여 이미지 갤러리 앱을 새로 고치는 방법에 대해 알아보았습니다. 사용자가 앱 콘텐츠를 업데이트할 수 있는 기능을 제공함으로써, 앱 사용성을 향상시킬 수 있습니다.

더 많은 정보는 Flutter 공식 문서를 참고하시기 바랍니다.