[Flutter] 다른 화면으로 이동하면서 값도 같이 이동시키는 방법

※ 다른 화면으로 값을 이동시키는 방법은 이것만 있는게 아님에 주의한다

 

이 포스팅에선 TextField에 뭔가를 입력한 뒤 버튼을 누르면 입력한 값을 갖고 화면을 이동하는 방법에 대해 확인한다.

코드는 아래와 같다. 먼저 TextField다. 간단하게 만들었다.

 

import 'package:flutter/material.dart';

class BasicTextField extends StatelessWidget {
  const BasicTextField({
    super.key,
    required this.myController,
  });

  final TextEditingController myController;

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: myController,
      decoration: InputDecoration(
          border: OutlineInputBorder(),
          hintText: "값 입력"
      ),
    );
  }
}

 

그리고 이걸 사용하는 입력 화면 코드다.

 

import 'package:flutter/material.dart';
import 'package:test_flutter_app/other_screen.dart';
import 'package:test_flutter_app/components/basic_text_field.dart';
import 'package:test_flutter_app/components/button_text.dart';

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

  @override
  State<InputValueScreen> createState() => _InputValueScreenState();
}

class _InputValueScreenState extends State<InputValueScreen> {

  final myController = TextEditingController();

  @override
  void dispose() {
    super.dispose();
    myController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Padding(
          padding: EdgeInsets.all(20.0),
          child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                BasicTextField(myController: myController),
                SizedBox(height: 24.0),
                TextButton(
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => OtherScreen(
                          value: myController.text,
                        ),
                      ),
                    ).then((onValue) {
                      myController.clear();
                    });
                  },
                  child: const ButtonText(
                    title: "다음 화면 이동",
                  ),
                )
              ]
          ),
        ),
      ),
    );
  }
}

 

나머진 메인 함수에서 이 파일을 실행시키면 된다.

실행하면 아래 화면이 표시된다.

 

 

TextField에 아무 값이나 입력하고 다음 화면 이동 버튼을 누르면 화면 중앙에 입력한 값이 표시된다.

 

 

이게 가능한 이유는 InputValueScreen의 아래 코드에 있다.

 

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => OtherScreen(
      value: myController.text,
    ),
  ),
)
...

 

Navigator.push()의 2번 매개변수인 builder에서 OtherScreen의 생성자로 TextEditingController.text를 넣고 있다.

그리고 OtherScreen의 생성자에선 이 값을 받을 수 있게 생성자 매개변수와 필드를 정의해뒀다.

 

class OtherScreen extends StatelessWidget {
  OtherScreen({super.key, required this.value});

  String value;
  ...

 

this.value는 OtherScreen의 String value를 의미하며, 위와 같이 적으면 다른 파일에서 OtherScreen의 2번 매개변수로 값을 넣을 경우 OtherScreen에서 이를 사용할 수 있다.

이후 OtherScreen의 build()가 실행되면서 value에 담긴 값을 Text 위젯에 넣어줌으로써 화면에 표시되는 흐름이다.

 

정리하면 Navigator.push()를 호출하면서 OtherScreen의 생성자를 호출해 UI를 렌더링한다.

이 때 OtherScreen의 2번 매개변수로 String 값을 넘겨야 하는데, 매개변수로 이동시키고자 하는 값을 넣으면 OtherScreen에서 받아서 Text에 표시한다.

 

왜 작동하는지는 대충 알았지만 근본적으로 Navigator.push()가 무엇인지 알면 더 좋을 것이다.

 

https://api.flutter.dev/flutter/widgets/Navigator/push.html

push method - Navigator class - widgets library - Dart API

주어진 경로를 주어진 컨텍스트를 가장 밀접하게 둘러싸는 네비게이터로 push한다. 새 route와 이전 route(있는 경우)가 알림을 받는다. 네비게이터에 Navigator.observers가 있다면 해당 관찰자에게도 알림이 전송된다
새 route가 푸시되면 현재 경로 내에서 진행 중인 제스처가 취소된다. T 타입 인수는 route의 리턴값 타입이다. push된 경로가 네비게이터에서 팝업될 때 pop에 전달된 결과값으로 완료되는 Future를 리턴한다

 

정리하면 Navigator.push()는 새 route로 전환하기 위해 사용하는 함수다.

앱에선 screen 또는 page라는 전체 화면 요소에 위젯들을 표시한다. 안드로이드로 치면 액티비티, 프래그먼트다.

플러터에선 이 요소들을 route라고 하며 Navigator 위젯으로 관리한다. Navigator는 Route 객체 스택을 관리하고 push, pop과 pages라는 두 방법으로 스택을 관리한다.

참고로 안드로이드 등 특정 플랫폼에선 시스템 UI에서 뒤로가기 버튼을 제공해서 이걸 통해 스택의 이전 route로 돌아갈 수 있다.

이전 화면으로 돌아가려면 OtherScreen의 IconButton에 사용한 Navigator.pop(context)을 사용하면 된다.

 

leading: IconButton(
  icon: Icon(Icons.arrow_back),
  onPressed: () {
    Navigator.pop(context); // 이전 화면으로 이동
  },
)

 

 

참고한 사이트)

 

https://docs.flutter.dev/cookbook/navigation/passing-data

Send data to a new screen