Flutter 일기
참고 : https://api.flutter.dev/flutter/widgets/WillPopScope-class.html

WillPopScope

오늘 배워본 것은 WillPopScope

Registers a callback to veto attempts by the user to dismiss the enclosing ModalRoute.

ModalRoute 설명을 잘 못알아들어서 내부를 정확히 이해하진 못했다.ㅠㅠ
간단히 말하면, WillPopScope로 감싼 위젯이 언제 사라지고, 사라지지 않는지 조절할 수 있다 정도?

코드를 보면 사용법 자체는 간단하다.

일단 WillPopScope 는 아래와 같이 생겼다.

  const WillPopScope({
    Key? key,
    required this.child,
    required this.onWillPop,
  }) : assert(child != null),
       super(key: key);

///////////////////////////////////////////////////
final WillPopCallback? onWillPop;
typedef WillPopCallback = Future<bool> Function();

onWillPop 을 꼭 넣어주어야 하는데, WillPopCallback에 설정된 함수는 boolean 값을 반환하는 함수이다. true 이면 Navigator.pop()의 기능을 한다. false면 pop 안하겠지!
Navigator.pop() 은 가장 최근에 들어간 페이지를 뺀다고 생각하면 된다. 그냥 뒤로가기랑 똑같다.

코드 예시로 알아보자

공식페이지의 예제를 가져다가 돌려보았다.
늘 느끼는 건데 글자 좀 크게 해줬으면ㅠㅠ

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyStatefulWidget(),
    );
  }
}

/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

/// This is the private State class that goes with MyStatefulWidget.
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  bool shouldPop = true;

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        return shouldPop;
      },
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter WillPopScope demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                child: const Text(
                  'Push',
                  style: TextStyle(fontSize: 30),
                ),
                style: ElevatedButton.styleFrom(
                  padding: EdgeInsets.all(15.0),
                ),
                onPressed: () {
                  Navigator.of(context).push<void>(
                    MaterialPageRoute<void>(
                      builder: (BuildContext context) {
                        return const MyStatefulWidget();
                      },
                    ),
                  );
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                child: Text(
                  'shouldPop: $shouldPop',
                  style: TextStyle(fontSize: 30),
                ),
                style: ElevatedButton.styleFrom(
                  padding: EdgeInsets.all(15.0),
                ),
                onPressed: () {
                  setState(
                    () {
                      shouldPop = !shouldPop;
                    },
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

onWillPop에 shouldPop 값을 반환하도록 함수를 설정해두었는데, 두번째 버튼을 누르면 shouldPop의 값이 바뀐다.
true 이면 onWillPop의 반환값도 true가 되어서 Navigator.pop()을 수행할 수 있다. 반대로 false가 되면 이전 페이지로 돌아가지 못한다.
아래 실행화면을 보자.

오늘의 일기는 여기까지!