Navigator.push로 보낸 정보를 final result에 저장하여 해당 result를 snackbar에 표시하는 예제.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | /// 선택된 정보를 홈 화면의 snackbar에 보여줍니다./// 선택 창을 띄우고 결과를 기다리고 있습니다. 이제 결과 값을 갖고 무언가 할 차례입니다./// 이 예제에서는 결과 값을 보여줄 수 있도록 Snackbar를 띄우겠습니다./// 이 작업을 하기 위해 SelectionButton의 _navigateAndDisplaySelection 메서드를 수정할 것입니다.// SelectionScreen을 띄우고 navigator.pop으로부터 결과를 기다리는 메서드void _navigateAndDisplaySelection(BuildContext context) async { // Navigator.push는 Future를 반환합니다. Future는 선택 창에서 // Navigator.pop이 호출된 이후 완료될 것입니다. final result = await Navigator.push( context, MaterialPageRoute(builder: (context) => const SelectionScreen()), ); // 선택 창으로부터 결과 값을 받은 후, 이전에 있던 snackbar는 숨기고 새로운 결과 값을 // 보여줍니다. ScaffoldMessenger.of(context) ..removeCurrentSnackBar() ..showSnackBar(SnackBar(content: Text('$result')));} |
Reference: https://flutter-ko.dev/docs/cookbook/navigation/returning-data
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 | import 'package:flutter/material.dart';void main() { runApp( const MaterialApp( title: 'Returning Data', home: HomeScreen(), ), );}/// 홈 화면에서는 버튼 하나를 보여줄 것입니다. 버튼을 클릭하면 선택 창을 띄울 것입니다.class HomeScreen extends StatelessWidget { const HomeScreen({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('데이터 반환 데모'), ), // 다음 단계에서 SelectionButton 위젯을 만들 것입니다. body: const Center( child: SelectionButton(), ), ); }}/// 선택 창을 띄우는 버튼을 추가합니다./// 이제 SelectionButton을 만들 차례입니다. 선택 버튼은:/// 1. 사용자가 클릭했을 때, SelectionScreen을 띄울 것입니다./// 2. SelectionScreen이 결과를 반환할 때까지 대기할 것입니다.class SelectionButton extends StatelessWidget { const SelectionButton({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return ElevatedButton( onPressed: () { _navigateAndDisplaySelection(context); }, child: const Text('옵션을 선택하세요. 아무 옵션이나 선택하세요!'), ); } /// 선택된 정보를 홈 화면의 snackbar에 보여줍니다. /// 선택 창을 띄우고 결과를 기다리고 있습니다. 이제 결과 값을 갖고 무언가 할 차례입니다. /// 이 예제에서는 결과 값을 보여줄 수 있도록 Snackbar를 띄우겠습니다. /// 이 작업을 하기 위해 SelectionButton의 _navigateAndDisplaySelection 메서드를 수정할 것입니다. // SelectionScreen을 띄우고 navigator.pop으로부터 결과를 기다리는 메서드 void _navigateAndDisplaySelection(BuildContext context) async { // Navigator.push는 Future를 반환합니다. Future는 선택 창에서 // Navigator.pop이 호출된 이후 완료될 것입니다. final result = await Navigator.push( context, MaterialPageRoute(builder: (context) => const SelectionScreen()), ); // 선택 창으로부터 결과 값을 받은 후, 이전에 있던 snackbar는 숨기고 새로운 결과 값을 // 보여줍니다. ScaffoldMessenger.of(context) ..removeCurrentSnackBar() ..showSnackBar(SnackBar(content: Text('$result'))); }}/// 두 개의 버튼을 가진 선택 창을 보여줍니다./// 이제 선택 창을 만들 차례입니다. 선택 창은 두 개의 버튼을 갖고 있으며,/// 사용자가 하나의 버튼을 클릭하면 선택 창을 닫고 그 결과를 홈 화면에 알려줄 것입니다.class SelectionScreen extends StatelessWidget { const SelectionScreen({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('옵션 선택'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ /// 버튼을 클릭하면 선택 창을 닫습니다. /// 앞서 만든 두 개 버튼의 onPressed() 콜백을 수정할 차례입니다. /// 첫 번째 화면으로 데이터를 반환하기 위해, Navigator.pop() 메서드를 사용할 것입니다. /// 이 메서드 2번째 인자 result에 Future로 반환되는 SelectionButton의 결과를 추가합니다. /// Navigator.pop는 result라고 명시된 두 번째 인자를 선택적으로 받습니다. /// 만약 결과 값을 인자로 제공한다면, SelectionButton의 Future에 실려 반환될 것입니다. Padding( padding: const EdgeInsets.all(8.0), child: ElevatedButton( onPressed: () { // "옙!" 문자열과 함께 이전 화면으로 돌아갑니다... Navigator.pop(context, '옙!'); }, child: const Text('옙!'), ), ), Padding( padding: const EdgeInsets.all(8.0), child: ElevatedButton( onPressed: () { // "아뇨." 문자열과 함께 이전 화면으로 돌아갑니다. Navigator.pop(context, '아뇨.'); }, child: const Text('아뇨.'), ), ) ], ), ), ); }} |
데이터 반환 데모 실행 완료.
