[노마드코더] #3 UI Challenge

Front-end/Flutter

[노마드코더] #3 UI Challenge

성중 2023. 1. 18. 16:43

Header

Header · joseph-106/toonflix@1eb21c2

Showing 1 changed file with 37 additions and 5 deletions.

github.com

? 기호가 붙은 Optional Widget들은 경우에 따라 포함 여부 판단
Colors의 옵션으로 자동 완성되는 material design의 Colors.색상.색조 사용 가능
커스텀 색상을 넣고 싶다면 Color(0xFF[HEX 값]) or Color.fromARGB(+ RGBO)
단순히 size가 있는 박스를 만드는 SizedBox Widget (width / height / child)
Row(수평) / Column (수직) 방향으로 children 배열을 사용해 Widget 쌓기 가능
그 안에서 MainAxis(정) / CrossAxis(역) 방향 Alignment로 쌓은 Widget 위치 조정
Padding / Margin Widget으로 감싸 EdgeInsets.symmetric 옵션 등으로 여백 조절 가능

Developer Tools

Inspector Page에서 모든 Widget 구조 한 눈에 파악 & 미리보기 가능

좌측 상단의 Widget 선택 모드를 활성화해 시뮬레이터에서 바로 선택 가능

2번째 버튼으로 가이드라인을 활성화하면 모든 구조를 시각적으로 파악 가능

Buttons Section

Buttons Section · joseph-106/toonflix@792e688

Showing 1 changed file with 47 additions and 0 deletions.

github.com

SizedBox Widget에 width나 height만 지정해 여백 용도로 사용 가능
Dart에서 문자열에 변수 삽입 목적이 아닌 $ 기호를 넣으려면 \$ 사용
HTML div와 같은 목적으로 Container Widget 사용 (decoration 옵션으로 스타일링)

VSCode Settings

[settings.json]

  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
"dart.previewFlutterUiGuides": true,

코드 compile 이전에 값을 미리 알고 있는 변수(+ Widget)들은 const로 선언
VSCode settings.json 파일에 source.fixAll 옵션이 true라면 에디터가 자동으로 판단
dart.previewFlutterUiGuides 옵션은 Widget들의 구조를 코드에 시각적으로 표현

Code Actions

특정 Widget을 Container에 포함시키거나 Padding 등으로 감싸는 경우
수동으로 Ctrl + X / Ctrl + V 방식도 가능은 하지만 귀찮고 실수할 수도 있음
그 외에도 Move로 이동이나 Extract로 추출 Remove로 삭제 등 가능
전구를 클릭할 필요도 없이 Widget 선택 후 단축키 (Ctrl + .)로 사용

Reusable Widgets

Reusable Widgets · joseph-106/toonflix@1a5f8c1

Show file tree Showing 2 changed files with 51 additions and 20 deletions.

github.com

Widget들을 재사용할 수 있는 별도의 Widget class로 추출해 재사용 가능
Code Actions의 Extract Widget 기능으로 아주 간편하게 Widget 추출
추출한 Widget을 widgets 폴더의 별도의 파일로 분리 (자동완성)
Widget마다 다른 속성은 필드로 만들과 생성자의 파라미터로 정의 (자동완성)
재사용 가능한 Widget으로 분리하는 과정에서 const였던 값들을 일부 재정의

Cards

Cards · joseph-106/toonflix@0cdb8e4

Showing 1 changed file with 78 additions and 1 deletion.

github.com

opacity 같이 컴파일시 알기 힘든 값은 const 판단에 자동완성/수정 기능이 가끔 충돌
CrossAxisAlignment & MainAxisAlignment 옵션을 적절히 사용해 Widget들을 배치
Flutter UI에서 자주 사용되는 Widget들과 스타일링 패턴 등을 기억해두자

Icons and Transforms

Icons and Transforms · joseph-106/toonflix@06399ad

Showing 1 changed file with 13 additions and 0 deletions.

github.com

Icon Widget으로 아주 다양한 기본 제공 아이콘 가져오기 및 스타일링 가능
Transform Widget으로 공간은 유지하면서 child의 크기(scale) 및 위치(translate) 조정
Container Widget의 clipBehavior 옵션은 overflow된 요소를 어떻게 처리할지 결정

Reusable Cards

Reusable Cards · joseph-106/toonflix@8450d1a

Show file tree Showing 2 changed files with 212 additions and 154 deletions.

github.com

Widget class로 분리 후, 필요에 따라 parameter를 추가해 상태를 관리
class 내부에서 재사용되는 상수는 별도의 field 값으로 분리해 재사용 가능
변수명 앞에 _(언더바)를 붙여 외부 접근이 불가능한 private field로 지정
SingleChildScrollView Widget으로 전체를 감싸면 넘치는 요소 스크롤 가능

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

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

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

[노마드코더] #6 Webtoon App (0)	2023.02.02
[노마드코더] #5 Pomodoro App (0)	2023.01.27
[노마드코더] #4 Stateful Widgets (0)	2023.01.19
[노마드코더] #2 Hello Flutter (0)	2023.01.16
[노마드코더] #1 Introduction (0)	2023.01.15

현재글[노마드코더] #3 UI Challenge

프로그래밍 잡동사니