[Flutter] Material VS Cupertino 차이

아무래도 Flutter는 구글에서 만든 프레임워크이다보니, 구글의 서비스들과 좋은 연동성을 보이는 것 같습니다.

 

Material Design은 구글에서 발표한 UI 가이드 라인입니다.

플러터에서 Material Design은 Android UI 컴포넌트를 제공합니다.

이와 반대로, Cupertino Design은 Apple UI 컴포넌트를 제공합니다. 

 

플러터에 자신만의 UI 스타일을 적용하지 않는다면, 99%의 플러터 사용자는 Material Design 이나 Cupertino Design을 적용하게 될겁니다. (커스텀한 UI를 적용한다고 해도 Material Design이나 Cupertino를 사용하는 경우가 많습니다. feat. class override )

 

Android Studio에서 Flutter 프로젝트를 새로 생성하면 Material Design이 적용되어 있는걸 확인할 수 있습니다.

플러터 입문자라면 main.dart파일의 상단에 다음의 코드처럼 materialApp을 공식처럼 적용하셔도 큰 문제 없습니다.

// main.dart
// Material Design을 적용을 위한 package 적용
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
  
  	// main.dart의 최상단에 다음처럼 MaterialApp으로 감싸줍니다.
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Container(),
    );
  }
}

 

Cupertino Design을 적용하고 싶다면 다음 링크를 참조하세요.

https://api.flutter.dev/flutter/cupertino/CupertinoApp-class.html

CupertinoApp class - cupertino library - Dart API