현재 상세 페이지 메뉴는 모두 같은 이미지이다.
내가 원하는 건 이게 아니라 각각 레스토랑에 해당되는 메뉴 사진들이 나오는 거!
그 데이터를 보여주기 위해서는 API 연동이 필요함.
왜? 👉 API에 각 메뉴 정보들도 담겨있으니까~
여기가 바로 레스토랑 상세 정보를 가져오는 부분!
그럼 이제 이 API 엔드 포인트를 갖고 레스토랑 정보를 가져와보자!
① 클릭한 레스토랑의 아이디 받기
restaurant_detail_screen.dart로 가서 코드 추가하기
누른 레스토랑 id를 detail screen으로 그대로 넘겨주면,
detail screen에서는 그 id를 기반으로
/restaurant , /rid에 그 id를 집어 넣어서 요청을 함.
그러면 상세 정보가 따라올 거임!
② id 넣어주기
restaurant_detail_screen을 불러오고 있는 부분에 id 넣어주기!
restaurant_detail_screen.dart 코드 쪽으로 가서 수정하기!
그러면 id를 무조건 detail screen에서 가져올 수 있음!
③ Future 함수 넣기
restaurant_detail_screen.dart 코드에 Future 함수 넣기
dio를 사용해 http 요청해서 API를 불러온다.
이 응답을 기반으로 화면을 렌더링할 수 있게 됨!
④ Future Builder 넣어주기
Future Builder도 넣어주자!
기존에 작성했던 CustomScrollView( ) 내용들은 일단 잘라내주고, FutureBuilder 작성 하고 그 안에 다시 붙여 넣여 준다.
print(snapshot.data);으로 data가 잘 받아와지는지 찍어보자!
앱을 재실행하고 디테일 스크린으로 들어가면 이렇게 data가 잘 받아와지는 걸 확인할 수 있다.
