Flutter Study- 4주차(반응형 레이아웃)

Responsive?

스마트폰 특성상 세로모드와 가로모드 가 존재
각 모드에 맞게 ,사용가능한 영역에 맞춘 UI화면을 구현하는 것

SystemChrome

OS(운영체제)가 선호나는 그래픽 인터페이스의 특정 부분을 조절하고, 어떻게 어플리케이션과 상호작용하는 지를 설정하는 클래스

• then 을 활용하는 것이 요구됨
  setPreferredOrientations 옵션이 Future타입이기 때문, 전체 함수 기능을 fn에 담아거 넘겨줌

WidgetsFlutterBinding.ensureInitialized

https://api.flutter.dev/flutter/widgets/WidgetsFlutterBinding/ensureInitialized.html

사용자가 세로모드로 사용하는 것을 강제함, 어떤 어플리케이션은 강제하는 것이 UI작동 측면에서 더 효율적일 수 있음.

가로모드(landScape)의 기본(조건부렌더링)

기존 세로모드에서 사용했던 Column을 Row로 변경하는 것
전체 화면 크기를 계산하여 일정 너비를 넘어가면 가로 Row를 Column으로 변경

    final width = MediaQuery.of(context).size.width;
  body: width < 600
          ? Column(
              children: [
                // Toolbar
                Chart(expenses: _registeredExpenses),
                Expanded(
                  child: mainContent,
                ),
              ],
            )
          : Row(
              children: [
                Expanded(
                  child: Chart(expenses: _registeredExpenses),
                ),
                Expanded(
                  child: mainContent,
                ),
              ],
            ),

MediaQuery

미디어쿼리를 통해 화면 너비와 높이, 이외에도 텍스트 배율, 기기방향(Orientation)등을 알아낼 수 있는 클래스
키보드 공백 넓이(softKeyboard)까지 계산 가능

LayoutBuilders vs MediaQuery

LayoutBuilder(builder: (ctx, constraints) {
      final width = constraints.maxWidth;

• 미디어쿼리는 기기 전체 화면의 크기, LayoutBuilder는 위젯의 크기를 알고싶을때 활용
  layout 타임에 호출되고 constraints 가 제공 -> 위젯의 크기 계산 가능

Size Constraints

• 위젯의 크기는 Size Preference 와 Parents Widget에 의해 제한됨

LayOut Explorer

Flutter Devtool(Inspector)에서 각 위젯의 크기, 제한여부등을 확인할 수 있음
like 크롬 개발자 도구의 Elements-Styles 같은 것

Safe Areas

최상단에 위치한 배터리 및 시간표시 등 장치관련 사항을 가리지 않도록하는 것

• useSafeArea : true 를 통해 설정 가능

Adaptive Widget

플랫폼별 기본값들이 다 다름

Cuppertino 패키지

Ios의 스타일링 메서드 제공

• showCupertinoDialog

dart:io library

조건문을 통해 어플리케이션이 어느 플랫폼서 작동하는지 확인 가능

• platfrom.isIOS