[Flutter] 이전 화면에 데이터 반환하기

Flutter 이전 화면에 데이터 반환하기

1.홈 화면을 정의
2.선택 창을 띄우는 버튼을 추가
3.두 개의 버튼을 가진 선택창 보여주기
4.하나의 버튼을 클릭하면 선택창을 닫음.
5.선택된 정보를 홈 화면의 snackbar에 보여줌.


1.홈 화면

class HomeScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        title: Text('Returning data demo'),
      ),
      //다음 단계에서 SelectionButton 위젯을 만들 것이다.
      body: Center(child: SelectionButton()),
    );
  }
}

2.선택창을 띄우는 버튼을 추가합니다.
1)사용자카 클릭했을 때, SelectionScreen을 띄울 것이다.
2)결과를 반환할 때까지 대기할 것이다.

class SelectionButton extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return RaisedButton(
      onPressed: () {
        _navigateAndDisplaySelection(context);
      },
      child: Text('Pick an option'),
    );
  }

  //SelectionScreen을 띄우고 navigator.pop으로부터 결과를 기다리는 메서드
 

_navigateAndDisplaySelection(BuildContext context) async{
    //Navigator.push는 Future를 반환합니다. Future는 선택 창에서
    //Navigator.pop이 호출된 이후 완료될 것입니다.
    final result = await Navigator.push(
      context,
      //다음 단계에서 SelectionScreen을 만들 것이다.
      MaterialPageRoute(builder: (context) => SelectionScreen()),
    );
  }
}

3.두 개의 버튼을 가진 선택창을 보여줍니다.
UI정의

class SelectionScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        title: Text('pick option'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: RaisedButton(
                onPressed: (){
                  //Yep문자열과 함꼐 이전화면으로 돌아감.
                },
                child: Text('Yep!'),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: RaisedButton(
                onPressed: (){
                  //"Nope" 문자열과 함께 이전 화면으로 돌아갑니다.
                },
                child: Text('Nope.'),
              ),
            )
          ],
        ),
      ),
    );
  }
}

4. 하나의 버튼을 클릭하면 선택창을 닫습니다.
Yep버튼

RaisedButton(
  onPressed: (){
    //Yep버튼은 결과로 "Yep!"을 반환합니다.
    Navigator.pop(context, 'Yep!');
  },
  child: Text('Yep!'),
);

5. 선택된 정보를 홈 화면의 snackbar에 보여줍니다.

_navigateAndDisplaySelection(BuildContext context) async{
  final result = await Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SelectionScreen()),
  );

  //선택 창으로부터 결과 값을 받은 후, 이전에 있던 snackbar는 숨기고 새로운 결과 값을 보여줍니다.
  Scaffold.of(context)
    ..removeCurrentSnackBar()
    ..showSnackBar(SnackBar(context: Text("$result")));
}

 

참조 :

https://flutter-ko.dev/docs/cookbook/navigation/returning-data

이전 화면에 데이터 반환하기