flutter 공식문서에 Adaptive and responsive design in Flutter, 적응형과 반응형 디자인이 올라와있다.

🔎 개요

시작에 앞서 적응형과 반응형의 차이에 대해 정리하고 들어가고자 한다.

먼저 반응형은 전부터 계속 봐왔던 그대로이다.
주로 가로 크기를 기준으로 나누는데, 600, 768, 1024를 기준으로 나눈다.
Widget은 ConstrainedBox를 사용해 최대최소 width, height 값을 구한다.
주요 목적은 여러 기기에서 overflow가 나타나지 않게 함과 동시에 모든 화면에서 각 화면 크기에 맞는 크기를 가질 수 있게 설정해주는 것이다.

적응형은 조금 다른 개념이다.
iOS, Android 등 플랫폼을 기준으로 제스처, 입력 방식 네비게이션 등의 OS와 가까운 부분들을 다룬다.
주요 목적은 해당 기기에서 "네이티브 앱" 답게 느껴지게 하는 것이다.

🔎 Capabilities & policies

한국어로 번역하면 역량 및 정책이다.
조금 더 쉽게 풀어 설명하면 조건과 법이라고 생각할 수 있다.

기본적으로 Flutter는 Android Material Design과 iOS의 Cupertino 스타일을 모두 지원한다.
하지만, 기본적으로 앱을 개발할 때는 Meterial을 바탕으로 사용하며 필요한 부분이 있을 시, Cupertino 스타일이나 커스터마이징을 통해 사용한다.

공통적인 적응형 요소는 3가지가 있다.

• Typography
• Iconography
• Navigation

1️⃣ Typography

각 OS의 기본 폰트를 사용하도록 설정한다.
iOS는 San Francisco를 사용하며, Android는 Roboto를 사용한다.

2️⃣ Iconography

아이콘과 아이콘 버튼의 값이다.
뒤로 가기 버튼, 공유 아이콘 등 플랫폼마다 익숙한 형태의 아이콘을 사용해 네이티브 느낌을 살려야 한다.

3️⃣ Navigation

iOS는 하단 탭바를 선호하고, Android는 드로어나 하단 네비게이션을 혼용하는 등의 관습을 가지고 있다.
주로 일반 스마트폰의 크기 정도는 하단 네비게이션을, 탭이나 데스크탑 등은 드로어를 사용한다.
이부분은 iOS도 마찬가지이다.

🔎 적응형 UI 구현

1️⃣ .adaptive 생성자

.adaptive 생성자는 특정 위젯을 실행중인 플랫폼에 맞춰 자동으로 스타일을 적용해준다.
위 말에서도 느낄 수 있듯, 적응형 ui를 위해 사용된다.
각 OS가 가진 고유의 디자인 가이드라인을 따라 플랫폼 정체성을 유지한다.

2️⃣ 플랫폼 조건부 렌더링

코드에서 직접 플랫폼을 분기 처리한 뒤 다른 위젯을 보여준다.

import 'dart:io';

Widget build(BuildContext context) {
  if (Platform.isIOS) {
    return CupertinoButton(...); // iOS용 버튼
  } else {
    return ElevatedButton(...); // Android/기타용 버튼
  }
}

다음과 같이 플랫폼 구분이 필요한 부분에 분기처리를 건다.