[flutter] RefreshIndicator를 사용하여 앵커 태그 클릭 시 자동으로 새로 고침하기

12 Dec 2023

flutter

안녕하세요! Flutter 앱에서 앵커 태그를 클릭할 때 RefreshIndicator를 사용하여 페이지를 자동으로 새로 고칠 수 있는 방법에 대해 알아보겠습니다.

앵커 태그란?

웹 개발에서 앵커 태그(anchor tag)는 웹 페이지 내에서 특정한 위치로 이동하는 데 사용됩니다. Flutter 앱에서도 비슷한 동작을 하는데, 사용자가 특정한 버튼을 클릭하면 화면이 새로 고쳐져야 하는 경우가 있습니다.

RefreshIndicator로 자동 새로 고침하기

Flutter에서는 RefreshIndicator를 사용하여 화면을 새로 고칠 수 있습니다. 이를 활용하여 앵커 태그를 클릭했을 때 페이지를 새로 고치는 동작을 구현할 수 있습니다.

import 'package:flutter/material.dart';

class AnchorRefreshPage extends StatefulWidget {
  @override
  _AnchorRefreshPageState createState() => _AnchorRefreshPageState();
}

class _AnchorRefreshPageState extends State<AnchorRefreshPage> {
  final GlobalKey<RefreshIndicatorState> _refreshIndicatorKey =
      GlobalKey<RefreshIndicatorState>();

  Future<void> _handleRefresh() {
    // 새로 고침 동작 수행
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('앵커 태그 자동 새로 고침'),
      ),
      body: RefreshIndicator(
        key: _refreshIndicatorKey,
        onRefresh: _handleRefresh,
        child: SingleChildScrollView(
          child: Column(
            children: [
              // 앵커 태그 클릭 시 동작 구현
              GestureDetector(
                onTap: () {
                  _refreshIndicatorKey.currentState.show();
                },
                child: Text(
                  '앵커 태그',
                  style: TextStyle(
                    fontSize: 24,
                    color: Colors.blue,
                  ),
                ),
              ),
              // 나머지 내용
            ],
          ),
        ),
      ),
    );
  }
}

위 코드에서 RefreshIndicator 위젯를 사용하여 화면을 새로 고치고, GestureDetector를 통해 앵커 태그를 클릭할 때 show 메서드를 사용하여 새로 고치는 동작을 수행하도록 구현했습니다.

이제 앵커 태그를 클릭하면 화면이 자동으로 새로 고쳐지는 동작을 확인할 수 있을 것입니다.

그럼 이제 위 내용들을 함께 정리해보겠습니다.