Làm cách nào để thay đổi màu thanh trạng thái trong Flutter?

Tôi đang cố gắng thay đổi màu thanh trạng thái thành màu trắng. Tôi tìm thấy quán rượu này trên rung động. Tôi đã cố gắng sử dụng mã ví dụ trên các tệp phi tiêu của mình.

Hoạt động hoàn toàn tốt trong ứng dụng của tôi

import 'package:flutter_statusbarcolor/flutter_statusbarcolor.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    FlutterStatusbarcolor.setStatusBarColor(Colors.white);
    return MaterialApp(
      title: app_title,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(title: home_title),
    );
  }
}

( gói này )

UPD: Một giải pháp khác

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.white
));

Cập nhật khuyến cáo):

Trên phiên bản Flutter mới nhất, bạn nên sử dụng:

AppBar(
  backwardsCompatibility: false,
  systemOverlayStyle: SystemUiOverlayStyle(statusBarColor: Colors.orange),
)

Chỉ Android (linh hoạt hơn):

import 'package:flutter/services.dart';

void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.blue, // navigation bar color
    statusBarColor: Colors.pink, // status bar color
  ));
}

Cả iOS và Android:

appBar: AppBar(
  backgroundColor: Colors.red, // status bar color
  brightness: Brightness.light, // status bar brightness
)

Thay vì thường được đề xuất SystemChrome.setSystemUIOverlayStyle()là một dịch vụ trên toàn hệ thống và không đặt lại trên một lộ trình khác, bạn có thể sử dụng AnnotatedRegion<SystemUiOverlayStyle>một tiện ích là một tiện ích và chỉ có hiệu lực cho tiện ích mà bạn kết hợp.

AnnotatedRegion<SystemUiOverlayStyle>(
   value: SystemUiOverlayStyle(
      statusBarColor: Colors.white,
  ),
  child: Scaffold(
      ...
  ),
)

Đối với những người sử dụng AppBar

Nếu bạn sử dụng AppBarthì việc cập nhật màu thanh trạng thái đơn giản như sau:

Scaffold(
  appBar: AppBar(
    // Use [Brightness.light] for black status bar 
    // or [Brightness.dark] for white status bar
    brightness: Brightness.light 
  ),
  body: ...
)

Để áp dụng cho tất cả các thanh ứng dụng:

return MaterialApp(
  theme: Theme.of(context).copyWith(
    appBarTheme: Theme.of(context)
        .appBarTheme
        .copyWith(brightness: Brightness.light),
  ...
  ),

Đối với những người không sử dụng AppBar

Gói nội dung của bạn bằng AnnotatedRegionvà đặt valuethành SystemUiOverlayStyle.lighthoặc SystemUiOverlayStyle.dark:

return AnnotatedRegion<SystemUiOverlayStyle>(
  // Use [SystemUiOverlayStyle.light] for white status bar 
  // or [SystemUiOverlayStyle.dark] for black status bar
  value: SystemUiOverlayStyle.light,
  child: Scaffold(...),
);

Thay đổi màu thanh trạng thái khi bạn không sử dụng AppBar

Đầu tiên nhập cái này

import 'package:flutter/services.dart';

Bây giờ, hãy sử dụng mã bên dưới để thay đổi màu thanh trạng thái trong ứng dụng của bạn khi bạn không sử dụng AppBar

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(

    statusBarColor: AppColors.statusBarColor,/* set Status bar color in Android devices. */
    
    statusBarIconBrightness: Brightness.dark,/* set Status bar icons color in Android devices.*/
    
    statusBarBrightness: Brightness.dark)/* set Status bar icon color in iOS. */
); 

Để thay đổi màu thanh trạng thái iOSkhi bạn đang sử dụngSafeArea

Scaffold(
  body: Container(
    color: Colors.red, /* Set your status bar color here */
    child: SafeArea(child: Container(
      /* Add your Widget here */
    )),
  ),
); 

Tôi không thể bình luận trực tiếp trong chủ đề vì tôi chưa có danh tiếng cần thiết, nhưng tác giả đã hỏi như sau:

vấn đề duy nhất là nền màu trắng nhưng đồng hồ, không dây và các văn bản và biểu tượng khác cũng có màu trắng .. Tôi không chắc tại sao !!

Đối với bất kỳ ai khác đến chủ đề này, đây là những gì đã làm việc cho tôi. Màu văn bản của thanh trạng thái được quyết định bởi hằng số Độ sáng trong flutter/material.dart. Để thay đổi điều này, hãy điều chỉnh SystemChromegiải pháp như vậy để định cấu hình văn bản:

    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.red,
      statusBarBrightness: Brightness.dark,
    ));

Giá trị có thể của bạn cho Brightnesslà Brightness.darkvà Brightness.light.

Tài liệu: https://api.flutter.dev/flutter/dart-ui/Brightness-class.html https://api.flutter.dev/flutter/services/SystemUiOverlayStyle-class.html

Điều này đã làm việc cho tôi:

Dịch vụ nhập khẩu

import 'package:flutter/services.dart';

Sau đó thêm:

@override
  Widget build(BuildContext context) {

    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.white,
      statusBarBrightness: Brightness.dark,
    ));
    return MaterialApp(home: Scaffold(

Tôi nghĩ điều này sẽ giúp bạn:

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
        systemNavigationBarColor: Colors.white, // navigation bar color
        statusBarColor: Colors.white, // status bar color
        statusBarIconBrightness: Brightness.dark, // status bar icons' color
        systemNavigationBarIconBrightness: Brightness.dark, //navigation bar icons' color
    ));

Đây là mọi thứ bạn cần biết:

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

void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.amber, // navigation bar color
    statusBarColor: Colors.white, // status bar color
    statusBarIconBrightness: Brightness.dark, // status bar icon color
    systemNavigationBarIconBrightness: Brightness.dark, // color of navigation controls
  ));
  runApp(MyApp());
}

