[Flutter] 코드팩토리 중급 Flutter 진짜 실전!

Flutter 코드팩토리 중급 Flutter 진짜 실전!강의를 보면서 공부하는 시간을 가져보자!

Dio를 사용하기 위해서는 먼저 패키지를 설치해줘야 한다.패키지 설치 방법 ①-1. pubspec.yaml에 작성하기①-2. 터미널 창에 flutter pub add dio 작성하기 그럼 본격적으로...로그인 버튼과 회원가입 버튼을 api와 연동해보자! (일단, Tex

\[Flutter] Dio 사용해서 API 요청하기-①이걸 보고 왔다면 뭔가 조금 이상하다고 느껴질 수 있는 부분이 있다...바로 이 부분인데, 보면 직접 하드 코딩해서 입력해 놓은 것을 볼 수 있다.(바보야! 난 그걸 원한 게 아니라굿~!!!)그렇다면 내가 원하는 건

정상적으로 로그인된 경우 route를 바꿔 메인 화면에 보여 주고싶은 페이지로 이동되게 해 보자!그 전에 폴더 구성에 대해 잠깐 이야기하고 가보자!아래 사진은 현재까지 생성된 폴더와 파일들...asset → 폰트, 이미지 등common → 모든 기능들에서 공통으로 필요

지금까지 작성한 코드 상태에서 앱을 재시작하면 다시 로그인을 해야 하는 번거로운 문제가 발생함!✔ 리프레시 토큰, 엑세스 토큰을 발급 받은 이유 👉 프론트에서 저장해 놓고 지속적으로 사용하기 위함 이 문제를 해결하려면? 데이터베이스 같은 곳에 저장해야 하는데, 토큰처

앞선 시리즈에 작성한 splasch_screen.dart 전체 코드에다가 요렇게 추가만 해주면... 토큰이 삭제된다. 그리고 deleteToken(); 주석 처리하고, checkToken(); 주석 처리 해제하고 재실행하면, 토큰이 삭제됐기 때문에 다시 로그인 화면이

default_layout.dartview/root_tab.dart 그런데!!!index가 선택될 때마다 상태가 변경되니까 StatelessWidget에서 StatefulWidget으로 수정해주자!수정된 코드는 아래와 같음

① TabBarView 위젯 생성하기 코드 추가 후, 실행하니 오류 남... (앱 실행이 안 됨) 오류 원인은 Controller가 없기 때문! ② Controller 선언해서 집어 넣기 Controller는 일반적으로 내가 생성해서 Controller 파라미터에

① RestaurantCard 작업할 폴더 및 파일 생성하기restaurant과 관련된 작업을 따로 묶어서 할 예정이므로 lib 폴더에 restaurant 폴더를 따로 생성해주자!그리고 restaurant/view 폴더 생성하고 restaurant_screen.dart

이전 거는 샘플로 데이터를 넣어 둔 건데, 이제 실제로 데이터를 가져와서 RestaurantCard에 넣는 작업을 해 볼 거임!근데 몇 개 다른 게 있어서 restaurant_card.dart 코드로 가서 수정해주겠음.이제 본격적으로 Restaurant Paginati

데이터 모델링을 해야 하는 이유는? item'thumbUrl' 이 맵... Map의 문제에서부터 온다. 오타가 발생한 존재하지 않는 값임에도 에러가 나지 않음. 이게 가장 큰 문제! 이를 막기 위해 class로 데이터를 모두 모델링 해준다.① 새로운 폴더 및 파일 생성

dart의 factory 키워드는 flutter에서 모델 클래스를 만들 때 자주 사용되는 예약어로 상속에서 많은 장점을 보임이런 식으로 상속을 할 수 있음.그런데 Factory Constructor는 어떻게 추가할 수 있을까? 그리고 특이하게 자식 클래스인 child를

RestaurantCard를 fromModel Constructor을 사용해 모델을 바로 내부에서 맵핑해보자!RestaurantModel.fromJson이라는 Constructor가 생성된 상태!그리고 RestaurantCard 역시 RestaurantModel.fro

① 파일 생성restaurant/view/restaurant_detail_screen.dart 생성② 레이아웃 return Container(); -> return const DefaultLayout(); 수정해주고임시로 title 값주기③ 이동 매핑 구현스크린에서 R

RestaurantCard뿐만 아니라 그 아래에 있는가게 상세 설명, 메뉴 선택 옵션, 장바구니 버튼 등의 정보도 구현해야 함!그런데 Restaurant API를 보면 상품 정보, 상세 설명 정보도 없음...그럼 어디에서 가져올 수 있는 걸까? 바로 아래 /restau

URL에서 가져온 데이터를 화면에 보여주자! 그런데... 그러기 위해서는 메뉴 카드를 만들어야 한다. 그럼 메뉴 카드들을 만들어보자!메뉴 카드들은 어느 폴더에 넣는 게 좋을까?처음에 난 당연히 restaurant 폴더에 넣어야 될 거라고 생각했다.하지만! 스웨거 API

아직 restaurant_detail_screen은 화면이 스크롤되지 않음!메뉴가 많다면 스크롤시켜서 다른 메뉴들도 볼 수 있게 해야겠지?스크롤되게 해 보자!ListView로 할 수도 있겠지만, 여기에선 적합하지 않음.왜냐면 상품들을 list로 집어넣고, 그 밑에 계속

현재 상세 페이지 메뉴는 모두 같은 이미지이다.내가 원하는 건 이게 아니라 각각 레스토랑에 해당되는 메뉴 사진들이 나오는 거!그 데이터를 보여주기 위해서는 API 연동이 필요함.왜? 👉 API에 각 메뉴 정보들도 담겨있으니까~여기가 바로 레스토랑 상세 정보를 가져오는

스웨거 Restaurant Detail Model에는 기존 데이터에서 detail, products 2개의 파라미터가 추가되어 있는 걸 볼 수 있다. ① Restaurant Detail Model 만들기 restaurant/model/restaurantdetail

아직 Detail Screen에서 각 메뉴(product)들은 불러와지지 않고 있다.데이터가 잘 들어올 수 있도록 ProductCard를 모델링, 매핑해보자!① 일반 constructor에서 받아오기product_card.dart 코드를 보면 샘플로 넣어둔 것을 볼 수

현재 엑세스 토큰의 유효 기간은 5분, 리프레시 토큰은 하루로 설정되어 있음 그래서 토큰 만료로 인해 중간중간 오류가 발생하는 문제가 생김ㅠㅠ 현재 이런 에러를 처리할 수 있는 로직은??? 방법은 다양한데, 그중에서도 가장 평범한 방법인 로그아웃 시켜보자! spla

지금까지 했던 from json을 보면 굉장히 반복적!그냥 json 값에 똑같은 이름을 넣어주는 것 밖에 없음...이 걸 어떻게 최소화할 수 있는지 추후 알아보겠음.레스토랑을 눌렀을 때 로딩이 되는데,그런데 사실 이미 메모리 안에 이미지부터 아이콘쪽까지 정보들은홈페이지

📍 JsonSerializable Dart와 Flutter에서 JSON 데이터를 쉽게 직렬화(serialize)하고 역직렬화(deserialize)할 수 있도록 도와주는 패키지이다.이 패키지를 사용하면 클래스를 JSON 형식으로 변환하거나 JSON 데이터를 클래스 인

RestaurantDetailModel도 JsonSerializable 작업을 한 번 해보자!

📍 Retrofit REST API를 위한 HTTP 클라이언트를 생성하는 라이브러리이다. Retrofit은 간편하게 사용 가능하고 다양한 http 요청, 옵션, 기능을 제공한다. ① Retrofit 패키지 다운로드 및 설치 Retrofit을 어떤 위치에 사용하

@Headers에 입력한 토큰은 강제로 입력한 토큰임. 이걸 어떻게 효율적으로 발급받아 사용할 수 있을까? 바로 토큰을 자동으로 관리하는 것! 이때 말하는 자동 관리란? 앱을 재시작 또는 다시 로그인했을 때 리프레시 토큰, 엑세스 토큰을 발급받는다. 그런데 엑세스

① 3) 에러가 났을 때 먼저 작업해보기 onError를 작성하면 자동완성 됨. 에러가 발생했을 땐 어떤 상황을 캐치하고싶은지가 중요하다. 현재 나는 토큰에 문제가 있을 때 401 에러 났을 때 캐치하고싶음! super.onError(err, handler); 앞에

① 2) 응답을 받을 때 작업하기dio.dart 전체 코드

CustomInterceptor를 사용해서 실제 detail 정보를 가져오기에 성공함!마찬가지로 RestaurantScreen의 dio에도 같은 과정을 진행해보자! ① dio에 Interceptor 추가하기restaurant_screen.dart로 가서 dio에 In

RestaurantRepository 안에 paginate( ) 함수를 만들었고,이 함수는 // http://$ip/restaurant/ 이 URL에다가 요청을 보내는 함수임.@RestApi( )라고 달아뒀기 때문에 .g.dart 파일에요청 보내는 방식이 자

[Flutter] 상태관리-①Dio에 Provider 적용

① RestaurantRepository를 Provider 안에 넣기①-1. restaurant_repository.dart 코드에서 RestaurantRepositoryProvider를 불러준다. ①-2. RestaurantRepository 생성①-3. dio 값