[Flutter] 디자인 위젯, 쿠퍼티노(Cupertino)와 머티리얼(Material)

 iOS, Android, Web, 데스크탑까지 지원하는 Flutter의 입장에서는, 각 플랫폼에 적합한 디자인 위젯의 지원이 필요했을 것이다.

 

## 쿠퍼티노(Cupertino) 디자인

import 'package:flutter/cupertino.dart';

미국 캘리포니아 주 산타클라라 카운티의 도시. Apple 본사가 있는 곳

 

이다.

 

Apple 본사가 있는 쿠퍼티노(cupertino)를 따서, 플러터에서는 iOS 스타일의 UI를 쿠퍼티노 디자인이라고 한다.

Apple의 공식 명명은 아닌 듯, 구글 입장에서 `Apple 디자인, iOS 디자인` 하며 경쟁사와 경쟁사 제품을 이야기하는게 좋지 않을테니 구글이 자체적으로 명명한듯 보인다. Apple은 그냥 Human Interface Guideline 정도로 부르며 머티리얼(Material) 디자인같은 특별한 디자인 이름은 없다.

 

## 머티리얼(Material) 디자인

import 'package:flutter/material.dart';

머티리얼 디자인은 이론, 자원 및 디지털 경험을 만드는 도구를 결합한 통합 시스템입니다.

 

구글이 2014년부터 이끄는 플랫 기반의 디자인 시스템이다. 안드로이드에 기본적으로 쓰이며 웹에 대해서도 디자인 가이드를 제공한다.

 

## 비슷한 이름, 다른 위젯

Flutter를 처음 접했을시 가장 헷갈렸던 부분으로

'뭐이리 비슷한 위젯이 이렇게 많아?' 하며 헷갈렸었다.

 

또한 이름은 같은데 UI스타일은 전혀 다른 위젯들이 있어, 생각없이 쓰다보면 예상치 못한 결과가 나올 수 있다.

 

아래 테이블로 비슷한 이름의 위젯을 정리해서보면,

	쿠퍼티노(Cupertino)	머티리얼(Material)
NaviationBar	CupertinoNavigationBar	NavigationBar
TabBar	CupertinoTabBar	TabBar
Switch	CupertinoSwitch	Switch
AlertDialog	CupertinoAlertDialog	AlertDialog

 

Switch나 AlertDialog위젯은 괜찮지만

같은 이름을 가진 위젯이어도, 쿠퍼티노(Cupertino)인지 머티리얼(Material)인지에 따라 쓰임새가 전혀 다른 UI가 나온다.

 

예를들어,

- 쿠퍼티노의 CupertinoNavigationBar는 머티리얼의 AppBar에 대응되는 UI이다.

- 쿠퍼티노의 CupertinoTabBar는 머티리얼의 NavigationBar에 대응되는 UI이다.

 

이러한 점을 명심하고 정확히 어떤 UI가 나오는지 알고 개발을 해야할 것이다.

 

## 전혀 다른 스타일의 UI지만 혼용가능

추가적으로 쿠퍼티노(Cupertino) 디자인과 머티리얼(Material) 디자인은 플러터 내에 혼용이 가능하다.

 

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';


class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: ElevatedButton(
        child: const Text("I'm material button"), 
          onPressed: () => { print("pressed") },
        )
    );
  }
}

 

위와 같이 쿠퍼티노(Cupertino)의 Scaffold에서, 머티리얼(Material)의 버튼을 사용 가능하다.

 

## 기본적으로 플랫폼에 맞게 사용하자

헷갈리지만, 기본적으로 플랫폼에 맞게 사용하면 된다.

iOS - 쿠퍼티노(Cupertino)
Android - 머티리얼(Material)

Web - 머티리얼(Material)

혹은, 요즘 iOS앱도 기본 UI보단 커스터마이징을 많이 하는 추세이니 아예 모든 플랫폼을 머티리얼(Material)로 만드는 방식도 좋다.
(개인적으로는 더 추천하는 방식)

 

## Ref

- https://developer.apple.com/design/human-interface-guidelines/

- https://docs.flutter.dev/ui/widgets/cupertino