Flutter 앱에서 다른 페이지로 이동하고 다시 돌아왔을 때 데이터를 자동으로 새로 고침하여 최신 정보를 표시하는 방법에 대해 알아보겠습니다. 이를 위해 RefreshIndicator 위젯을 사용하여 사용자가 화면을 아래로 당겨 새로 고침을 수행할 수 있도록 할 것입니다.
1. RefreshIndicator 추가
먼저, 새로 고침 기능을 적용할 페이지의 위에 RefreshIndicator 위젯을 추가합니다.
RefreshIndicator(
onRefresh: () {
// 새로 고침 로직을 여기에 추가
return Future.delayed(Duration(seconds: 1));
},
child: ListView(
children: [
// 페이지 내용을 추가
// ...
],
),
),
RefreshIndicator 위젯은 onRefresh 콜백을 사용하여 새로 고침을 처리하고, child 속성을 통해 새로 고침 기능을 추가할 페이지의 내용을 포함하는 위젯을 지정합니다.
2. 페이지 이동 시 새로 고침 제어
새로 고침을 위해 데이터를 다시 불러와야 하는 페이지에서 새로 고침된 데이터를 사용자에게 표시할 때, 페이지가 포함된 StatefulWidget의 initState 메서드에 새로 고침 로직을 추가하여 화면이 다시 표시될 때 자동으로 데이터를 갱신할 수 있습니다.
@override
void initState() {
super.initState();
_loadData();
}
void _loadData() {
// 데이터를 다시 불러오는 로직을 여기에 추가
}
위의 예제에서 _loadData 메서드는 데이터를 다시 불러오는 로직을 정의하고, initState 메서드에서 해당 메서드를 호출하여 페이지가 시작될 때 자동으로 데이터를 갱신할 수 있습니다.
3. 예외 처리
새로 고침 동작 중 발생할 수 있는 예외 상황을 처리하여 사용자 경험을 향상시키는 것이 중요합니다. 네트워크 연결이나 데이터 로딩 중 오류가 발생할 경우, 적절한 메시지를 표시하거나 다시 시도할 수 있도록 하는 등 사용자에게 적절한 피드백을 제공해야 합니다.
이제 RefreshIndicator를 사용하여 다른 페이지로 이동 시 데이터를 자동으로 새로 고침하는 방법을 익혔습니다. 사용자가 새로 고침을 수동으로 실행하지 않아도 항상 최신 정보를 제공할 수 있게 됩니다.
참조: