flutterflow 사용해서 앱 만들기

프로그래밍/flutterflow로 어플만들기 2023. 4. 7. 22:57

728x90

(6) 페이지간 파라미터 전달

지금까지 기출 시험 리스트가 나열되는 "메인 페이지"와

기출 문제가 나오는 "문제 페이지" 두 개를 각각 작성하였다.

이제 메인의 기출시험 카드를 클릭하면 그 카드에 해당되는 기출문제가 나오도록

두 페이지를 파라미터로 연결하는 작업을 해보겠다.

기출 시험 카드를 선택하고 오른쪽의 액션 플로우로 이동해서 "Add Action" 버튼을 클릭한다.

그리고 카드를 클릭할경우 문제리스트 페이지로 이동하도록 선택을 한다.

그리고 이동시 전달할 파라미터를 Parameters 섹션에서 선택할 수 있다.

이동하는 페이지에 이미 정의된 파라미터가 있을 경우

Pass 버튼을 선택해서 기존 파라미터를 선택하고

기존에 설정된 파라미터가 없거나 새로운 파라미터가 없을 경우

Define 버튼을 클릭해서 해당 페이지로 이동해서 파라미터를 정의한다.

기출문제 페이지에서 시험년도(year), 시험타입(examtype), 과목(subject) 세 개의 파라미터를 설정하였다.

파라미터를 설정하다 보니 컬렉션에 시험 아이디와 이름 필드도 추가하는 것이 좋을 것 같다.

그리고 원래 메인 페이지에 돌아와서 설정한 파라미터별로 전달할 값을 선택한다.

그리고 이렇게 전달한 파라미터 값을 firestore데이터를 가져오는 query에 필터로 아래와 같이 설정하였다.

firestore 컬렉션 필드 이름과 전달한 파라미터가 같도록 필터링 한 결과를 가져오도록 설정하였다.

이때 주의해야할 게 firestore 컬렉션 필드 타입과 전달하는 파라미터 타입이 맞아야 한다.

처음에 전달하는 파라미터 값을 문자열(string)으로 선택하니

위와 같이 페이지 파라미터들이 붉은 색으로 변하면서 아무것도 선택할 수가 없었다.

마지막으로 메인 페이지에서 카드를 클릭시 그 시험에 해당되는 기출 문제가 나오는 것을 확인하였다.

그런데 메인 페이지에서는 어울렸던 폰트가 시험 페이지에서는 어울리지 않는 것을 발견했다.

시험에 어울리는 폰트를 추가하고 이제 시험문제 페이지 디자인도 손을 좀 봐야할 것 같다.

그리고 이용자가 문제를 클릭할 경우 맞거나 틀릴경우 액션 설정하는 것,

시험문제풀이 결과를 저장하는 내용을 이어서 하겠다.

참고

https://docs.flutterflow.io/data-and-backend/passing-data

Passing Data - FlutterFlow Docs

A Document Reference points to the location where the record (actual data) resides in the Firestore collection. You can use the document reference to retrieve the data associated with that record. For example, you could use the user document reference insi

docs.flutterflow.io