Как установить цвет строки состояния, когда AppBar нет.
Я пробовал это, но не работает.
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
return new Scaffold(
body: new Container(
color: UniQueryColors.colorBackground,
child: new ListView.builder(
itemCount: 7,
itemBuilder: (BuildContext context, int index){
if (index == 0){
return addTopInfoSection();
}
},
),
),
);
}
Вывод выглядит так:
Во-первых, пакет импортных services:
import 'package:flutter/services.dart';
Затем просто поместите это в функцию сборки вашего приложения:
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
statusBarColor: Colors.blue, //or set color with: Color(0xFF0000FF)
));
Кроме того, вы можете установить полезные переменные, как: statusBarIconBrightness, systemNavigationBarColor или systemNavigationBarDividerColor
Если вы возьмете лут в исходном коде AppBar, вы увидите, что они используют виджет AnnotatedRegion.
Насколько я понимаю, этот виджет автоматически устанавливает цвет строки состояния/панели навигации, когда обернутый в него виджет перекрывается панелью состояния/навигации.
Вы можете обернуть свой виджет так:
import 'package:flutter/services.dart';
...
Widget build(BuildContext context) {
return Scaffold(
body: AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle.light,
child: ...,
),
);
}
На Android добавьте следующее в onCreate в MainActivity.java, после вызова super.onCreate(savedInstanceState);
. GetWindow() setStatusBarColor (0x00000000);
или вы можете использовать плагин flutter_statusbarcolor
changeStatusColor(Color color) async {
try {
await FlutterStatusbarcolor.setStatusBarColor(color);
} on PlatformException catch (e) {
print(e);
}
}
При поиске SystemChrome я нашел это: https://docs.flutter.io/flutter/services/SystemChrome/setSystemUIOverlayStyle.html
Прямо над образцом кода находится абзац о AppBar.brightness.
Вы должны иметь возможность добавить AppBar следующим образом:
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
return new Scaffold(
appBar: new AppBar(
title: new Text('Nice title!'),
brightness: Brightness.light,
),
body: new Container(
color: UniQueryColors.colorBackground,
child: new ListView.builder(
itemCount: 7,
itemBuilder: (BuildContext context, int index){
if (index == 0){
return addTopInfoSection();
}
},
),
),
);
}
Информация о яркости Heres
Widget build(BuildContext context) {
return new Scaffold(
body: new Container(
color: UniQueryColors.colorBackground,
/* Wrapping ListView.builder with MediaQuery.removePadding() removes the default padding of the ListView.builder() and the status bar takes the color of the app background */
child: MediaQuery.removePadding(
removeTop: true,
context: context,
child: ListView.builder(
itemCount: 7,
itemBuilder: (BuildContext context, int index){
if (index == 0){
return addTopInfoSection();
}
},
),
),
),
);
}
Цвет строки состояния отображается системой Android. Можно ли установить флаттера или нет, для обсуждения: как сделать индикатор состояния Android в Flutter
Однако вы можете изменить цвет строки состояния в специальном коде Android, отредактировав тему: Как изменить цвет строки состояния в android
Для iOS вам нужно будет увидеть их документацию - я не знаком с платформой.
На самом деле есть две библиотеки Dart, одна для установки темной/темной темы в строке состояния, а другая для настройки цвета. Я тоже не использовал, но, очевидно, у кого-то была такая же проблема, с которой вы столкнулись, и в итоге разработали свой собственный пакет.
Вы должны решить этот вопрос двумя способами:
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
statusBarColor: Colors.black,
));
или же
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light.copyWith(
statusBarColor: Colors.white,
));
Scaffold(
appBar: AppBar(
brightness: Brightness.light,
)
)
или же
Scaffold(
appBar: AppBar(
brightness: Brightness.dark,
)
)
Поскольку решение уже упоминалось, я реализую его по-другому. Следующим подходом является удаление AppBar и изменение цвета строки состояния с помощью виджета " Контейнер".
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Test',
home: Scaffold(
primary: true,
appBar: EmptyAppBar(),
body: MyScaffold(),
),
),
);
}
class MyScaffold extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Text(
'Test',
),
);
}
}
class EmptyAppBar extends StatelessWidget implements PreferredSizeWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.black,
);
}
@override
Size get preferredSize => Size(0.0, 0.0);
}
Ссылка: выпуск GitHub
Используйте EmptyAppBar с некоторым кодом для восстановления цвета, как в AppBar.
class EmptyAppBar extends StatelessWidget implements PreferredSizeWidget {
static const double _defaultElevation = 4.0;
@override
Widget build(BuildContext context) {
final ThemeData themeData = Theme.of(context);
final AppBarTheme appBarTheme = AppBarTheme.of(context);
final Brightness brightness = appBarTheme.brightness
?? themeData.primaryColorBrightness;
final SystemUiOverlayStyle overlayStyle = brightness == Brightness.dark
? SystemUiOverlayStyle.light
: SystemUiOverlayStyle.dark;
return Semantics(
container: true,
child: AnnotatedRegion<SystemUiOverlayStyle>(
value: overlayStyle,
child: Material(
color: appBarTheme.color
?? themeData.primaryColor,
elevation: appBarTheme.elevation
?? _defaultElevation,
child: Semantics(
explicitChildNodes: true,
child: Container(),
),
),
),
);
}
@override
Size get preferredSize => Size(0.0,0.0);
}
Вы можете использовать класс SystemChrome для изменения строки состояния и цвета панели навигации. Первый импорт
import 'package:flutter/services.dart';
После этого вам нужно добавить следующие строки (лучшее место для размещения этих строк в вашем методе main())
void main() {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
systemNavigationBarColor: Colors.blue, // navigation bar color
statusBarColor: Colors.pink, // status bar color
));
}
попробуй это:
return MaterialApp(
...
theme: ThemeData(
primarySwatch: Colors.deepPurple
),
...
);
Просто добавьте это к вашей функции сборки или основной функции.
import 'package:flutter/services.dart';
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
...
}
Here You can use flutter flutter_statusbar_manager 1.0.2 lib
Flutter Statusbar Manager, lets you control the status bar color, style (theme), visibility, and translucent properties across iOS and Android. With some added bonus for Android to control the Navigation Bar.
import 'package:flutter/material.dart';
import 'dart:async';
import 'package:flutter/services.dart';
import 'package:flutter_statusbar_manager/flutter_statusbar_manager.dart';
void main() => runApp(new MyApp());
class MyApp extends StatefulWidget {
MyApp();
factory MyApp.forDesignTime() {
// TODO: add arguments
return new MyApp();
}
@override
_MyAppState createState() => new _MyAppState();
}
class _MyAppState extends State<MyApp> {
double _statusBarHeight = 0.0;
bool _statusBarColorAnimated = false;
Color _statusBarColor = Colors.black;
double _statusBarOpacity = 1.0;
bool _statusBarHidden = false;
StatusBarAnimation _statusBarAnimation = StatusBarAnimation.NONE;
StatusBarStyle _statusBarStyle = StatusBarStyle.DEFAULT;
bool _statusBarTranslucent = false;
bool _loadingIndicator = false;
bool _fullscreenMode = false;
bool _navBarColorAnimated = false;
Color _navBarColor = Colors.black;
NavigationBarStyle _navBarStyle = NavigationBarStyle.DEFAULT;
@override
void initState() {
super.initState();
initPlatformState();
}
// Platform messages are asynchronous, so we initialize in an async method.
Future<void> initPlatformState() async {
double statusBarHeight;
// Platform messages may fail, so we use a try/catch PlatformException.
try {
statusBarHeight = await FlutterStatusbarManager.getHeight;
} on PlatformException {
statusBarHeight = 0.0;
}
if (!mounted) return;
setState(() {
_statusBarHeight = statusBarHeight;
});
}
Widget renderTitle(String text) {
final textStyle = TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold);
return Text(text, style: textStyle);
}
void colorBarChanged(Color val) {
this.setState(() {
_statusBarColor = val;
});
updateStatusBar();
}
void updateStatusBar() {
FlutterStatusbarManager.setColor(
_statusBarColor.withOpacity(_statusBarOpacity),
animated: _statusBarColorAnimated);
}
void statusBarAnimationChanged(StatusBarAnimation val) {
this.setState(() {
_statusBarAnimation = val;
});
}
void statusBarStyleChanged(StatusBarStyle val) {
this.setState(() {
_statusBarStyle = val;
});
FlutterStatusbarManager.setStyle(val);
}
void colorNavBarChanged(Color val) {
this.setState(() {
_navBarColor = val;
});
updateNavBar();
}
void updateNavBar() {
FlutterStatusbarManager.setNavigationBarColor(_navBarColor,
animated: _navBarColorAnimated);
}
void navigationBarStyleChanged(NavigationBarStyle val) {
this.setState(() {
_navBarStyle = val;
});
FlutterStatusbarManager.setNavigationBarStyle(val);
}
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: const Text('Statusbar Manager example'),
),
body: new Container(
child: new Scrollbar(
child: new ListView(
padding: EdgeInsets.symmetric(vertical: 15.0, horizontal: 20.0),
children: <Widget>[
renderTitle("Status Bar Height: $_statusBarHeight"),
Divider(height: 25.0),
renderTitle("Status Bar Color:"),
SwitchListTile(
value: _statusBarColorAnimated,
title: new Text("Animated:"),
onChanged: (bool value) {
this.setState(() {
_statusBarColorAnimated = value;
});
},
),
Text("Color:"),
RadioListTile(
value: Colors.black,
title: Text("Black"),
onChanged: colorBarChanged,
dense: true,
groupValue: _statusBarColor),
RadioListTile(
value: Colors.orange,
title: Text("Orange"),
onChanged: colorBarChanged,
dense: true,
groupValue: _statusBarColor),
RadioListTile(
value: Colors.greenAccent,
title: Text("Green"),
onChanged: colorBarChanged,
dense: true,
groupValue: _statusBarColor),
RadioListTile(
value: Colors.white30,
title: Text("White"),
onChanged: colorBarChanged,
dense: true,
groupValue: _statusBarColor),
Text("Opacity:"),
Slider(
value: _statusBarOpacity,
min: 0.0,
max: 1.0,
onChanged: (double val) {
this.setState(() {
_statusBarOpacity = val;
});
updateStatusBar();
},
),
Divider(height: 25.0),
renderTitle("Status Bar Hidden:"),
SwitchListTile(
title: new Text("Hidden:"),
value: _statusBarHidden,
onChanged: (bool val) {
this.setState(() {
_statusBarHidden = val;
});
FlutterStatusbarManager.setHidden(_statusBarHidden,
animation: _statusBarAnimation);
},
),
Text("Animation:"),
RadioListTile(
value: StatusBarAnimation.NONE,
title: Text("NONE"),
onChanged: statusBarAnimationChanged,
dense: true,
groupValue: _statusBarAnimation),
RadioListTile(
value: StatusBarAnimation.FADE,
title: Text("FADE"),
onChanged: statusBarAnimationChanged,
dense: true,
groupValue: _statusBarAnimation),
RadioListTile(
value: StatusBarAnimation.SLIDE,
title: Text("SLIDE"),
onChanged: statusBarAnimationChanged,
dense: true,
groupValue: _statusBarAnimation),
Divider(height: 25.0),
renderTitle("Status Bar Style:"),
RadioListTile(
value: StatusBarStyle.DEFAULT,
title: Text("DEFAULT"),
onChanged: statusBarStyleChanged,
dense: true,
groupValue: _statusBarStyle),
RadioListTile(
value: StatusBarStyle.LIGHT_CONTENT,
title: Text("LIGHT_CONTENT"),
onChanged: statusBarStyleChanged,
dense: true,
groupValue: _statusBarStyle),
RadioListTile(
value: StatusBarStyle.DARK_CONTENT,
title: Text("DARK_CONTENT"),
onChanged: statusBarStyleChanged,
dense: true,
groupValue: _statusBarStyle),
Divider(height: 25.0),
renderTitle("Status Bar Translucent:"),
SwitchListTile(
title: new Text("Translucent:"),
value: _statusBarTranslucent,
onChanged: (bool val) {
this.setState(() {
_statusBarTranslucent = val;
});
FlutterStatusbarManager
.setTranslucent(_statusBarTranslucent);
},
),
Divider(height: 25.0),
renderTitle("Status Bar Activity Indicator:"),
SwitchListTile(
title: new Text("Indicator:"),
value: _loadingIndicator,
onChanged: (bool val) {
this.setState(() {
_loadingIndicator = val;
});
FlutterStatusbarManager
.setNetworkActivityIndicatorVisible(_loadingIndicator);
},
),
Divider(height: 25.0),
renderTitle("Navigation Bar Color:"),
SwitchListTile(
value: _navBarColorAnimated,
title: new Text("Animated:"),
onChanged: (bool value) {
this.setState(() {
_navBarColorAnimated = value;
});
},
),
Text("Color:"),
RadioListTile(
value: Colors.black,
title: Text("Black"),
onChanged: colorNavBarChanged,
dense: true,
groupValue: _navBarColor),
RadioListTile(
value: Colors.orange,
title: Text("Orange"),
onChanged: colorNavBarChanged,
dense: true,
groupValue: _navBarColor),
RadioListTile(
value: Colors.greenAccent,
title: Text("Green"),
onChanged: colorNavBarChanged,
dense: true,
groupValue: _navBarColor),
RadioListTile(
value: Colors.white12,
title: Text("white"),
onChanged: colorNavBarChanged,
dense: true,
groupValue: _navBarColor),
Divider(height: 25.0),
renderTitle("Navigation Bar Style:"),
RadioListTile(
value: NavigationBarStyle.DEFAULT,
title: Text("DEFAULT"),
onChanged: navigationBarStyleChanged,
dense: true,
groupValue: _navBarStyle),
RadioListTile(
value: NavigationBarStyle.LIGHT,
title: Text("LIGHT"),
onChanged: navigationBarStyleChanged,
dense: true,
groupValue: _navBarStyle),
RadioListTile(
value: NavigationBarStyle.DARK,
title: Text("DARK"),
onChanged: navigationBarStyleChanged,
dense: true,
groupValue: _navBarStyle),
Divider(height: 25.0),
renderTitle("Fullscreen mode:"),
SwitchListTile(
title: new Text("Fullscreen:"),
value: _fullscreenMode,
onChanged: (bool val) {
this.setState(() {
_fullscreenMode = val;
});
FlutterStatusbarManager.setFullscreen(_fullscreenMode);
},
),
],
),
),
),
),
);
}
}