결과 돌려받기

Coddy Flutter 여정의 목록과 화면 섹션에 포함된 레슨. 33개 중 22번째.

일부 화면은 질문을 하기 위해 존재합니다. 색상을 고르거나 날짜를 고르는 식이죠. 답은 질문한 화면으로 돌아가야 합니다. Navigator.pop으로 답을 전달할 수 있습니다.

Navigator.pop(context, 'Green');

반대쪽에서 Navigator.push는 Future를 반환합니다. 푸시된 화면이 팝될 때 나중에 도착하는 값입니다. await가 이를 기다리고, 기다리는 함수에는 async를 표시합니다.

onPressed: () async {
  final String? color = await Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => const ColorScreen()),
  );
  if (color != null) {
    setState(() {
      chosen = color;
    });
  }
},

결과는 String?입니다. 뒤로 가기 화살표를 눌러 나가면 아무것도 전송되지 않으므로 color는 null입니다. 이때 if는 이전 선택을 그대로 유지합니다. 이후 섹션에서 Future와 await의 전체 내용을 설명합니다.

챌린지

중급

색상을 선택하면 색상 화면은 닫히지만, 홈 화면에는 선택한 색상이 전달되지 않습니다. 선택한 색상이 돌아오도록 하세요.

색상 화면에서 색상을 함께 전달하며 화면을 닫으세요: Navigator.pop(context, color)
홈 화면에서 화면 이동을 await하고, 색상이 돌아오면 선택한 색상을 넣어 Your color: Green을 표시하세요.
뒤로 화살표를 눌러 나가면 기존 텍스트가 그대로 유지됩니다.

직접 해보기

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String chosen = 'none';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Paint')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Your color: $chosen', style: const TextStyle(fontSize: 24)),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const ColorScreen()),
                );
              },
              child: const Text('Choose a color'),
            ),
          ],
        ),
      ),
    );
  }
}

class ColorScreen extends StatelessWidget {
  const ColorScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Pick a color')),
      body: ListView(
        children: [
          for (String color in ['Red', 'Green', 'Blue'])
            ListTile(
              title: Text(color),
              onTap: () {
                Navigator.pop(context);
              },
            ),
        ],
      ),
    );
  }
}