Front-end/Flutter

[노마드코더] #6 Webtoon App

성중 2023. 2. 2. 21:46

AppBar

 

AppBar · joseph-106/toonflix@1293249

Showing 1 changed file with 15 additions and 1 deletion.

github.com

  • 선언한 위젯은 key를 가져야 하며, ID와 같은 식별자 역할
  • AppBar 위젯은 다양한 옵션을 가지며 서비스의 헤더 역할

 

Data Fetching

 

Data Fetching · joseph-106/toonflix@3855976

Show file tree Showing 4 changed files with 42 additions and 3 deletions.

github.com

  • pub.dev에서 Dart, Flutter 관련 공식 패키지 다운로드 가능 (npm, PyPI랑 비슷)
  • HTTP 요청을 편하게 해주는 Dart 공식 http 패키지 다운로드 (터미널 or pubspec.yaml)
  • http 패키지의 get 메소드에 uri 타입을 넣기 위해 Uri의 parse 메소드로 url을 파싱
  • Future는 JS Promise와 비슷하며 async/await 비동기 처리 및 에러 핸들링 패턴 필요
  • services 폴더를 분리하는 것이 항상 필수는 아님!

 

http🔽

 

http | Dart Package

A composable, multi-platform, Future-based API for HTTP requests.

pub.dev

 

fromJson

 

fromJson · joseph-106/toonflix@63fb360

Show file tree Showing 2 changed files with 23 additions and 3 deletions.

github.com

  • models 폴더에 fromJson named constructor 패턴으로 데이터 모델 정의해 활용
  • response.body를 json으로 파싱해 하나씩 인스턴스로 저장하고 Future 리스트로 반환

 

waitForWebToons

 

waitForWebToons · joseph-106/toonflix@4b1ecc4

Show file tree Showing 3 changed files with 29 additions and 7 deletions.

github.com

  • 화면별로 종속적인 API 객체를 만드는 대신 static 메소드로 변환해 정적으로 호출
  • ApiService().getTodaysToons()에서 ApiService.getTodaysToons으로 정적 호출 가능
  • static 클래스에서 컴파일 이전에 확정된 상수 필드는 final이 아닌 static const로 선언
  • 스크린 위젯에서 인스턴스 리스트를 담을 배열과 로딩 상태 프로퍼티, 비동기 함수 등을 정의
  • initState override 메소드에서 로딩 상태를 관리하고 setState를 포함한 API 비동기 함수 호출
  • 정석적인 방식이지만 Flutter에서 State 사용은 지양하는 편이 좋아 FutureBuilder를 사용

 

FutureBuilder

 

FutureBuilder · joseph-106/toonflix@336bbcb

Show file tree Showing 3 changed files with 14 additions and 25 deletions.

github.com

  • FutureBuilder로 StatelessWidget에서 비동기 데이터 관리 (repaint가 없어 성능도 우수)
  • const를 제거해야 하며, builder 옵션의 snapshot 상태로 로딩 상태에 따른 UI 렌더링

 

ListView

 

ListView · joseph-106/toonflix@13e3287

Showing 1 changed file with 20 additions and 2 deletions.

github.com

  • 로딩 상태 UI는 Center로 CircularProgressIndicator 등의 위젯을 감싸 사용
  • 많은 양의 데이터 항목을 나열하려면 Row/Column 위젯보단 ListView 위젯 사용
  • null 방지를 위해 snapshot.data에 ! 추가, 스크롤이 내장되어 Overflow 에러 없이 렌더링
  • collection for를 사용할 수도 있지만 ListView.builder의 다양한 옵션으로 최적화하면 더 깔끔
  • 사용자에게 보여지는 데이터만 실시간으로 빌드되며, ListView.seperated/custom 사용 가능

 

Webtoon Card

 

Webtoon Card · joseph-106/toonflix@32243af

Show file tree Showing 2 changed files with 94 additions and 50 deletions.

github.com

  • Code Actions를 사용해 snapshot을 받아 ListView의 빌더를 반환하는 별도의 메소드 분리
  • ListView는 무한한 높이일 수 있기 때문에 Expanded 위젯으로 감싸 Row/Column 안으로 조정
  • Image.network 메소드로 이미지 URL 렌더링 시, canvaskit에서 html로 Renderer 설정 변경

 

[settings.json]

"dart.flutterRunAdditionalArgs": ["--web-renderer", "html"],

