데이터 돌려받기
어떤 경우에, 새로운 스크린으에서 데이터를 받기를 원합니다. 사용자에게 두 가지 선택사항을 보여주는 새로운 화면을 생각해봅니다. 사용자가 둘 중 하나를 선택해서 탭하면, 원래 화면에서는 사용자가 선택한 값을 돌려받고 싶어할 것입니다.
어떻게 하면될까요? Navigatior.pop을 사용하면 됩니다.
디렉션
1. home 스크린 작성
2. selection 스크린을 실행시킬 버튼 추가하기
3. 두 가지 버튼을 가지는 seletion 스크린을 보여주기
4. 버튼을 탭하면 selection 스크린 닫기
5. home 스크린의 스낵바에서 선택항목을 보여주기
1. home 스크린 작성
selection 스크린을 실행시킬 버튼 추가하기
1. 탭하였을 때 SelectionScreen을 실행시킨다.
2. SelectionScreen이 결과를 리턴하기를 기다린다.
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Returning data home"),
),
body: Center(
child: Builder(
builder: (context) {
return RaisedButton(
child: Text("Pick"),
onPressed: () async {
final result = await Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SelectionScreen(),
),
);
Scaffold.of(context)
..removeCurrentSnackBar()
..showSnackBar(
SnackBar(
content: Text("$result"),
),
);
},
);
},
),
),
);
}
}
2. Selection 스크린 작성
-.이제 SelectionScreen을 빌드해봅시다. 여기엔 두 버튼이 있습니다. 사용자가 버튼을 탭했을 때, SelectionScree을 닫고 어떤 버튼을 탭하였는지 HomeScreen에게 알려줍니다.
이제 UI를 작성하면서 어떻게 데이터를 반환하는지 알아 봅시다.
-. 버튼을 탭하면 SelectionScreen 닫기
이제 onPressed 콜백을 업데이트 해봅시다. HomeScreen으로 데이터를 반환하기위해서는 Navigator.pop 메소드를 사용해야합니다.
Navigator.pop은 result라는 옵셔널 파라미터를 받습니다. 만약 결과를 넘기면, SelectionButton의 Future로 반환될 것입니다.
class SelectionScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Returning data selectoin")),
body: Center(
child: Column(
children: <Widget>[
RaisedButton(
onPressed: () {
Navigator.pop(context, 'Yep!');
},
child: Text("Yep!")),
RaisedButton(
onPressed: () {
Navigator.pop(context, 'Nope!');
},
child: Text("Nope!"))
],
),
),
);
}
}
[전체소스]
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(title: "Returning data", home: HomeScreen());
}
}
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Returning data home"),
),
body: Center(
child: Builder(
builder: (context) {
return RaisedButton(
child: Text("Pick"),
onPressed: () async {
final result = await Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SelectionScreen(),
),
);
Scaffold.of(context)
..removeCurrentSnackBar()
..showSnackBar(
SnackBar(
content: Text("$result"),
),
);
},
);
},
),
),
);
}
}
class SelectionScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Returning data selectoin")),
body: Center(
child: Column(
children: <Widget>[
RaisedButton(
child: Text("One"),
onPressed: () {
Navigator.pop(context, "One");
},
),
RaisedButton(
child: Text("Two"),
onPressed: () {
Navigator.pop(context, "Two");
},
)
],
),
),
);
}
}