Navigator.push로 보낸 정보를 final result
에 저장하여 해당 result를 snackbar에 표시하는 예제.
/// 선택된 정보를 홈 화면의 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
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('아뇨.'),
),
)
],
),
),
);
}
}
데이터 반환 데모 실행 완료.