Как изменить цвет строки состояния в Flutter?

Я пытаюсь изменить цвет строки состояния на белый. Я нашел этот паб на флаттер. Я попытался использовать пример кода в моих файлах дартс.

Ответы

Ответ 1

Работает отлично в моем приложении

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),
    );
  }
}

UPD: Другое решение

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

Ответ 2

Только Android:

import 'package:flutter/services.dart';

После этого вам нужно добавить следующие строки (лучшее место для размещения этих строк - в вашем методе main())

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

IOS и Android:

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

Ответ 3

Если вы используете AppBar, то обновить цвет строки состояния так просто:

Scaffold(
  resizeToAvoidBottomInset: false,
  appBar: AppBar(
    // Use Brightness.light for dark status bar 
    // or Brightness.dark for light status bar
    brightness: Brightness.light 
  ),
  body: ...
)

Ответ 4

Я не могу комментировать прямо в теме, поскольку у меня пока нет необходимой репутации, но автор спросил следующее:

единственная проблема в том, что фон белый, но часы, беспроводная связь и другой текст и значки также белого цвета. Я не уверен, почему !!

Для всех, кто заходит в эту ветку, вот что у меня сработало. Цвет текста строки состояния определяется константой яркости в flutter/material.dart. Чтобы изменить это, настройте решение SystemChrome так, чтобы настроить текст:

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

Возможные значения для Brightness: Brightness.dark и Brightness.light.

Документация:https://api.flutter.dev/flutter/dart-ui/Brightness-class.html https://api.flutter.dev/flutter/services/SystemUiOverlayStyle-class.html

Ответ 5

Вы также можете настроить, используя эту библиотеку eazy lib и short flutter_statusbarcolor 0.2.0

Ответ 6

в файле main.dart Служба импорта как следовать

  import 'package:flutter/services.dart';

и внутри метода сборки просто добавьте эту строку перед возвратом

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

Вот так:

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

Ответ 7

попробуй это:

return MaterialApp(
    ...
    theme: ThemeData(
        primarySwatch: Colors.deepPurple
    ),
    ...
);

Ответ 8

сделать его похожим на цвет панели приложения

import 'package:flutter/material.dart';

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