Система навигации Flutter System и цвет строки состояния

Question

Как изменить систему NavBar с помощью Android Studios и флаттера?

Я предполагаю, что его нет в main.dart, и мне нужно просмотреть системные файлы Android, но когда я попытался отредактировать style.xml, но редактор тем не позволяет мне редактировать какие-либо цвета?

Буду признателен за любую помощь, я хотел бы иметь легкий NavBar с легким нижним AppBar.

Answer 1

Примечание: для этого требуется более поздняя версия Flutter, поскольку она ссылается на API, добавленные за последнюю неделю .

Вы можете создать пользовательский SystemUiOverlayStyle, используя конструктор по умолчанию. Цвет системной навигационной панели определяется там. Но чтобы избежать установки большого количества нулевых значений, используйте метод copyWith, чтобы обновить значения из существующей светлой / темной темы.

const mySystemTheme= SystemUiOverlayStyle.light
 .copyWith(systemNavigationBarColor: Colors.red);

Вы можете установить цвет системной навигации с помощью статических методов SystemChrome.

SystemChrome.setSystemUiOverlayStyle(mySystemTheme);

Однако, если у вас есть несколько виджетов, которые устанавливают это значение, или используете материал AppBar или Cupertino NavBar, ваше значение может быть перезаписано ими. Вместо этого вы можете использовать новый API AnnotatedRegion, чтобы сказать флаттеру, что он автоматически переключается на этот стиль каждый раз, когда виджеты видны. Например, если вы хотите использовать вышеуказанную тему в любое время, когда вы находитесь на определенном маршруте, вы можете обернуть ее в виджет AnnotatedRegion, например, так.

Widget myRoute(BuildContext context) {
  return new AnnotatedRegion<SystemUiOverlayStyle>(
    value: mySystemTheme,
    child: new MyRoute(),
  );
}

Этот не изменит вашу тему обратно на предыдущее значение, если вы выберете маршрут, однако

Answer 2

Вы можете использовать SystemChrome класс для изменения строки состояния и цвета панели навигации.

import 'package:flutter/services.dart';

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

Answer 3

Вы можете просто позвонить SystemChrome.setSystemUIOverlayStyle:

import 'package:flutter/services.dart

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);