Flutter와 Firebase로 Android iOS 둘 다 만들기 21 페이지에 데이터 넘기기

새 페이지로 라우팅할 때 데이터를 넘겨봅니다.

개요

로그인 정보를 한번 취득한 후, 다른 페이지에서 로그인 정보를 열람해야할 때 또 정보를 얻어내는 것은 낭비입니다.

라우팅 할 때 아규먼트를 넣어서 페이지를 생성할 수 있습니다.

다양한 방법이 있으나 현재 필요한 것은 3가지 입니다.

• 인자가 있는 라우터 등록
• 페이지에 받을 인자 추가
• 페이지 호출시 인자 추가

페이지 전환 시 데이터를 넘겨서 프로필 이미지를 완성해봅니다.

라우터 생성기

먼저 공식홈의 예제를 한번 읽어보고 오시기 바랍니다.

참고: https://flutter-ko.dev/docs/cookbook/navigation/navigate-with-arguments

사용자 정보를 넘기기 위해 라우터를 변경합니다.

main.dart

routes: {
  // ..
  // HomePage.routeName: (context) => HomePage(),  
},
onGenerateRoute: (settings) {
  switch (settings.name) {
    case HomePage.routeName: {
      return MaterialPageRoute(
        builder: (context) {
          return HomePage(user: settings.arguments);
        }
      );
    } break;
  }
  return MaterialPageRoute(
    builder: (context) => SplashPage()
  );
},

기존의 비워진 HomePage() 대신 HomePage(user: settings.arguments)가 대신하게 됩니다.

페이지 호출시

pages/auth.dart

// fu = firebase user
Navigator.pushReplacementNamed(context, '/home', arguments: fu);

파이어베이스 사용자 정보를 넘깁니다.

클래스 생성자 추가

pages/home.dart

const HomePage({Key key, this.user}) : super(key: key);
static const routeName = '/home';
final user;

// ..
return Scaffold(
  appBar: AppBar(
    // title: Text('HomePage'),
    title: Text(user.email),
        // ..

이렇게 해야 받을 수 있습니다.

그리고 이메일을 출력해봅니다.

소스

https://github.com/fkkmemi/ff2

영상