플러터 .adaptive 속성으로 플랫폼에 맞춘 위젯 사용하기[ Android / IOS ]

 

Flutter는 하나의 코드베이스로 iOS, Android, 웹 등 다양한 플랫폼에 적응할 수 있는 앱을 개발할 수 있게 해줍니다.

하지만 각 플랫폼마다 사용자 경험(UX)이 다르기 때문에, 때로는 플랫폼에 맞는 디자인 요소를 사용하는 것이 중요합니다.

.adaptive 속성은 이러한 문제를 해결하기 위해 Flutter에서 제공하는 기능으로, 플랫폼에 맞춘 위젯 스타일을 적용할 수 있게 도와줍니다. 오늘은 이 .adaptive 속성의 사용법과 다양한 옵션에 대해 알아보겠습니다.

.adaptive 속성이란?

 

.adaptive 속성은 Flutter에서 제공하는 기능으로, 특정 위젯을 사용자가 사용 중인 플랫폼에 맞게 자동으로 변경해줍니다.

예를 들어, iOS에서는 Cupertino 스타일의 위젯을, Android에서는 Material 스타일의 위젯을 사용하게 합니다.

이를 통해 각 플랫폼에 최적화된 사용자 경험을 제공할 수 있습니다.

기본 사용법

.adaptive 속성은 주로 Flutter의 기본 위젯들 중 일부에서 사용됩니다. 가장 대표적인 예로 Switch와 CircularProgressIndicator 위젯이 있습니다.

Switch.adaptive

Switch.adaptive은 iOS에서는 CupertinoSwitch로, Android에서는 Material의 Switch로 표시됩니다.

Android

 

IOS

디바이스에 따라서 자동으로 변경되는 Switch 모습

 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AdaptiveExample(),
    );
  }
}

class AdaptiveExample extends StatefulWidget {
  @override
  _AdaptiveExampleState createState() => _AdaptiveExampleState();
}

class _AdaptiveExampleState extends State<AdaptiveExample> {
  bool _isSwitched = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flutter .adaptive Example')),
      body: Center(
        child: Switch.adaptive(
          value: _isSwitched,
          onChanged: (bool value) {
            setState(() {
              _isSwitched = value;
            });
          },
        ),
      ),
    );
  }
}

.adaptive의 다양한 옵션 및 적용가능 위젯들

.adaptive 속성은 대부분 기본 스타일을 플랫폼에 맞게 자동으로 적용하지만, 일부 속성은 여전히 커스터마이징할 수 있습니다.

1. Switch.adaptive 속성

• value: bool 타입, 스위치의 현재 상태 (켜짐/꺼짐).
• onChanged: (bool) 타입의 콜백 함수, 사용자가 스위치를 변경할 때 호출됩니다.
• activeColor: Color 타입, 스위치가 켜져 있을 때의 색상.

2. CupertinoSwitch.adaptive 속성

• value: bool 타입, 스위치의 현재 상태 (켜짐/꺼짐).
• onChanged: (bool) 타입의 콜백 함수, 사용자가 스위치를 변경할 때 호출됩니다.
• activeColor: Color 타입, 스위치가 켜져 있을 때의 색상.

3. CircularProgressIndicator.adaptive 속성

• value: double? 타입, 진행 상태를 나타내는 값 (0.0에서 1.0 사이, null이면 무한 로딩).
• backgroundColor: Color 타입, 진행되지 않은 부분의 배경 색상.
• valueColor: Animation<Color> 타입, 진행된 부분의 색상을 나타내는 애니메이션.

4. Slider.adaptive 속성

• value: double 타입, 슬라이더의 현재 값.
• onChanged: (double) 타입의 콜백 함수, 사용자가 슬라이더를 이동할 때 호출됩니다.
• min: double 타입, 슬라이더의 최소값.
• max: double 타입, 슬라이더의 최대값.
• activeColor: Color 타입, 활성화된 슬라이더의 색상.

5. IconButton.adaptive 속성

• icon: Widget 타입, 아이콘 버튼에 표시될 아이콘.
• onPressed: VoidCallback 타입의 콜백 함수, 버튼이 눌렸을 때 호출됩니다.
• tooltip: String 타입, 아이콘 버튼에 대한 설명을 나타내는 텍스트 (길게 누르면 표시).

6. PageRouteBuilder.adaptive 속성

• pageBuilder: (BuildContext, Animation<double>, Animation<double>) -> Widget 타입, 페이지의 콘텐츠를 빌드하는 함수.
• transitionsBuilder: (BuildContext, Animation<double>, Animation<double>, Widget) -> Widget 타입, 페이지 전환 애니메이션을 정의하는 함수.
• transitionDuration: Duration 타입, 전환 애니메이션의 지속 시간.
• reverseTransitionDuration: Duration 타입, 뒤로 이동 시의 전환 애니메이션 지속 시간.

.adaptive의 장점

1. 플랫폼 일관성: 사용자에게 각 플랫폼에 맞는 UI를 제공하여 익숙함을 유지합니다.
2. 유지보수 용이: 단일 코드베이스로 여러 플랫폼을 지원하기 때문에 유지보수가 쉽습니다.
3. 간편한 구현: 별도의 조건문 없이 .adaptive 속성만으로 플랫폼 맞춤형 UI를 구현할 수 있습니다.

마무리

Flutter의 .adaptive 속성은 다양한 플랫폼에 맞춰 일관된 사용자 경험을 제공하는 데 매우 유용한 도구입니다. 이를 통해 개발자는 각 플랫폼의 특성에 맞는 UI를 쉽게 구현할 수 있으며, 사용자 만족도를 높일 수 있습니다.

 

이 블로그가 Flutter로 여러 플랫폼을 지원하는 앱을 개발하는 데 도움이 되었기를 바랍니다! 댓글로 질문이나 피드백을 남겨주세요. 앞으로도 Flutter 관련 팁과 트릭을 공유할 예정이니, 블로그 구독을 놓치지 마세요!

 

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