[flutter] 플러터(Flutter)에서 상태바(Status Bar) 설정하기

Flutter는 크로스 플랫폼 모바일 앱 개발을 위한 프레임워크로, iOS와 Android 모두에서 매끄러운 사용자 경험을 제공합니다. 앱의 외관을 개선하기 위해 상태바를 커스텀하는 방법을 알아봅시다.

상태바 배경색 설정하기

상태바의 배경색은 앱의 테마 색상과 일치하도록 설정할 수 있습니다. 이를 위해서는 앱의 MaterialApp 위젯을 사용하여 theme 속성을 설정해야 합니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.blue,         // 상태바 배경색 설정
        appBarTheme: AppBarTheme(
          backgroundColor: Colors.blue,     // 앱바 배경색과 동일하게 설정
        ),
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter App'),
      ),
      body: Center(
        child: Text('Hello, World!'),
      ),
    );
  }
}

위의 예시 코드에서는 primaryColor 속성을 사용하여 상태바의 배경색을 파란색으로 설정하였습니다. 앱바의 배경색과 동일하게 설정하여 일관된 디자인을 구현할 수 있습니다.

상태바 아이콘 및 글자 색상 변경하기

상태바의 아이콘 및 글자 색상은 기본적으로 시스템 테마에 따라 자동으로 설정됩니다. 하지만 원하는 경우에는 이를 프로그래밍적으로 변경할 수 있습니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 상태바 아이콘 및 글자 색상 변경
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
      statusBarIconBrightness: Brightness.light,    // 아이콘 색상을 밝게 설정
      statusBarBrightness: Brightness.dark,         // 배경 밝기를 어둡게 설정
    ));
    
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter App'),
      ),
      body: Center(
        child: Text('Hello, World!'),
      ),
    );
  }
}

위의 코드에서는 setSystemUIOverlayStyle 함수를 사용하여 상태바의 아이콘 색상과 배경 밝기를 설정하였습니다. statusBarIconBrightnessBrightness.light로 설정하면 아이콘의 색상이 밝아지며, statusBarBrightnessBrightness.dark로 설정하면 배경이 어둡게 변합니다.

결론

플러터(Flutter)를 사용하여 앱을 개발할 때, 상태바를 커스텀하여 앱의 외관을 개선할 수 있습니다. 상태바의 배경색을 설정하고 아이콘 및 글자 색상을 변경하는 방법을 알아봤습니다. 상태바를 커스텀함으로써 사용자 경험을 개선하고 일관된 디자인을 구현할 수 있습니다.

더 자세한 내용은 Flutter 공식 문서를 참고하세요.


참고: 이 예시 코드는 Flutter 2.0.0 버전을 기준으로 작성되었습니다.