flutter는 한번에 다양한 플랫폼 개발을 할 수 있는 편리한 크로스 플랫폼이다!
하지만 각 플랫폼마다 익숙한 UI가 존재하기에 플랫폼에 맞는 UI를 구현하는 것이 개인적으로 중요하다 생각한다.
왜냐하면 주로 iOS/MacOS를 사용하는 내가 그 부분이 크게 신경쓰이기 때문이다....ㅎㅎ
처음 개발을 진행할 때는 필요한 하위 부분에서 플랫폼을 체크하여 UI를 뿌려주었는데,
이는 수많은 switch문과 길어지는 코드로 매우 불편했다.......
그래서 앱이 처음 실행될 때 UI 분기를 나누고 해당하는 UI로 구현된 class가 포함된 dart file만을 import하여,
파일별로 UI를 나누는 방법을 사용해서 이를 구현하고 있으며 아래 내가 사용하는 방법을 가져와보았다
Paltform & kisweb
- Paltform
Platform class - dart:io library - Dart API
Information about the environment in which the current program is running. Platform provides information such as the operating system, the hostname of the computer, the value of environment variables, the path to the running program, and other global prope
api.dart.dev
dart:io 라이브러리에는 Platform이라는 class가 존재한다.
여기에 isIOS, isAndroid, isMacOS, isLinux, isWindows라는 프로퍼티들이 있어 플랫폼을 구분할 수 있다.
- kisweb
kIsWeb constant - foundation library - Dart API
bool const kIsWeb A constant that is true if the application was compiled to run on the web. Implementation const bool kIsWeb = bool.fromEnvironment('dart.library.js_util');
api.flutter.dev
다만, Web의 경우에는 구분되어 있지 않아 foundation 라이브러리의 kisweb이라는 상수를 사용해야한다
Material VS Cupertino
- Material
Material Components widgets
A catalog of Flutter's widgets implementing the Material design guidelines.
docs.flutter.dev
Material Style의 위젯들은 가장 기본적이고 대표적이다.
flutter 프로젝트를 처음 만들면 생기는 위젯들을 포함해 모든 위젯들이 거의 Material 스타일로 되어있다.
MaterialApp class - material library - Dart API
An application that uses Material Design. A convenience widget that wraps a number of widgets that are commonly required for Material Design applications. It builds upon a WidgetsApp by adding material-design specific functionality, such as AnimatedTheme a
api.flutter.dev
그리고 Material 스타일의 App을 처음 만들기 위해 시작되는 Widget이 바로 MaterialApp이다
Theme를 설정하면 추후 하위 위젯에 일괄적으로 적용되기 때문에 편리하게 사용할 수 있다 :)
- Cupertino
Cupertino (iOS-style) widgets
A catalog of Flutter's widgets implementing the Cupertino design language.
docs.flutter.dev
Cupertino Style은 흔히 보는 iOS UI의 스타일을 뜻한다.
Popup, ActionSheet, NavigationBar, Indecator 등 icon까지 Xcode에서 사용하던 UI과 같아서 아주 보기 좋았다
CupertinoApp class - cupertino library - Dart API
An application that uses Cupertino design. A convenience widget that wraps a number of widgets that are commonly required for an iOS-design targeting application. It builds upon a WidgetsApp by iOS specific defaulting such as fonts and scrolling physics. T
api.flutter.dev
그리고 이런 Cupertino 스타일의 App의 시작은 CupertinoApp Widget으로 시작된다!
해당 위젯의 하위로 들어가는 UI들을 작성한 코드는 꼭 cupertino.dart 파일만을 import하고,
material.dart를 import하는 구문이 있는지 없는지 체크해서 지워주도록 하자!
그렇지 않으면 나도 모르게 Material 스타일의 Widget을 사용하는 경우가 발생한다........ ㅜㅜ
코드 구현
- main.dart
import 'dart:io';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
if (Platform.isIOS || Platform.isMacOS) {
return CupertinoView();
} else {
return MaterialView();
}
}
}
class MaterialView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp();
}
}
class CupertinoView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CupertinoApp();
}
}- MyApp : main()함수가 실행되면 처음 사용되는 Widget
- MaterialView : Material Style의 View를 보여주기 위해 MaterialApp을 넘겨주는 Widget
- CupertinoView : Cupertino Style의 View를 보여주기 위해 CupertinoApp을 넘겨주는 Widget
