Flutter 앱에서 화면 전체에 데이터를 전달하는 방법.

독자 여러분, 다른 블로그에 다시 오신 것을 환영합니다. 그래서 최근에 플러터 앱을 만들고 있었는데 한 화면에서 다른 화면으로 데이터를 전달해야 합니다. 또한 플러터 개발의 초보자라면 한 화면에서 다른 화면으로 데이터를 전달하는 방법도 알아야 할 수도 있습니다. 검색해보니 플러터로 한 화면에서 다른 화면으로 데이터를 전달하는 두 가지 방법이 있었습니다. 둘을 하나씩 봅시다.

그 전에 한 화면에서 다른 화면으로 데이터를 보내는 상황을 만들어야 합니다. 한 화면에 사용자 이름을 입력하고 사용자가 로그인할 때 누르는 텍스트 상자가 있다고 가정해 보겠습니다. 그 후 사용자는 "Welcome username"메시지가 표시되는 다음 화면으로 이동합니다.

여기서는 먼저 첫 번째 화면에서 사용자의 이름을 가져온 다음 두 번째 화면에서 이름을 전달하여 환영 메시지를 표시합니다.

데이터를 전달하는 두 가지 방법은 다음과 같습니다.

새 클래스의 생성자 전달

경로 설정에서 전달

생성자 전달

두 번째 화면의 생성자를 사용하여 첫 번째 화면에서 사용자 이름을 전달하는 방법을 살펴보겠습니다.

class FirstScreen extends StatelessWidget {
  const FirstScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: SizedBox(
        width: 300,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const TextField(
                decoration: InputDecoration(
              hintText: "Enter your Name",
              labelText: "Name",
              border: OutlineInputBorder(),
            )),
            const SizedBox(
              height: 20,
            ),
            ElevatedButton(onPressed: () {}, child: const Text("Login"))
          ],
        ),
      ),
    );
  }
}

이것은 FirstScreen 클래스에 대한 코드입니다. 사용자로부터 입력을 받는 TextField와 다음 화면으로 이동하는 ElevatedButton이 있는 Column 위젯만 있습니다.

이제 두 번째 화면 클래스의 코드를 살펴보겠습니다. 생성자 아래에는 버튼을 누를 때 첫 번째 화면에서 두 번째 화면으로 값을 전달하는 데 사용할 name이라는 문자열 필드가 있습니다.

class SecondScreen extends StatelessWidget {
   const SecondScreen(this.name, {Key? key}) : super(key: key);
  final String name;
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

이제 텍스트 필드의 값을 읽고 로그인 버튼의 onPressed 기능도 설정하는 텍스트 편집 컨트롤러를 만들어 보겠습니다. 또한 두 번째 화면에 텍스트 위젯을 표시합니다. 그리고 마지막으로 전체 코드는 다음과 같을 것입니다.

class FirstScreen extends StatelessWidget {
  FirstScreen({Key? key}) : super(key: key);
final TextEditingController controller = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Center(
      child: SizedBox(
        width: 300,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            TextField(
                controller: controller,
                decoration: const InputDecoration(
                  hintText: "Enter your Name",
                  labelText: "Name",
                  border: OutlineInputBorder(),
                )),
            const SizedBox(
              height: 20,
            ),
            ElevatedButton(
                onPressed: () {
                  String name = controller.text;
         Navigator.push(context, MaterialPageRoute(
         builder: (context) => SecondScreen(name)));
                },
                child: const Text("Login"))
          ],
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  const SecondScreen(this.name, {Key? key}) : super(key: key);
final String name;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("Welcome $name"),
      ),
    );
  }
}

원하는 경우 두 번째 화면의 이름 필드를 대괄호 안에 넣고 이름이 NULL인 경우 일부 기본값을 표시하여 선택적 인수로 만들 수도 있습니다.

산출:

경로 설정에서 통과

이제 생성자의 도움으로 데이터를 전달하는 방법을 보았으므로 경로에서 데이터를 전달하는 것과 유사하지만 유일한 차이점은 경로 설정에서 모든 유형의 데이터를 전달할 수 있다는 것입니다. 예를 들어 이것을 봅시다.

Navigator.push로 화면을 푸시할 때 페이지 경로를 제공합니다. 그리고 그 경로 내에서 데이터를 전달할 수도 있습니다.

Navigator.push(context, MaterialPageRoute(
                        builder: (context) => SecondScreen(name),
                        settings: RouteSettings(arguments: name)));

여기에서 RouteSettings의 인수 내부에 이름을 전달했습니다.

그리고 두 번째 화면에서 데이터를 가져오기 위해 modelroute를 사용합니다. 데이터를 개체로 가져오시겠습니까? 따라서 첫 번째 화면에서 보낸 데이터 유형으로 변환해야 합니다.

String name = ModalRoute.of(context)!.settings.arguments as String;

마지막으로 경로 설정이 있는 전체 코드는 다음과 같습니다.

class FirstScreen extends StatelessWidget {
  FirstScreen({Key? key}) : super(key: key);
final TextEditingController controller = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Center(
      child: SizedBox(
        width: 300,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            TextField(
                controller: controller,
                decoration: const InputDecoration(
                  hintText: "Enter your Name",
                  labelText: "Name",
                  border: OutlineInputBorder(),
                )),
            const SizedBox(
              height: 20,
            ),
            ElevatedButton(
                onPressed: () {
                  String name = controller.text;
                      Navigator.push(context,
                      MaterialPageRoute(
                      builder: (context) => const SecondScreen(),
                      settings: RouteSettings(arguments: name)));
                },
                child: const Text("Login"))
          ],
        ),
      ),
    );
  }
}
class SecondScreen extends StatelessWidget {
  const SecondScreen({Key? key}) : super(key: key);
@override
  Widget build(BuildContext context) {
    String name = ModalRoute.of(context)!.settings.arguments as String;
    return Scaffold(
      body: Center(
        child: Text("Welcone $name"),
      ),
    );
  }
}

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