【Flutter】 뒤로 버튼으로 전환 소스 화면에 값을 전달하는 방법

소개

Flutter 스마트폰 앱에 표준으로 제공되는 왼쪽 상단의 뒤로 버튼.

이번에는, 그 「뒤로 버튼을 눌렀을 때에 값을 건네주는 방법」에 대해 설명합니다.

뒤로 버튼으로 전환 소스 화면에 값을 전달하는 방법

【전이처 화면】 onWillPop에 값을 건네주는 처리를 추가

[전이 원 화면] 비동기 처리로 설정

순서대로 설명합니다.

【천이처 화면】onWillPop에 값을 건네주는 처리를 추가

전환 대상

return WillPopScope(
      onWillPop: () {
        // 第2引数に渡す値を設定
        Navigator.pop(context, '戻ります');
        return Future.value(false);
       },
     );

Navigator.pop() 의 제 2 인수에 건네주는 값을 설정합니다.
return Future.value(false); 도 필수.
여기의 인수를 true로 하면, 천이원의 화면까지 pop 되어 버리므로, false로 해 주세요.

【천이원 화면】비동기 처리로 한다

전환 소스

RaisedButton(
  child: Text('Go to Edit Page'),
  onPressed: () async {
    var result = await Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => EditPage(),
      ),
    );
    print(result);
  },
),

onPressed 에 async 를 붙이고, Navigator.push 에 await 를 붙여 비동기 처리로 하는 것이 포인트.result 에서 값을 받고 있습니다.

샘플 코드 예

이제 소개한 방법을 사용하여 값을 전달해 봅시다.
실천적인 내용으로 하기 위해, 「천이원에 값을 되돌려, 화면에 반영한다」곳까지 해 봅니다.

천이원 페이지는 StatefulWidget 로 구현해 보았습니다.
StatefulWidget 란, 상태(데이터)에 변경이 있을 때에 화면을 재묘화 할 수 있는 Widget 입니다.
▼의 사용법에 대해서는 이쪽을 부디.

Flutter의 기초

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  runApp(
    MaterialApp(
      home: MyHomePage(),
    ),
  );
}

// 遷移元
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _result;

  @override
  void initState() {
    super.initState();
    _result = "遷移先に移動";
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Home Page（遷移元）'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              _result,
              style: Theme.of(context).textTheme.headline5,
            ),
            RaisedButton(
              child: Text('Go to Edit Page'),
              onPressed: () async {
                var result = await Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) =>
                        // 引数に遷移元から遷移先へ渡す値を設定
                        EditPage(receive: 'Hello! from HomePage.'),
                  ),
                );
                print(result);
                setState(() {
                  _result = result;
                });
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _result = "遷移先に移動";
          });
        },
        tooltip: 'Increment',
        child: Icon(
          Icons.refresh,
        ),
      ),
    );
  }
}

// 遷移先
class EditPage extends StatelessWidget {
  final receive;
  const EditPage({Key key, this.receive}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () {
        // 第2引数に渡す値を設定
        Navigator.pop(context, 'Thank you! from 戻るアイコン');
        return Future.value(false);
      },
      child: Scaffold(
        appBar: AppBar(
          title: Text('Edit Page（遷移先）'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                receive,
                style: Theme.of(context).textTheme.headline5,
              ),
              RaisedButton(
                child: Text('Return'),
                onPressed: () =>
                    Navigator.of(context).pop('Thank you! from 戻るボタン'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

받은 값을 result 에 저장하고 setState() 내에서 자신의 _result 로 설정하여 업데이트하고 있습니다.

응용: Provider로 실현해 본다

StatefulWidget 대신 Provider를 사용하여 값을 업데이트해 봅시다.

최근에는 StatefulWidget보다 Provider로 갱신을 실시하는 방법이 추천되고 있으므로, 이쪽이 보다 실천적이라고 생각합니다.

▼이쪽의 기사에 정리했습니다!
【Flutter】Provider를 사용해 복수 화면에서 재묘화를 실시한다【초보자용】