* 시뮬레이터가 크롬인 경우, CORS(교차 출처) 이미지 렌더링을 위해 위 설정 추가

 

Detail Screen

 

Detail Screen · joseph-106/toonflix@a90671f

Show file tree Showing 3 changed files with 129 additions and 27 deletions.

github.com

  • 너무 크거나 반복되는 UI 로직은 적당한 기준에서 커스텀 위젯으로 분리
  • GestureDetector 위젯으로 이벤트 감지, Navigator에 라우트를 넘겨서 화면 이동
  • MaterialPageRoute로 위젯을 감싸 라우트로 변환, 상위 context 데이터 전달
  • 크롬에서 강의와 유사한 애니메이션을 위해 PageRouteBuilder로 변환

 

Hero

 

Hero · joseph-106/toonflix@ccf063c

Show file tree Showing 2 changed files with 44 additions and 38 deletions.

github.com

 

Fix · joseph-106/toonflix@51be222

Showing 1 changed file with 47 additions and 47 deletions.

github.com

  • 두 개의 화면에 각각 Hero 위젯을 사용해 같은 태그 공유 시 이동 애니메이션 연결
  • 주의: 애니메이션을 적용할 동일한 위젯 영역만 감싸야 함!

 

ApiService

 

ApiService · joseph-106/toonflix@7d045f2

Show file tree Showing 4 changed files with 54 additions and 0 deletions.

github.com

  • id 값을 파라미터를 받아 개별 데이터를 불러오도록 모델과 static 메소드 추가

 

Futures

 

Futures · joseph-106/toonflix@01692c0

Showing 1 changed file with 22 additions and 4 deletions.

github.com

  • Stateless 위젯에서 Future 타입 필드를 바로 받는 방식은 파라미터 넘기기가 불가능
  • Stateful 위젯으로 변경 후 분리된 State 클래스에서 필드에 접근하려면 widget. 붙이기

 

Detail Info / Episodes

 

Detail Info · joseph-106/toonflix@06c95f8

Show file tree Showing 2 changed files with 40 additions and 0 deletions.

github.com

 

Episodes · joseph-106/toonflix@8958fa8

Showing 1 changed file with 114 additions and 56 deletions.

github.com

  • 추가된 API 데이터 UI 렌더링을 위한 Future Builder + 스크롤 뷰로 감싸기

 

Url Launcher

 

Url Launcher · joseph-106/toonflix@69fe40e

Show file tree Showing 9 changed files with 154 additions and 39 deletions.

github.com

  • Flutter에서 브라우저를 열기 위해 pub.dev에서 url_launcher 패키지 다운로드
  • GestureDetector로 메소드를 실행할 영역을 Code Actions 위젯 추출 기능으로 분리
  • launchUrlString 메소드는 Future 타입을 다루기 때문에 비동기 함수로 감싸 호출

 

url_launcher🔽

 

url_launcher | Flutter Package

Flutter plugin for launching a URL. Supports web, phone, SMS, and email schemes.

pub.dev

 

Favorites

 

Favorites · joseph-106/toonflix@0a8e3e8

Show file tree Showing 4 changed files with 156 additions and 0 deletions.

github.com

  • 고유 저장소 (디스크)에 데이터를 담기 위해 shared_preferences 공식 패키지 다운로드
  • AppBar 위젯 actions 옵션 리스트에 기능이 포함된 IconButton 위젯 등 추가 가능
  • SharedPreferences 인스턴스에 key - value 형태로 비동기 데이터 읽기/쓰기/제거 가능

 

shared_preferences (localStorage와 비슷)🔽

 

shared_preferences | Flutter Package

Flutter plugin for reading and writing simple key-value pairs. Wraps NSUserDefaults on iOS and SharedPreferences on Android.

pub.dev

 

본 내용은 노마드코더의 'Dart 시작하기'를 바탕으로 작성되었습니다

저작자표시 비영리 변경금지

'Front-end > Flutter' 카테고리의 다른 글

[TIL] Netlify로 Flutter web app 배포하기  (0) 2023.02.07
[TIL] Android 시뮬레이터 실행하기 (Windows)  (0) 2023.02.06
[노마드코더] #5 Pomodoro App  (0) 2023.01.27
[노마드코더] #4 Stateful Widgets  (0) 2023.01.19
[노마드코더] #3 UI Challenge  (0) 2023.01.18

'Front-end/Flutter'의 다른글

  • 현재글[노마드코더] #6 Webtoon App

관련글

티스토리툴바