Constraints go down. Sizes go up. Parent sets position.
플러의 UI 레이아웃을 이해하기 위해선 이 룰을 이해해야한다. 반드시 숙지해야할 규칙
•
위젯은 부모 위젯으로부터 4가지 제약을 가져온다. ⇒ (최소, 최대) 높이 너비
•
자식 목록을 검토한 후 자식들에게 제약 조건이 무엇인지 알려주고, 각 자식에게 원하는 크기를 묻는다
•
자식을 하나씩 배치한다
•
배치된 위젯은 부모에게 자신의 사이즈를 알려준다 (제약 조건 내에서)
Limitation
•
자식 위젯은 부모의 제약 조건 내에서만 사이즈를 가질 수 있다. ⇒ 원하는대로 사이즈를 가질 수 있는 것이 아니다.
•
자식 위젯의 위치를 결정하는 것은 부모 위젯이기 때문에 스스로 위치를 정할 수 없다.
•
위의 이유들로 트리 전체를 고려하지 않으면 위젯의 크기와 위치를 정확히 정의하는 것이 불가능하다
•
부모의 제약과 맞지 않거나 align 에 대한 정보가 충분하지 않으면 자식 위젯에서 정의한 사이즈는 무시될 수 있다
Tight vs. loose constraints
tight
너비위 높이에 대한 max, min 값이 같다
loose
tight 과 반대
Box constraints
box 에는 3가지 타입이 있다
•
최대한 커지는 박스. (ex - Center, ListView)
•
자식 위젯에 사이즈를 맞추는 박스 - (ex - Transform, Opacity)
•
특정 사이즈가 되는 박스 (ex - Image, Text)
Container 의 경우 기본적으로는 최대한 커지는 박스이지만 constructor parameter 에 따라 달라짐 (width 를 주는 등)
unbounded constraints
box 의 크기가 무제한(double.infinity)으로 주어질 때가 있다. 최대한 커지는 박스는 무제한 제약 조건이 주어지면 잘 작동하지 않으며, 디버그 모드에서 예외를 발생시킨다.
Optimize
Performance
•
16ms frame 을 유지한다.
◦
배터리 수명 및 발열에 효과적임
◦
저사양 기기에도 효과적으로 작동할 수 있도록한다
◦
•
build 메소드 안에 반복적이거나 무거운 작업을 넣지 않는다. ⇒ 부모 위젯들이 리빌드 될 때마다 자주 호출 될 것이기 때문에.
•
위젯을 가능한 작게 분할하라
•
가능한 위젯들에 모두 const constructor 로 선언할 수 있도록 한다.
◦
flutter_lints 를 사용하면 lint 에서 const 를 사용하도록 lint 를 통해 주의를 준다.
•
saveLayer() 을 신중하게 사용하자
◦
직접 사용하지 않아도 package libs 에서 사용할 경우도 있음. 무거운 작업이기 때문에 필요이상 사용은 금지
•
opacity, clipping 사용을 최소화한다.
◦
opacity 도 비싼 작업. Opacity 위젯은 최소한으로 사용한다. 특히 애니메이션에서 사용하지 않는다. (For more information, check out Performance considerations for opacity animation
.)
▪
대신 AnimatedOpacity, FadeInImage 를 사용한다
◦
Opacity 위젯을 이용하는 것 보다 하위 옵션을 이용한 사용이 성능적으로는 더 이점이 있음.
◦
모서리가 둥근 사각형을 만들려면 clipping 사각형을 적용하는 대신 많은 위젯 클래스에서 제공하는 borderRadius 속성을 사용하는 것이 좋다.
•
AnimatedBuilder 에 애니메이션과 관계없는 위젯은 builder 함수에 넣지 않는다. (tick 마다 rebuilt 될 것이기 떄문)
•
clipping 을 애니메이션에 사용하지 말것. 애니메이션하기 전에 pre-clip 할 수 있으면 좋다.
•
Grids, Lists view 들은 신중하게 구현한다
•
lazy 하게 builder 메소드를 사용한다. ⇒ 시작할 때 보이는 부분만 화면이 만들어짐
Minimize App size
•
난독화 사용?(참고) (web 은 안됨) (release build 할 때 --obfuscate --split-debug-info=/<project-name>/<directory> 플래그 사용)
•
사용하지 않는 코드 및 리소스 제거
•
JPEG, PNG 이미지 압축
•
