[Flutter] 내비게이션에서 파라메터 전달

2021-07-29 hit count image

Flutter에서 내비게이션을 사용하여 화면을 이동할 때, 파라메터를 전달하는 방법에 대해서 알아봅시다.

개요

Flutter에서 내비게이션을 사용하여 화면을 이동할 때, 다음 화면으로 파라메터를 전달할 때가 생깁니다. 이처럼, Flutter에서 다음 화면으로 파라메터를 전달하는 방법에 대해서 알아봅시다.

이 블로그 포스트에서 소개하는 소스 코드는 아래에 링크에서 확인할 수 있습니다.

프로젝트 준비

그럼 예제를 통해, 내비게이션을 사용하여 화면을 이동할 때, 파라메터를 전달하는 방법에 대해서 알아봅시다. 다음 명령어를 사용하여 프로젝트를 준비합니다.

flutter create parameters

내비게이션 및 화면 구성

내비게이션과 화면 구성을 하기 위해 우선, lib/main.dart 파일을 열고 다음과 같이 수정합니다.

import 'package:flutter/material.dart';

import 'package:parameters/home.dart';
import 'package:parameters/second.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: 'home',
      routes: {
        'home': (context) => const Home(),
        'second': (context) => const Second(),
      },
    );
  }
}

화면을 담당할 위젯인 home.dartsecond.dart을 추후 만들 예정입니다. 다음과 같이 나중에 만들 화면 위젯을 가져온 후,

...
import 'package:parameters/home.dart';
import 'package:parameters/second.dart';
...

다음과 같이 내비게이션을 구성합니다.

...
initialRoute: 'home',
routes: {
  'home': (context) => const Home(),
  'second': (context) => const Second(),
},
...

파라메터 전달

첫 화면인 home 화면 위젯을 만들기 위해 lib/home.dart 파일을 만들고 다음과 같이 수정합니다.

import 'package:flutter/material.dart';
import 'package:parameters/second.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('HOME'),
      ),
      body: Center(
        child: TextButton(
          child: Text('Go to Second screen'),
          onPressed: () {
            Navigator.pushNamed(
              context,
              'second',
              arguments: SecondScreenArguments(number: 5),
            );
          },
        ),
      ),
    );
  }
}

여기서 다음 화면인 second로 이동하는 부분을 자세히 살펴보면, 다음과 같은 코드를 사용하는 것을 알 수 있습니다.

...
Navigator.pushNamed(
  context,
  'second',
  arguments: SecondScreenArguments(number: 5),
);
...

SecondScreenArguments는 곧 만들 second.dart 파일에 다음과 같이 선언될 클래스입니다.

...
class SecondScreenArguments {
  final int number;

  SecondScreenArguments({required this.number});
}
...

이처럼 화면간 전달하고 받을 파라메터의 타입을 정의하여 Navigator.pushNamedarguments 인자로 전달합니다.

파라메터 받기

다음은 home 화면 위젯에서 파라메터를 전달받아 화면에 표시하는 second 화면 위젯을 만들어 봅시다. lib/second.dart 파일을 만들고 다음과 같이 수정합니다.

import 'package:flutter/material.dart';

class SecondScreenArguments {
  final int number;

  SecondScreenArguments({required this.number});
}

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

  @override
  Widget build(BuildContext context) {
    final args =
        ModalRoute.of(context)!.settings.arguments as SecondScreenArguments;

    return Scaffold(
      appBar: AppBar(
        title: Text('SECOND'),
      ),
      body: Center(
        child: Text('${args.number}'),
      ),
    );
  }
}

앞에서도 살펴보았지만, 우선 전달받을 파라메터의 타입을 정의하기 위해 SecondScreenArguments 클래스를 선언하였습니다.

...
class SecondScreenArguments {
  final int number;

  SecondScreenArguments({required this.number});
}
...

이렇게 선언한 타입을 가지고 다음과 같이 ModalRoute.of(context)!.settings.arguments을 사용하여 파라메터를 전달받습니다.

...
final args = ModalRoute.of(context)!.settings.arguments as SecondScreenArguments;
...

마지막으로 이렇게 전달받은 파라메터에서 사용할 데이터를 args.number와 같이 접근하여 사용합니다.

...
child: Text('${args.number}'),
...

완료

이것으로 Flutter에서 내비게이션을 사용하여 화면을 전환할 때, 화면간 데이터를 주고받는 방법에 대해서 알아보았습니다.

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!

책 홍보

스무디 한 잔 마시며 끝내는 React Native 책을 출판한지 벌써 2년이 다되었네요.
이번에도 좋은 기회가 있어서 스무디 한 잔 마시며 끝내는 리액트 + TDD 책을 출판하게 되었습니다.

아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.

스무디 한 잔 마시며 끝내는 React Native, 비제이퍼블릭
스무디 한 잔 마시며 끝내는 리액트 + TDD, 비제이퍼블릭
Posts