![](https://blog.kakaocdn.net/dn/64gBX/btsEkxSegVT/xBjEbV5zQdGofPKeGNgSCK/img.png)
Material(좌) 그리고 Cupertino(우)
Flutter를 시작하면 프로젝트 기본 설정이 Material Design을 따르도록 되어있습니다. Flutter에는 iOS를 지원하도록 Cupertino 라는 패키지를 제공합니다. iOS에서 제공하는 대부분의 기본 UI 컴포넌트를 가지고 있습니다.
Flutter 앱을 Android / iOS 두 플랫폼으로 제공한다면, 해당 플랫폼의 기기에 어울리는 UI를 보여주는 것이 더 좋은 사용자 경험을 가져올 수 있을 것입니다.
내장된 ‘dart:io’ 패키지에는 플랫폼 구분을 위한 Platform 클래스를 제공합니다. Android, iOS 뿐만아니라 Windows, Linux, macOS 그리고 Fuchsia까지 구분할 수 있습니다. 이 글에서는 Andorid, iOS 환경에 따라 다른 UI 위젯을 보여주는 방법을 알아봅니다.
![](https://blog.kakaocdn.net/dn/FuzP8/btsEiyxyuLR/2cHpHaNxvsQOiGfukMrkkk/img.png)
플랫폼마다 다른 UI를 보여줄 PlatformSwitch
class PlatformSwitch extends StatefulWidget {
PlatformSwitch(); @override
_PlatformSwitchState createState() => _PlatformSwitchState();
}class _PlatformSwitchState extends State<PlatformSwitch> {
bool _value = false; @override
Widget build(BuildContext context) {
if (Platform.isIOS) {
return CupertinoSwitch(value: _value, onChanged: onChanged);
}
return Switch(value: _value, onChanged: onChanged);
} onChanged(bool value) {
setState(() {
_value = value;
});
}
}
기본적인 Switch를 StatefulWidget으로 감싸고, build 메소드에서 Platform클래스로 플랫폼에 맞는 위젯 스위치를 그리면 됩니다.
Flutter에는 수많은 위젯이 있고 모든 위젯을 새로 만들기 힘듭니다. Flutter Platform Widget은 이런 수고를 덜어주는 패키지입니다. 이 패키지를 사용하면 Scaffold부터 Icon까지 안드로이드와 iOS 환경에 따라 다른 위젯을 그리는 설정을 조금은 수월하게 할 수 있습니다.
'flutter & dart' 카테고리의 다른 글
flutter & dart - Stateless Widget , Stateful Widget , Scaffold , Children 매개변수와 Child 매개변수 차이 , 위젯 위에 위젯 (0) | 2024.02.02 |
---|---|
flutter & dart - flutter Devtool (0) | 2024.02.02 |
flutter & dart - assets (0) | 2024.02.02 |
[flutter & dart] - dart 언어의 문법과 기본적인 학습 (0) | 2024.01.30 |
flutter - Android Studio 설치 , 설정 (1) | 2024.01.30 |