Flutter: 이전 화면에 데이터 반환하기(Return data from a screen)

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('아뇨.'),
              ),
            )
          ],
        ),
      ),
    );
  }
}

데이터 반환 데모 실행 완료.

snackbar에 옙/아뇨를 반환.

이것도 살펴보세요!

WSL 개발 환경 설정

WSL로 개발 환경 설정하는 법 https://learn.microsoft.com/ko-kr/windows/wsl/setup/environment 1. 아래 명령으로 WSL을 설치하고, 리눅스 사용자 이름과 암호 …

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다