개요
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.dart와 second.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.pushNamed의 arguments 인자로 전달합니다.
파라메터 받기
다음은 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에서 내비게이션을 사용하여 화면을 전환할 때, 화면간 데이터를 주고받는 방법에 대해서 알아보았습니다.
제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!
앱 홍보
Deku가 개발한 앱을 한번 사용해보세요.Deku가 개발한 앱은 Flutter로 개발되었습니다.관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.
![[심통]현장에서 바로 써먹는 리액트 with 타입스크립트 : 리액트와 스토리북으로 배우는 컴포넌트 주도 개발, 심통](https://img1c.coupangcdn.com/image/affiliate/banner/7cba8cb0601eebaf88a17a0c3cf65a63@2x.jpg)