모두가 할 수 있는 플러터 UI입문 - 실전

Tag & Linked Page

[[플러터]]

서평

앱은 화면과 데이터로 서비스가 이루어진다. 그 중에 화면에 집중한 책이다. 넷플릭스, 당근마켓, 마켓컬리의 UI를 클론코딩해보면서 이런 컴포넌트 구조는 어떤 Class내에 chlidren을 어떻게 구성할지 연습할 수 있다. 이 책 하나면 트렌드한 UI의 대부분을 다 경험해볼 수 있다.

 

이 책으로 UI 빼대를 잡은 다음엔 global state관리 같은 상태관리, API를 사용해서 데이터를 연결하기 등 여러가지를 더 찾아서 살을 붙이면 플러터를 시작하는 러닝커브를 많이 낮출 수 있을것 같다.

(플러터와 다트의 기본 문법은 입문편에 있다)

 

책을 보면서 경험한것 하나는 클론코딩이지만 PC환경이 전부 다르기 때문에 책과는 다른 예외처리를 해야할 순간들이 오는데 이 때는 연관된 키워드를 구글에 검색해서 하나씩 처리해야하는 일들이 생겼었다. 그래도 안되면 앤써북 네이버 카페에서 책 내용 관련 문의게시판에서 질문을 하면된다.

---

당근마켓 클론코딩

모두가 할 수 있는 플러터 UI실전의 수록된 클론코딩 중 하나이다. (당근마켓, 마켓컬리, 넷플릭스)

https://youtu.be/NLlGp-oQ73Q

1. Flutter

skia engine

렌더링 엔진으로 skia를 사용한다
https://brunch.co.kr/@myner/5
https://skia.org/

cupertino

iOS style
https://flutter.dev/docs/development/ui/widgets/cupertino

2. Run

emulator으로 실행

Termianl에서

$ flutter run

emulator 동작

Flutter run key commands.
r Hot reload. 🔥🔥🔥
R Hot restart.
h Repeat this help message.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).

web으로 실행

$ flutter run -d chrome

3. 자동완성

stl, stf만 치면 stateless, statefull 번들을 제공해준다.

4. flutter material theme

https://api.flutter.dev/flutter/material/TextTheme-class.html

5. 정오표시

p14.

폴더 이름이 neighborhood 여야 하는데 heighborhood로 되어 있다. (h->n)

p16.

main_screens.dart의 소스코드의 아래 부분이 바뀌어야 한다. 안그러면 검은 배경에 빨간색 글씨인 화면을 만나게 된다. 뒷 부분에서 Scaffold로 바꾸긴 하지만 github에도 Scaffold로 되어 있으니 책 내용에 오류가 있다고 봐도 무방할듯하다.

return Container(
  child: Center(
    ...
  )
)


return Scaffold(
  body: Center(
    ...
  )
)

troubleshooting

1. missing static target

clean하고나서 다시 run하면 된다.

$ flutter clean
$ flutter run

2. Shader compilation error

로그가 아래처럼 나온다

D/skia    (22925):    1 Shader compilation error
D/skia    (22925):    2 ------------------------
D/skia    (22925):    3 Errors:
D/skia    (22925):    4

그래서 아래처럼 run을 할 때 옵션을 주면 해결된다 달려라 승이

$ flutter run --enable-software-rendering  

3. NumberFormat은 어느 library에 있을까?

import 'package:intl/intl.dart';  

https://frozenrainyoo.tistory.com/9

---

flutter 심화

1. ? operation

Key? key
삼항연산자도 아니고 .?도 아니고 의미는 이해되지만 javascript와는 다른 문법이다

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

2. stateful 코드 분석하기

class MainScreens extends StatefulWidget {
  @override
  _MainScreensState createState() => _MainScreensState();
}

...

• 코드 내용 알아보기

---

Reference

1. 모두가 할 수 있는 플러터 UI 실전
2. 앤써북 네이버 카페

앤써북_ IT/컴퓨터, 경제경영, 취... : 네이버 카페

 

 

엔써북에서 도서를 무상 제공받아 제작하였습니다