Nó có thể đạt được trong 2 bước:

1. Đặt màu thanh trạng thái để phù hợp với nền trang của bạn bằng gói FlutterStatusbarcolor
2. Đặt màu sắc của các nút trên thanh trạng thái (pin, wifi, v.v.) bằng cách sử dụng thuộc AppBar.brightnesstính

Nếu bạn có AppBar:

  @override
  Widget build(BuildContext context) {
    FlutterStatusbarcolor.setStatusBarColor(Colors.white);
    return Scaffold(
      appBar: AppBar(
        brightness: Brightness.light,
        // Other AppBar properties
      ),
      body: Container()
    );
  }

Nếu bạn không muốn hiển thị thanh ứng dụng trong trang:

  @override
  Widget build(BuildContext context) {
    FlutterStatusbarcolor.setStatusBarColor(Colors.white);
    return Scaffold(
      appBar: AppBar(
        brightness: Brightness.light,
        elevation: 0.0,
        toolbarHeight: 0.0, // Hide the AppBar
      ),
      body: Container()
  }

trên dịch vụ nhập tệp main.dart như sau

  import 'package:flutter/services.dart';

và phương thức xây dựng bên trong chỉ cần thêm dòng này trước khi trả về

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.orange
)); 

Như thế này:

@override
 Widget build(BuildContext context) {
   SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
       statusBarColor: CustomColors.appbarcolor
    ));
    return MaterialApp(
    home: MySplash(),
    theme: ThemeData(
      brightness: Brightness.light,
      primaryColor: CustomColors.appbarcolor,
    ),
  );
 }

Cái này cũng sẽ hoạt động

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);

 return Scaffold(
      backgroundColor: STATUS_BAR_COLOR_HERE,
      body: SafeArea(
        child: scaffoldBody(),
      ),
);

Đây là cách tốt nhất cho đến nay, nó không yêu cầu thêm plugin.

Widget emptyAppBar(){
  return PreferredSize(
      preferredSize: Size.fromHeight(0.0), 
      child: AppBar(
        backgroundColor: Color(0xFFf7f7f7),
        brightness: Brightness.light,
      )
  );
}

và gọi nó trong giàn giáo của bạn như thế này

return Scaffold(
      appBar: emptyAppBar(),
     .
     .
     .

để làm cho nó giống như màu thanh ứng dụng của bạn

import 'package:flutter/material.dart';

 Widget build(BuildContext context) {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      systemNavigationBarColor: Colors.transparent,
  ));
 }

Hoạt động cho cả iOS và Android

import 'package:flutter/services.dart';

@override
Widget build(BuildContext context) {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);

  return Scaffold();
}
    

@override
Widget build(BuildContext context) {
  return Theme(
    data: ThemeData(brightness: Brightness.dark),
    child: Scaffold()
    ....
  )
}

Tôi gặp vấn đề với tất cả các câu trả lời được đề cập, ngoại trừ giải pháp mà tôi đã tự làm: Container(width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).padding.top, color: Colors.green) Đối với các chế độ xem, không có appBar nào được thêm vào, tôi chỉ sử dụng vùng chứa có nền có chiều cao chính xác khớp với chiều cao thanh trạng thái. Trong trường hợp này, mỗi chế độ xem có thể có màu trạng thái khác nhau và tôi không cần phải lo lắng và suy nghĩ về một số logic, rằng chế độ xem sai bằng cách nào đó có màu sắc sai.

Không có giải pháp hiện có nào giúp được tôi, bởi vì tôi không sử dụng AppBarvà tôi không muốn đưa ra tuyên bố bất cứ khi nào người dùng chuyển đổi chủ đề ứng dụng. Tôi cần một cách phản ứng để chuyển đổi giữa chế độ sáng và tối và nhận thấy rằng nó AppBarsử dụng một tiện ích con được gọi là Semanticsđể thiết lập màu thanh trạng thái.

Về cơ bản, đây là cách tôi thực hiện:

return Semantics(
  container: false,  // don't make it a new node in the hierarchy
  child: AnnotatedRegion<SystemUiOverlayStyle>(
    value: SystemUiOverlayStyle.light,  // or .dark
    child: MyApp(),  // your widget goes here
  ),
);

• Semanticsđược nhập khẩu từ package:flutter/material.dart.
• SystemUiOverlayStyleđược nhập khẩu từ package:flutter/services.dart.

Tôi đã giải quyết nó bằng cách thay đổi toàn bộ màu nền như sau:

Trong màn hình chính:

return Scaffold (

  backgroundColor: Colors.black,

  body: SafeArea(
  
 ),

);

Hầu hết các câu trả lời là sử dụng SystemChromechỉ hoạt động cho Android. Giải pháp của tôi là kết hợp cả hai AnnotatedRegionvà SafeAreathành Widget mới để nó cũng hoạt động trong iOS. Và tôi có thể sử dụng nó có hoặc không AppBar.

class ColoredStatusBar extends StatelessWidget {
  const ColoredStatusBar({Key key, this.color, this.child}) : super(key: key);

  final Color color;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        statusBarColor: color ?? Colors.blue,
      ),
      child: Container(
        color: color ?? Colors.blue,
        child: SafeArea(
          bottom: false,
          child: Container(
            child: child,
          ),
        ),
      ),
    );
  }
}

Cách sử dụng: Đặt nó lên đầu tiện ích của trang.

@override
Widget build(BuildContext context) {
  return ColoredStatusBar(
    child: /* your child here */,
  );
}

Những gì bạn muốn là Chủ đề. Chúng quan trọng hơn rất nhiều so với màu AppBar.

https://flutter.io/cookbook/design/themes/