앱을 개발하는 동안 데이터가 변경될 때 사용자에게 실시간으로 이를 업데이트하는 것은 중요합니다. 플러터(Flutter) 앱에서는 RefreshIndicator를 사용하여 사용자가 상품을 카트에 추가할 때마다 해당 화면을 자동으로 새로고침할 수 있습니다.

1. RefreshIndicator 추가

먼저, 해당 화면의 build 함수에 RefreshIndicator를 추가합니다.

import 'package:flutter/material.dart';

class CartPage extends StatefulWidget {
  @override
  _CartPageState createState() => _CartPageState();
}

class _CartPageState extends State<CartPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('장바구니'),
      ),
      body: RefreshIndicator(
        onRefresh: _refresh,
        child: ListView(
          children: <Widget>[
            // 카트에 추가된 상품들을 보여주는 위젯들을 추가합니다.
          ],
        ),
      ),
    );
  }

  Future<void> _refresh() {
    // 데이터를 새로고침하는 비동기 함수를 여기에 추가합니다.
  }
}

RefreshIndicator는 onRefresh 콜백을 통해 새로고침 액션을 처리하고, child로는 새로고침할 내용이 있는 위젯을 감쌉니다.

2. 데이터 새로고침

다음으로, 필요한 경우에 데이터를 새로고침하는 비동기 함수를 구현합니다.

Future<void> _refresh() async {
  // TODO: 데이터를 새로고침하는 비동기 로직을 구현합니다.

  // setState를 호출하여 화면을 다시 그리도록 합니다.
  setState(() {
    // 변경된 데이터를 갱신합니다.
  });
}

3. 새로고침 테스트

이제 앱을 실행하고 상품을 카트에 추가한 후 아래로 당겨서 새로고침을 테스트해보세요. RefreshIndicator가 사용자가 액션을 수행할 때마다 화면을 새로고침하는지 확인합니다.

이제, 앱을 실행하고 상품을 카트에 추가한 후 아래로 당겨서 새로고침을 테스트하세요. RefreshIndicator가 사용자가 액션을 수행할 때마다 화면을 새로고침하는지 확인하세요.

이제 앱을 실행하고 상품을 카트에 추가한 후 아래로 당겨서 새로고침을 테스트하세요. RefreshIndicator가 사용자가 액션을 수행할 때마다 화면을 새로고침하는지 확인하세요.

간단한 몇 줄의 코드로, RefreshIndicator를 통해 상품이 카트에 추가될 때마다 화면을 자연스럽게 새로고침할 수 있습니다. 사용자 경험을 향상시키는 간단한 방법이지 않을까요?

참고 자료

• Flutter 공식 문서 - RefreshIndicator