[플러터] 페이지(스크린) 간의 데이터 전송

안드로이드에서는 주로 intent.putExtra를 통해 간단한 데이터를 액비티비 간에 전송하곤 합니다. 하지만 플러터에서는 navigator에서 이러한 데이터 전송을 관리합니다.

push, pop 를 할때 데이터를 같이 실어보내주는 것이죠.
혹시 navigator에 대해 모르신다면 아래글을 먼저 읽고 와주세요. 코드도 저 예시에서 추가된 것입니다.

2020/05/07 - [개발/플러터] - [플러터] Navigator 에 대해 ( 화면 전환 )

[플러터] Navigator 에 대해 ( 화면 전환 )

< 전체 코드 >

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FirstPage(),
    );
  }
}
class FirstPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("첫 페이지"),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('다음 Page'),
          onPressed: () async{
            final person = Person('박보검',20);
            final result = await Navigator.push(
              context,
              MaterialPageRoute(builder: (context)=>SecondPage(person:person)),
            );
            print(result);
          },

        ),
      )
      ,
    );
  }
}



class SecondPage extends StatelessWidget{
  final Person person;
  SecondPage({@required this.person});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("2번 페이지"),
      ),
      body: Center(
          child : RaisedButton(
            child: Text('넘어온 이름 : '+ person.name),
            onPressed: (){
              Navigator.pop(context,'데아터 돌려줌');
            },
          ),
      ),
    );
  }
}

class Person{
  String name;
  int age;
  Person(this.name, this.age);
}

일단 코드를 보시면 Person 클래스를 만들고 이름과 나이를 가지도록 합니다.
그 후에 FirstPage 의 onPressed 를 변경합니다.

기존 onPressed

 onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context)=>SecondPage()),
            );

 

변경 onPressed

 onPressed: () async{
            final person = Person('박보검',20);
            final result = await Navigator.push(
              context,
              MaterialPageRoute(builder: (context)=>SecondPage(person:person)),
            );

 

Navigator의 push() 는 Future 타입의 반환값을 가집니다. 따라서 이 기능을 사용하기 위해서는 async 와 await 키워드를 사용하여 감싸주어여합니다.
따라서 onPressed 바로 옆에 async 를 쓰고 Navigator.push() 앞에 await 를 쓰고 result로 값을 받습니다.

이 부분을 다시 설명하자면
' push 하기 때문에 메모리에 값이 남아있는 스크린을 저장하고 있다가 다시 pop 될 시기에 result 로 값을 받는다. '

그리고 값을 넘겨주기 위해 SecondPage(person:person) 을 추가했습니다.

secondpage의 시작을 보시면 @required 가 있습니다. 이는 SecondPage는 생성할때 무조건 해당 변수를 받아와야한다는 것입니다.
다시 돌아가 보겠습니다. 이제 아래의 코드가 이해가 되실겁니다.
person를 필수로 요구하므로 person 클래스의 person을 받아온 것입니다.

그리고 생성할때 RaisedButton 의 child - text 로 해당 person.name 를 사용하여 표시해보았습니다.

마지막으로 다시 FirstPage에 값을 돌려주도록 하겠습니다.

앞써 말씀드렸다시피 현재 FirstPage는 스크린스택?? 에 쌓여 우리가 값을 반환해주기만을 기다리고 있습니다.

따라서 pop를 할때 '데이터 돌려줌' 을 같이 실어줍니다.

그럼 사진과 같이 console 창에 print(result) 의 결과가 보이게 됩니다.