본문 바로가기
Flutter/Flutter FAQ

Flutter 플러터에서 상태 표시줄 색상을 변경하는 방법은 무엇인가요?, How to change status bar color in Flutter?

by 베타코드 2023. 5. 10.
반응형

질문


저는 상태 표시 줄 색상을 흰색으로 변경하려고 합니다. Flutter에서 퍼블을 찾았습니다. 제 Dart 파일에 예제 코드를 사용해 보려고 했습니다.


답변


Flutter 2.0 업데이트 (권장):

최신 Flutter 버전에서는 다음을 사용해야 합니다:

AppBar(
  systemOverlayStyle: SystemUiOverlayStyle(
    // 상태 표시줄 색상
    statusBarColor: Colors.red, 

    // 상태 표시줄 밝기 (선택 사항)
    statusBarIconBrightness: Brightness.dark, // 안드로이드용 (어두운 아이콘)
    statusBarBrightness: Brightness.light, // iOS용 (어두운 아이콘)
  ),
)

안드로이드 전용 (더 많은 유연성):

import 'package:flutter/services.dart';

void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.blue, // 탐색 표시줄 색상
    statusBarColor: Colors.pink, // 상태 표시줄 색상
  ));
}

iOS와 안드로이드 모두:

appBar: AppBar(
  backgroundColor: Colors.red, // 상태 표시줄 색상
)

조금 꼼수지만 iOS와 안드로이드 모두에서 작동합니다:

Container(
  color: Colors.red, // 상태 표시줄 색상
  child: SafeArea(
    left: false,
    right: false,
    bottom: false,
    child: Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue, // 앱 바 색상
      ),
    ),
  ),
) 
반응형

댓글