Flutter 앱에서 페이지 뒤로 갔을 때 새로고침하는 방법

Flutter 앱에서 사용자 경험을 향상시키기 위해서는 페이지 뒤로 돌아왔을 때 해당 페이지를 새로고침하는 기능이 중요합니다.

이 블로그에서는 Flutter 앱에서 페이지 뒤로 갔을 때 새로고침하는 두 가지 일반적인 방법을 살펴보겠습니다.

 

1. Navigator.push의 then 사용하기

 

Navigator.push 메서드는 새로운 페이지를 푸시하는 데 사용됩니다.

then 메서드를 추가하면 푸시된 페이지에서 돌아온 후 특정 작업을 수행할 수 있습니다.

페이지 새로고침을 위해서는 setState 메서드를 사용하여 위젯 상태를 업데이트할 수 있습니다.

Navigator.push(context,
  MaterialPageRoute(builder: (context) => MoveToPage()),
).then((value) {
  setState(() {});
});

 

위 코드에서 Navigator.push 메서드는 MoveToPage 위젯을 푸시합니다.

then 메서드는 푸시된 페이지에서 돌아온 후 setState 메서드를 호출하여 위젯 상태를 업데이트합니다.

이로 인해 위젯이 다시 렌더링되어 새로고침 효과를 나타냅니다.

 

2. 함수 사용하기

 

두 번째 방법은 함수를 사용하여 페이지 새로고침 작업을 구현하는 것입니다.

첫 번째 위젯에서 두 번째 위젯을 반환하고 두 번째 위젯에서 Navigator.pop 메서드를 사용하여 첫 번째 위젯으로 돌아옵니다.

이때 첫 번째 위젯을 새로고침하기 위해서는 setState 메서드를 호출해야 합니다.

 

첫 번째 위젯 (FirstWidget)

class FirstWidget extends StatefulWidget {
  @override
  _FirstWidgetState createState() => _FirstWidgetState();
}

class _FirstWidgetState extends State<FirstWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: SecondWidget(
        refresh: () {
          Navigator.push(context,
            MaterialPageRoute(builder: (context) => ThirdWidget()),
          ).then((value) {
            setState(() {});
          });
        },
      ),
    );
  }
}

 

두 번째 위젯 (SecondWidget)

class SecondWidget extends StatelessWidget {
  final Function refresh;

  SecondWidget({required this.refresh});

  @override
  Widget build(BuildContext context) {
    return TextButton(
      onPressed: refresh,
      child: Text('새로고침'),
    );
  }
}

 

세 번째 위젯 (ThirdWidget)

class ThirdWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Third Page'),
      ),
      body: Center(
        child: TextButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('뒤로 가기'),
        ),
      ),
    );
  }
}

 

참고 사항

• setState 메서드를 사용하면 위젯이 다시 렌더링됩니다. 이는 성능 저하를 초래할 수 있으므로 주의해서 사용해야 합니다.
• Navigator.pushReplacement 메서드를 사용하여 이전 페이지를 스택에서 제거하고 새 페이지를 푸시할 수도 있습니다. 이 경우 이전 페이지는 새로고침되지 않습니다.
• MediaQuery 위젯을 사용하여 현재 페이지의 방향을 확인하고 방향에 따라 레이아웃을 조정할 수 있습니다.

이 블로그가 Flutter 앱에서 페이지 뒤로 갔을 때 새로고침하는 방법을 이해하는 데 도움이 되었기를 바랍니다.

 

 

 

수발가족을 위한 일기장 “나비일기장”

 

https://play.google.com/store/apps/details?id=com.maccrey.navi_diary_release

 

구글플레이 앱 배포의 시작! 비공개테스트 20명의 테스터모집을 위한 앱 "테스터 쉐어"

 

https://play.google.com/store/apps/details?id=com.maccrey.tester_share_release

 

카카오톡 오픈 채팅방

https://open.kakao.com/o/gsS8Jbzg