반응형 앱 과 적응형 앱

1.반응형(Responsive) 앱

반응형 앱은 화면 크기에 따라 레이아웃과 UI 요소들이 자동으로 조정되는 것을 의미합니다. 예를 들어, 작은 화면에서는 한 열에 하나의 카드만 표시되지만 큰 화면에서는 여러 열에 여러 카드를 표시할 수 있습니다. 반응형 디자인을 구현하기 위해 Flutter에서는 다양한 위젯과 레이아웃 기능을 제공합니다.

주요 개념 및 도구:

1. MediaQuery: 화면의 크기, 해상도, 방향 등을 알 수 있게 해주는 클래스입니다.

MediaQuery.of(context).size.width;

2. LayoutBuilder: 부모 위젯의 제약 조건에 따라 다른 레이아웃을 만들 수 있게 해주는 위젯입니다

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth > 600) {
      return _buildWideContainers();
    } else {
      return _buildNormalContainer();
    }
  },
);

3. Flexible, Expanded: 위젯이 남은 공간을 차지하도록 합니다

Row(
  children: [
    Expanded(child: Container(color: Colors.red)),
    Expanded(child: Container(color: Colors.blue)),
  ],
);

2. 적응형(Adaptive) 앱

적응형 앱은 디바이스의 종류나 플랫폼(예: iOS, Android)에 따라 서로 다른 디자인과 동작을 적용하는 것을 의미합니다. 적응형 디자인은 반응형 디자인보다 한 단계 더 나아가 특정 플랫폼이나 디바이스 특성을 고려합니다.

주요 개념 및 도구:

1. Platform-specific code: 각 플랫폼별로 다른 위젯을 사용하거나 다른 코드를 실행합니다

if (Theme.of(context).platform == TargetPlatform.iOS) {
  return CupertinoButton(
    child: Text('iOS Button'),
    onPressed: () {},
  );
} else {
  return ElevatedButton(
    child: Text('Android Button'),
    onPressed: () {},
  );
}

Platform-aware packages: Flutter는 플랫폼별로 다른 스타일이나 동작을 제공하는 패키지를 지원합니다.

• cupertino_icons: iOS 스타일의 아이콘을 제공합니다.
• flutter_platform_widgets: 플랫폼에 따라 적절한 위젯을 자동으로 선택합니다.

Platform.isIOS
    ? CupertinoNavigationBar(
        middle: Text('iOS Navigation Bar'),
      )
    : AppBar(
        title: Text('Android App Bar'),
      );

결론

반응형 앱은 화면 크기와 방향에 따라 UI를 조정하는 데 중점을 두며, 적응형 앱은 디바이스나 플랫폼의 특성에 맞게 UI와 기능을 조정하는 데 중점을 둡니다. 두 접근법 모두 사용자 경험을 향상시키기 위해 필수적이며, Flutter는 이러한 접근법을 쉽게 구현할 수 있는 다양한 도구와 기능을 제공합니다.