Hello App (35) 썸네일형 리스트형 Flutter _ Hero Widget 230604 지난 포스팅에서 우리는 Navigator를 이용하여 위젯간의 이동을 만들어 마치 또 다른 화면이 나오게끔 만들었다. 하지만 이러한 화면의 전환 말고도 Flutter에는 Hero라는 위젯을 통해 애니메이션 효과를 주어 마치 화면이 전환 된것처럼 보이게 할 수 있다. 1. Hero 현재 우리는 썸네일을 클릭하면 DetailScreen 위젯으로 넘어가는데 이번에는 Hero 위젯을 사용하여 클릭했을때 썸네일이 확장되어 화면이 이동된것처럼 만들어보자. webtoon_widget 파일에서 우선 우리의 주 목표 웹툰의 썸네일을 가지고있는 Container를 Hero 위젯으로 감싼다. 감싸는 Hero 위젯은 위의 사진과 같이 tag과 child라는 인자를 필수로 필요로한다. 여기서 tag란 Hero의 핵심.. Flutter _ Detail Screen 230603 오늘은 웹툰 이미지를 클릭하면 해당 웹툰의 상세페이지로 이동하는것을 해보겠다. 1. Detail Webtoon Screen 우선 widget 파일에 webtoon_widget.dart 파일을 생성한다. 그리고 Webtoon이라는 이름으로 StatelessWidget을 생성한다. 그리고 HomeScreen에 있는 웹툰의 썸네일과 제목이 있는 Column을 그대로 Webtoon의 build()의 return 값으로 전달한다. 그리고 가져온 코드에는 webtoon의 title, thumb, id가 필요하기에 위와 같이 선언해준다. 그리고 잘라내기한 Column대신에 Webtoon() 위젯을 위와 같이 선언해준다. 그리고 Webtoon 클래스의 Container로 돌아와 webtoon.title, .. Flutter _ Webtoon Card 230602 오늘은 우리가 출력한 웹툰 제목 위에 썸네일을 삽입해 보자. 1. Webtoon Card 우선 썸네일을 삽입할 공간을 만들기 전에 코드를 좀 정리해보자. snapshot에 대한 조건문의 return값인 ListView.separated 코드 로직을 코드 작업 표시의 Extract method를 사용하여 추출해 정리하면 깔끔해질것 같다. makeList라는 이름으로 method로 추출하였고 하단에 위와같이 추출된 method가 생성되었다. 그리고 return 자리에 위와 같이 Column을 만들고 children으로 SizedBox와 makeList(snapshot)을 선언해 주었더니 위와 같이 error가 뜬다. 해당 error가 뜨는 이유는 현재 Column에는 SizedBox와 ListV.. Flutter _ ListView 230601 오늘은 지난 포스팅에 이어서 Toonflix_home_screen에서 작업을 이어가겠다. 만약 snapshot에 Text를 대신할 무언가를 넣고 싶다면 위와 같이 CircularProgressIndicator()도 넣을 수 있다. 위와 같이 Loading 텍스트 대신로딩 아이콘이 뜬다. 그리고 우리의 Json 데이터와 같이 여러 항목을 나열하고 싶은 경우 ListView를 사용할 수 있다. 1. ListView 현재 snapshot에는 Json 데이터를 리스트로 변환한 데이터들이 들어있는데, ListView를 사용하여반복문으로 webtoon에 snapshot.data!를 넣어준다. 이때 !가 들어가는 이유는 snapshot에 데이터가 들어있지 않으면ListView가 성립이 되지 않고 Dart.. Flutter _ waitForWebToons 230531 오늘은 지난 시간에 이어 잘 가져온 Json 데이터를 이제 앱 화면에 띄워보겠다. 1. Show our API data in App 우선 우리가 선언한 ToonflixApiService 클래스의변수와 함수를 static으로 바꿔준다. 💡Static ⭐⭐⭐ Dart에서 static이 의미하는것은 자신을 감싸고 있는 클래스에 귀속 시키는 것이다. 클래스는 멤버변수와 멤버함수를 객체를 생성해야 사용 가능하지만 static이 붙은 경우 class에 귀속됨으로 따로 선언할 필요가 없다. 이렇게 클래스에 귀속되는 이유는 static이 붙은 멤버변수나 멤버함수는 메모리가 할당되어 프로그램 종료까지 사용 가능하기 때문이다. 위와 같이 static으로 변경 후 메인 함수가 있는 코드로 와서 해당 부분을 지워.. Flutter _ From Json 230530 오늘은 지난 포스팅에 이어 API에서 가져온 Json 데이터를 리스트로 받아 Key에 해당하는 데이터를 뽑아 사용해 보겠다. 1. From Json Data 우선 http 패키지의 get()으로 받은 Json 데이터를 우리가 쓰기 편하게 바꾸는 모델을 만들기 위해 새로운 디렉토리를 생성하고 모델 파일을 만들어 준다. 그리고 우리가 받아온 Json 데이터는 id, title, thumb라는 3가지의 key로 구성이 되있으므로 모델 파일에 클래스를 선언하고 위와 같이 id, title, thumb 3가지의 필수 매개변수를 선언한다. 우리가 받아온 get()의 body는 String 타입인데 이를 다시 Json 타입으로 바꿔주자. 1-1. jsonDecode Dart에서 제공하는 jsonDecod.. Flutter _ Data Fetching 230529 오늘은 본격적으로 API를 가져와 앱에 적용 시켜 보겠다. 우선 lib\services\Toonflix_api_service.dart을 생성해준다. 그리고 해당 dart 파일에 새로운 class를 선언한다. (Widget 아님 주의) 해당 baseUrl은 현재 수강중인 강좌에서 학습용으로 만든 비공식 API 주소이다. 우리가 원하는 건 오늘의 웹툰을 불러오는거다. baseUrl에 today를 붙이기 위해 위와 같이 오늘의 웹툰을 의미하는 변수 today도 선언해준다. 위와 같이 json형태의 데이터를 리스트로 받을거다. 위와 같은 URL에 요청을 보내기 위해서는 http 패키지를 먼저 설치해야 한다. 1. http 패키지 설치 https://pub.dev/ Dart packages Pub i.. Flutter _ AppBar 230528 드디어 Flutter의 마지막 미니 프로젝트 학습용 미니 웹툰 앱을 만들어 볼거다. 강의 교육 자료로 만든 웹툰 정보만 제공하는 API를 활용하여 네이버 웹툰을 가져와 볼것이다. 당연히 배포도 안할것이며, 실제 웹툰 내용은 들어가 있지 않다. 1. AppBar 위와 같이 StatelessWidget으로 기본적인 App 클래스를 생성해 주었다. 코드를 이어가기 전에 전부터 궁금했던 {super.key}에 대해 알아보자. 1-1. Key App({super.key})의 의미는 해당 위젯(App)의 key를 StatelessWidget라는 슈퍼 클래스에 보낸것이다. 그리고 핵심인 key는 이러한 클래스를 참조하는 열쇠이다. Flutter에는 여러 위젯(Widget)들이 있고 각각의 위젯(Widge.. 이전 1 2 3 4 5 다음
