이 기사는 「 HTC Advent Calendar 2020 」의 6일째의 기사입니다.
이번에는 Flutter의 Widgets 중 하나인 Cupertino widegets에 대해 써 갑니다.

Flutter에서 iOS와 같은 앱을 만들려고 할 때 CupertinoApp 위젯의 CupertinothemeData에 대해 살펴 보았습니다.

Cupertino 위젯

Flutter라고 하면, 머티리얼 디자인을 상상하는 것이 많다고 생각합니다만, 실은 Cupertino라고 하는 iOS풍의 위젯도 제공하고 있습니다.
읽는 방법은 「쿠파치노」로, Apple 본사가 있는 쿠파치노 유래의 명명인 것 같습니다.

Flutter의 테마

간단히 설명하면 Flutter로 앱 전체를 통일감 있는 디자인으로 할 수 있는 구조입니다.
이 구조를 사용하여 디자인을 한 곳에서 통일적으로 관리할 수 있습니다. 예를 들어, iOS의 상태 표시줄 색상이나 텍스트 색상이 마음에 들지 않으면 사용자 정의할 수 있습니다. 또한, 다크 모드용의 프로퍼티도 준비되어 있어, 간단하게 구현할 수 있게 되어 있습니다.

iOS 테마 스타일 만들기

Cupertino 위젯을 사용하기 위해 패키지를 도입합니다.

main.dart

import 'package:flutter/cupertino.dart';

CupertinoApp 위젯을 만들고 CupertinoThemeData 에서 테마를 지정합니다.CupertinoApp 위젯은 Material Component의 MaterialApp 위젯을 대체하는 위젯입니다. MaterialApp 위젯과 거의 동일한 속성을 갖습니다.

main.dart

import 'package:flutter/cupertino.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
        theme: CupertinoThemeData(
            barBackgroundColor: CupertinoColors.lightBackgroundGray,
// ・・・省略
  }
}

위의 코드 예제에서는 barBackgroundColor 를 변경하여 탐색 막대의 배경색을 밝은 회색으로 변경합니다.CupertinoThemeData의 주요 속성은 다음과 같습니다.
barBackgroundColor : 상단의 네비게이션 바와 하단의 탭 바의 배경색을 변경할 수 있습니다.brightness : 앱의 전체 밝기를 변경할 수 있습니다.primaryColor : 앱의 기본 색상을 변경할 수 있습니다.textTheme : Cupertino 위젯에서 사용되는 텍스트 스타일을 변경할 수 있습니다.

화면상에서는 이런 색이 됩니다.
그 외에도 CupertinoIconThemeData 를 사용하면 아이콘 테마 변경도 가능합니다.