한번에 여러 개의 파라미터 전달하기 Multiple Parameters Using go_router in Flutter

아래 문제는 Flutter 개발자들이 go_router를 사용하면서 자주 겪는 문제인 것 같아요!

이번에는 go_router를 사용하여 여러 개의 매개변수를 전달하는 방법에 대해 알아보려고 해요. 함께 살펴볼까요? 😊

에러 내용

"Vanilla flutter에서는 다음과 같이 다른 화면으로 여러 매개변수를 전달할 수 있었어요:

Navigator.of(context).push(MaterialPageRoute(
  builder: (_) => CatalogFilterPage(
    list: list,
    bloc: bloc,
  )
))

간단하고 쉬웠죠. 필요한 두 가지 매개변수인 list와 bloc을 전달하고, CatalogFilterPage에서 사용할 수 있었어요.

하지만 이제 go_router로 전환하고 문서를 살펴보니, 여러 데이터를 전달하는 방법을 찾을 수 없네요. 심지어 하나의 객체를 전달하는 것도 그렇게 좋은 방법은 아닌 것 같아요:

onTap: () =>
  context.pushNamed('SelectedCatalogItem', extra: list[index]),

그리고 라우터에서 올바른 유형으로 설정하기 위해 캐스팅을 사용해야 합니다:

builder: (context, state) => SelectedCatalogItem(
  item: state.extra as ListItemsModel,
),

하나의 매개변수를 전달하는 데에는 괜찮았지만, 이제 여러 매개변수를 전달하는 방법을 전혀 모르겠어요. 어떻게 해야 할까요? 여러 매개변수를 전달하는 것이 올바른 방법인가요?

P.S. 'CatalogFilterPage'와 같이 매개변수를 context.pushNamed('_', params: _)로 전달할 수 있다는 것을 알고 있지만, params는 Map<String, String> 유형이기 때문에 모델과 같은 매개변수를 전달할 수 없습니다."

답변:

go_router에서 여러 매개변수를 전달하는 방법에 대해 알아보겠습니다. 여러 매개변수를 전달하는 것은 가능합니다. 함께 살펴볼까요? 😊

1. Map을 사용하여 매개변수 전달이렇게 하면 'param1'과 'param2'라는 키와 해당 값으로 매개변수를 전달할 수 있습니다. 이후 해당 매개변수를 받을 때는 다음과 같이 사용할 수 있습니다:이 방법을 사용하면 여러 매개변수를 전달할 수 있습니다.
2. builder: (context, state) => SelectedCatalogItem( param1: state.params['param1'], param2: state.params['param2'], ),
3. context.pushNamed('SelectedCatalogItem', params: { 'param1': value1, 'param2': value2, });
4. 모델을 사용하여 매개변수 전달

   // 모델 직렬화
   String modelJson = jsonEncode(model);
   
   // 매개변수 전달
   context.pushNamed('SelectedCatalogItem', params: {
     'model': modelJson,
   });

   이후 해당 매개변수를 받을 때는 다음과 같이 사용할 수 있습니다:이 방법을 사용하면 모델을 매개변수로 전달할 수 있습니다.
5. builder: (context, state) => SelectedCatalogItem( model: Model.fromJson(state.params['model']), ),
6. 모델을 사용하여 매개변수를 전달하는 것도 가능합니다. 이 경우, 모델을 직렬화하고 전달해야 합니다. 예를 들어, json_serializable 패키지를 사용하여 모델을 직렬화할 수 있습니다. 다음은 예시입니다:

이렇게 여러 매개변수를 전달하는 방법이 있습니다. 원하는 방법을 선택하여 사용하시면 됩니다. 이제 여러 매개변수를 전달할 수 있게 되었네요! 😄