[flutter] RefreshIndicator를 사용하여 화면 회전 시 자동으로 새로 고침하기

12 Dec 2023

flutter

안녕하세요! Flutter 개발자 여러분. 이번 포스팅에서는 RefreshIndicator를 사용하여 화면을 회전할 때 자동으로 새로 고침되도록 하는 방법에 대해 알아보겠습니다.

1. RefreshIndicator란?

RefreshIndicator는 앱 화면을 당겨서 새로고침할 수 있는 기능을 제공하는 위젯입니다. 이를 사용하면 화면을 당기는 동작에 따라 새로고침이 이루어지며, 사용자에게 직관적으로 콘텐츠의 업데이트 여부를 알려줍니다.

2. RefreshIndicator 사용하기

다음은 간단한 예제 코드입니다. 이 코드는 RefreshIndicator를 사용하여 ListView를 당기면 데이터를 새로고침하는 동작을 구현한 것입니다.

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('RefreshIndicator Example'),
        ),
        body: RefreshIndicator(
          onRefresh: () async {
            // 데이터 새로고침 로직
          },
          child: ListView(
            children: <Widget>[
              ListTile(title: Text('Item 1')),
              ListTile(title: Text('Item 2')),
              ListTile(title: Text('Item 3')),
            ],
          ),
        ),
      ),
    );
  }
}

3. 화면 회전 시 자동 새로고침 기능 구현하기

화면이 회전될 때 자동으로 새로고침되도록 하려면 다음 단계를 따르면 됩니다.

SingleTickerProviderStateMixin을 사용하여 상태를 업데이트할 수 있는 mixin을 구현합니다.
initState() 메서드에서 화면 회전 이벤트를 감지하고, 새로고침 로직을 실행합니다.

class _MyScreenState extends State<MyScreen> with **SingleTickerProviderStateMixin** {
  @override
  void initState() {
    // 화면 회전 이벤트 감지
    MediaQuery.of(context).orientation
    listen((Orientation orientation) {
      // 새로고침 로직 실행
    });
    super.initState();
  }
}

4. 마무리

이제 RefreshIndicator를 사용하여 화면을 회전할 때 자동으로 새로고침할 수 있는 방법에 대해 알아보았습니다. 이를 통해 사용자 경험을 향상시키고, 데이터 업데이트를 간편하게 할 수 있습니다.

더 많은 지식을 습득하려면 Flutter 공식 문서를 참고하세요. 감사합니다.