async await 예제

여기서는 Flutter 앱에서 Navigator.push, Navigator.pop, 그리고 await를 사용하는 예제를 만들어 보겠습니다.

이 예제는 HomeScreen에서 SecondScreen으로 이동하여, 값을 설정한 후 다시 HomeScreen으로 돌아오면서 설정한 값을 가져오는 방식으로 동작합니다.

예제: HomeScreen에서 SecondScreen으로 이동해 설정값을 받아오는 코드
HomeScreen - SecondScreen으로 이동하고 결과를 받아오는 메인 화면.
SecondScreen - 값을 설정하고, HomeScreen으로 반환하는 설정 화면.

main.dart

코드 복사
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: HomeScreen(),
  ));
}

HomeScreen.dart

코드 복사
import 'package:flutter/material.dart';
import 'SecondScreen.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String resultText = "No result yet"; // SecondScreen에서 받은 값을 저장

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Home Screen")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(resultText, style: TextStyle(fontSize: 24)),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                // SecondScreen으로 이동하고 결과값을 기다림
                final result = await Navigator.of(context).push(
                  MaterialPageRoute(
                  
                    builder: (context) => SecondScreen(),
                    
                    // return 을 사용할 수도 있다.
                    //return SecondScreen(가져갈 변수 쓰기);
                  
                  ),
                );

                // SecondScreen에서 값이 반환되면 업데이트
                if (result != null) {
                  setState(() {
                    resultText = result; // result 값을 UI에 반영
                  });
                }
              },
              child: Text("Go to Second Screen"),
            ),
          ],
        ),
      ),
    );
  }
}

SecondScreen.dart

코드 복사
import 'package:flutter/material.dart';

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Second Screen")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("Set a result and go back", style: TextStyle(fontSize: 24)),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // "Result from SecondScreen"을 반환하며 SecondScreen을 닫음
                Navigator.of(context).pop("Result from SecondScreen");
              },
              child: Text("Send Result"),
            ),
          ],
        ),
      ),
    );
  }
}

코드 설명
HomeScreen:

• HomeScreen은 resultText라는 변수를 가지고 있어 SecondScreen에서 돌아온 결과를 보여줍니다.
• "Go to Second Screen" 버튼을 클릭하면 Navigator.push를 사용하여 SecondScreen으로 이동하고, await를 사용하여 SecondScreen이 닫힐 때까지 기다립니다.
• result 값이 반환되면 setState로 resultText를 업데이트하여 UI를 갱신합니다.

SecondScreen:

• "Send Result" 버튼을 클릭하면 Navigator.pop을 사용하여 "Result from SecondScreen"이라는 값을 반환하며 SecondScreen을 닫습니다.
• 이 값은 HomeScreen의 result 변수에 저장되며, setState로 화면에 표시됩니다.
• 비동기 흐름
  • Navigator.push와 await를 사용하여 SecondScreen으로 이동하고 값이 반환될 때까지 기다립니다.
  • Navigator.pop으로 SecondScreen에서 값을 반환하면, await는 push의 결과값을 받아 resultText를 업데이트합니다.