Flutter의 AnnotatedRegion 위젯으로 앱의 시스템 UI 스타일 제어하기

728x90

Flutter로 앱을 개발할 때, 앱의 UI뿐만 아니라 디바이스의 상태바(Status Bar)나 네비게이션 바(Navigation Bar)와 같은 시스템 UI의 스타일을 변경하고 싶을 때가 있습니다. AnnotatedRegion 위젯은 이러한 시스템 UI의 스타일을 조정하는 데 유용한 위젯입니다. 주로 상태바의 글자 색상이나 네비게이션 바의 아이콘 스타일을 변경할 때 활용됩니다. 특히 iOS와 Android의 UI 스타일을 일관되게 맞추고 싶다면 AnnotatedRegion 위젯을 통해 시스템 UI의 스타일을 통합적으로 설정할 수 있습니다.

이 글에서는 AnnotatedRegion 위젯의 기본 개념과 사용법, 주요 속성에 대해 설명하고 다양한 예제를 통해 앱의 시스템 UI 스타일을 쉽게 제어하는 방법을 알아보겠습니다.

1. AnnotatedRegion 위젯이란?

AnnotatedRegion은 Flutter에서 시스템 UI 스타일을 제어하기 위해 사용되는 위젯입니다. 상태바와 네비게이션 바의 스타일을 지정할 수 있으며, 이를 통해 시스템 UI와 앱의 디자인을 일관성 있게 맞출 수 있습니다.

주요 특징:

상태바의 글자 색상 변경
네비게이션 바의 아이콘 색상 변경
다른 위젯과 조합해 시스템 UI를 커스터마이징 가능

이 위젯은 Flutter 애플리케이션이 전체 화면을 차지하고, 시스템 UI와 조화를 이루어야 하는 경우에 매우 유용합니다.

2. AnnotatedRegion 위젯의 주요 속성

AnnotatedRegion 위젯에서 가장 중요한 속성은 SystemUiOverlayStyle입니다. 이를 통해 상태바와 네비게이션 바의 색상을 설정할 수 있습니다.

SystemUiOverlayStyle: 상태바 및 네비게이션 바의 스타일을 정의하는 속성입니다. SystemUiOverlayStyle은 시스템 UI의 색상을 변경할 수 있는 여러 가지 옵션을 제공합니다.
- statusBarColor: 상태바의 배경색을 설정합니다.
- statusBarIconBrightness: 상태바의 아이콘 밝기를 설정합니다.
- systemNavigationBarColor: 네비게이션 바의 배경색을 설정합니다.
- systemNavigationBarIconBrightness: 네비게이션 바 아이콘의 밝기를 설정합니다.

3. AnnotatedRegion 위젯의 기본 사용법

AnnotatedRegion 위젯을 사용해 간단하게 상태바의 텍스트 색상을 변경하는 예제를 살펴보겠습니다. 다음 예제에서는 상태바의 텍스트와 아이콘 색상을 밝게 변경해보겠습니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("AnnotatedRegion 위젯 예제")),
        body: AnnotatedRegion<SystemUiOverlayStyle>(
          value: SystemUiOverlayStyle.light, // 상태바의 텍스트 색상을 밝게 설정
          child: Center(
            child: Text("상태바의 텍스트 색상이 변경되었습니다"),
          ),
        ),
      ),
    );
  }
}

위의 예제에서 AnnotatedRegion 위젯을 사용하여 상태바의 텍스트와 아이콘 색상을 밝게 설정했습니다. SystemUiOverlayStyle.light 옵션을 사용해 상태바의 텍스트가 하얀색으로 표시되도록 했으며, 어두운 배경의 앱에 적용하기 적합한 설정입니다.

4. AnnotatedRegion 위젯을 활용한 다양한 시스템 UI 스타일 변경 예제

다음 예제에서는 상태바와 네비게이션 바의 색상과 아이콘 스타일을 모두 변경하는 방법을 보여줍니다.

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

class CustomAnnotatedRegionExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Custom System UI Style"),
        ),
        body: AnnotatedRegion<SystemUiOverlayStyle>(
          value: SystemUiOverlayStyle(
            statusBarColor: Colors.blue, // 상태바 배경색 설정
            statusBarIconBrightness: Brightness.light, // 상태바 아이콘 밝기 설정
            systemNavigationBarColor: Colors.black, // 네비게이션 바 배경색 설정
            systemNavigationBarIconBrightness: Brightness.light, // 네비게이션 바 아이콘 밝기 설정
          ),
          child: Center(
            child: Text(
              "상태바와 네비게이션 바 스타일이 변경되었습니다",
              style: TextStyle(fontSize: 20),
            ),
          ),
        ),
      ),
    );
  }
}

위 코드에서는 SystemUiOverlayStyle을 사용하여 상태바의 배경색을 파란색으로, 네비게이션 바의 배경색을 검은색으로 설정했습니다. 상태바와 네비게이션 바의 아이콘과 텍스트 색상도 Brightness 속성을 통해 모두 밝게 조정되었습니다.

5. 플랫폼별 주의 사항

AnnotatedRegion 위젯을 사용할 때 주의해야 할 점은 플랫폼마다 UI 스타일 적용 방식이 조금씩 다를 수 있다는 점입니다.

Android: 대부분의 SystemUiOverlayStyle 설정이 잘 적용됩니다. 다만, 특정 Android 버전에서는 시스템 UI 스타일이 제한될 수 있습니다.
iOS: statusBarColor 속성은 iOS에서 동작하지 않으며, 대신 statusBarIconBrightness를 사용해 상태바 아이콘 색상을 설정할 수 있습니다.

이처럼 Android와 iOS의 구현 차이를 이해하고, 플랫폼별로 스타일이 다르게 나타날 수 있다는 점을 고려해야 합니다.

6. AnnotatedRegion과 AppBar 위젯을 통한 상태바 색상 조절

상태바의 색상을 직접 변경하는 방법이 필요하다면, AnnotatedRegion 대신 AppBar 위젯을 활용해보는 것도 좋습니다. AppBar는 상태바의 색상을 포함한 다양한 속성을 자동으로 제어하므로, AppBar를 사용해 상태바의 스타일을 설정하는 경우가 더 많습니다.

AppBar(
  backgroundColor: Colors.blue, // 상태바 색상 설정
  title: Text("AppBar Example"),
  brightness: Brightness.dark, // 아이콘 색상 설정
)

이 방법은 AppBar가 있는 페이지에 한해 쉽게 상태바 스타일을 설정할 수 있어, 상태바의 색상을 자주 변경해야 하는 경우 효과적입니다.

7. AnnotatedRegion를 사용할 때 유의할 점

최상단 위젯으로 사용: AnnotatedRegion은 Scaffold나 MaterialApp 아래에 배치해야만 시스템 UI 스타일을 제어할 수 있습니다. 그렇지 않으면 스타일이 제대로 적용되지 않을 수 있습니다.
한 페이지에 여러 개 사용 주의: 한 화면에 여러 AnnotatedRegion 위젯이 있을 경우, 가장 최근에 사용된 스타일이 적용됩니다. 페이지에 한 번만 사용하는 것이 좋습니다.

결론

Flutter의 AnnotatedRegion 위젯은 상태바와 네비게이션 바와 같은 시스템 UI의 스타일을 간단하게 조절할 수 있는 유용한 도구입니다. 상태바의 색상, 텍스트, 아이콘 밝기 등을 제어해 UI의 일관성을 높일 수 있으며, iOS와 Android의 스타일을 통합하여 일관된 사용자 경험을 제공하는 데 도움을 줍니다. 앱의 디자인을 한층 더 개선하고자 한다면, AnnotatedRegion 위젯을 통해 시스템 UI 스타일링을 적용해보세요.