Flutter状态栏颜色自定义插件flutter_statusbarcolor_ns_ohos的使用
Flutter状态栏颜色自定义插件flutter_statusbarcolor_ns_ohos的使用
插件简介
flutter_statusbarcolor_ns_ohos 是一个 Flutter 插件，用于更改 Flutter 应用的状态栏颜色或导航栏颜色。
使用方法
在 pubspec.yaml 文件中添加依赖：
dependencies:
flutter_statusbarcolor_ns_ohos: 1.0.1
完整示例代码
example/lib/main.dart
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_statusbarcolor_ns_ohos/flutter_statusbarcolor_ns_ohos.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
[@override](/user/override)
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
Color _randomStatusColor = Colors.black;
Color _randomNavigationColor = Colors.black;
bool? _useWhiteStatusBarForeground;
bool? _useWhiteNavigationBarForeground;
[@override](/user/override)
initState() {
super.initState();
WidgetsBinding.instance.addObserver(this);
}
[@override](/user/override)
dispose() {
WidgetsBinding.instance.removeObserver(this);
super.dispose();
}
[@override](/user/override)
didChangeAppLifecycleState(AppLifecycleState state) {
if (state == AppLifecycleState.resumed) {
if (_useWhiteStatusBarForeground != null)
FlutterStatusbarcolor.setStatusBarWhiteForeground(
_useWhiteStatusBarForeground!);
if (_useWhiteNavigationBarForeground != null)
FlutterStatusbarcolor.setNavigationBarWhiteForeground(
_useWhiteNavigationBarForeground!);
}
super.didChangeAppLifecycleState(state);
}
changeStatusColor(Color color) async {
try {
await FlutterStatusbarcolor.setStatusBarColor(color, animate: true);
if (useWhiteForeground(color)) {
FlutterStatusbarcolor.setStatusBarWhiteForeground(true);
FlutterStatusbarcolor.setNavigationBarWhiteForeground(true);
_useWhiteStatusBarForeground = true;
_useWhiteNavigationBarForeground = true;
} else {
FlutterStatusbarcolor.setStatusBarWhiteForeground(false);
FlutterStatusbarcolor.setNavigationBarWhiteForeground(false);
_useWhiteStatusBarForeground = false;
_useWhiteNavigationBarForeground = false;
}
} on PlatformException catch (e) {
debugPrint(e.toString());
}
}
changeNavigationColor(Color color) async {
try {
await FlutterStatusbarcolor.setNavigationBarColor(color, animate: true);
} on PlatformException catch (e) {
debugPrint(e.toString());
}
}
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
title: Text('Flutter statusbar color plugin example'),
bottom: TabBar(
tabs: <Widget>[
Tab(text: 'Statusbar'),
Tab(text: 'Navigationbar(android only)')
],
),
),
body: TabBarView(
children: <Widget>[
Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Builder(builder: (BuildContext context) {
return ElevatedButton(
onPressed: () =>
FlutterStatusbarcolor.getStatusBarColor()
.then((Color? color) {
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(
content: Text(color.toString()),
backgroundColor: color,
duration: const Duration(milliseconds: 200),
));
}),
child: Text(
'Show Statusbar Color',
style: TextStyle(color: Colors.white),
));
}),
Padding(padding: const EdgeInsets.all(10.0)),
ElevatedButton(
onPressed: () => changeStatusColor(Colors.transparent),
child: Text('Transparent'),
),
Padding(padding: const EdgeInsets.all(10.0)),
ElevatedButton(
onPressed: () {
Color color = Colors.amberAccent;
changeStatusColor(color);
},
child: Text('amber-accent'),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.amberAccent),
),
),
Padding(padding: const EdgeInsets.all(10.0)),
ElevatedButton(
onPressed: () => changeStatusColor(Colors.tealAccent),
child: Text('teal-accent'),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.tealAccent),
),
),
Padding(padding: const EdgeInsets.all(10.0)),
ElevatedButton(
onPressed: () =>
FlutterStatusbarcolor.setStatusBarWhiteForeground(true)
.then((_) => _useWhiteStatusBarForeground = true),
child: Text(
'light foreground',
style: TextStyle(color: Colors.white),
),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.black),
),
),
Padding(padding: const EdgeInsets.all(10.0)),
ElevatedButton(
onPressed: () =>
FlutterStatusbarcolor.setStatusBarWhiteForeground(false)
.then((_) => _useWhiteStatusBarForeground = false),
child: Text('dark foreground',
style: TextStyle(color: Colors.black)),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.white),
),
),
Padding(padding: const EdgeInsets.all(10.0)),
ElevatedButton(
onPressed: () {
Random rnd = Random();
Color color = Color.fromARGB(
255,
rnd.nextInt(255),
rnd.nextInt(255),
rnd.nextInt(255),
);
changeStatusColor(color);
setState(() => _randomStatusColor = color);
},
child: Text(
'Random color',
style: TextStyle(
color: useWhiteForeground(_randomStatusColor)
? Colors.white
: Colors.black,
),
),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(_randomStatusColor),
),
),
],
),
Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Builder(builder: (BuildContext context) {
return ElevatedButton(
onPressed: () =>
FlutterStatusbarcolor.getNavigationBarColor()
.then((Color? color) {
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text(color.toString()),
backgroundColor: color,
duration: const Duration(milliseconds: 200),
));
}),
child: Text(
'Show Navigationbar Color',
style: TextStyle(color: Colors.white),
),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.black),
),
);
}),
Padding(padding: const EdgeInsets.all(10.0)),
ElevatedButton(
onPressed: () => changeNavigationColor(Colors.green[400]!),
child: Text('Green-400'),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color?>(Colors.green[400]),
),
),
Padding(padding: const EdgeInsets.all(10.0)),
ElevatedButton(
onPressed: () =>
changeNavigationColor(Colors.lightBlue[100]!),
child: Text('LightBlue-100'),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color?>(
Colors.lightBlue[100]),
),
),
Padding(padding: const EdgeInsets.all(10.0)),
ElevatedButton(
onPressed: () =>
changeNavigationColor(Colors.cyanAccent[200]!),
child: Text('CyanAccent-200'),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color?>(Colors.cyan[200]),
),
),
Padding(padding: const EdgeInsets.all(10.0)),
ElevatedButton(
onPressed: () =>
FlutterStatusbarcolor
.setNavigationBarWhiteForeground(true)
.then((_) => _useWhiteNavigationBarForeground = true),
child: Text(
'light foreground',
style: TextStyle(color: Colors.white),
),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.black),
),
),
Padding(padding: const EdgeInsets.all(10.0)),
ElevatedButton(
onPressed: () =>
FlutterStatusbarcolor
.setNavigationBarWhiteForeground(false)
.then((_) => _useWhiteNavigationBarForeground = false),
child: Text('dark foreground',
style: TextStyle(color: Colors.black)),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.white),
),
),
Padding(padding: const EdgeInsets.all(10.0)),
ElevatedButton(
onPressed: () {
Random rnd = Random();
Color color = Color.fromARGB(
255,
rnd.nextInt(255),
rnd.nextInt(255),
rnd.nextInt(255),
);
setState(() => _randomNavigationColor = color);
changeNavigationColor(color);
},
child: Text(
'Random color',
style: TextStyle(
color: useWhiteForeground(_randomNavigationColor)
? Colors.white
: Colors.black,
),
),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(
_randomNavigationColor),
),
),
],
),
],
),
),
),
);
}
}
更多关于Flutter状态栏颜色自定义插件flutter_statusbarcolor_ns_ohos的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter状态栏颜色自定义插件flutter_statusbarcolor_ns_ohos的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
flutter_statusbarcolor_ns_ohos 是一个 Flutter 插件，用于在 Android 和 HarmonyOS（鸿蒙系统）上自定义状态栏的颜色。这个插件可以帮助你轻松地改变状态栏的背景颜色、图标颜色（亮色或暗色）等。
安装插件
首先，你需要在 pubspec.yaml 文件中添加 flutter_statusbarcolor_ns_ohos 插件的依赖：
dependencies:
flutter:
sdk: flutter
flutter_statusbarcolor_ns_ohos: ^1.0.0 # 请使用最新版本
然后运行 flutter pub get 来安装插件。
使用插件
1. 导入插件
在需要使用插件的 Dart 文件中，导入 flutter_statusbarcolor_ns_ohos：
import 'package:flutter_statusbarcolor_ns_ohos/flutter_statusbarcolor_ns_ohos.dart';
2. 设置状态栏颜色
你可以使用 FlutterStatusbarcolor.setStatusBarColor 方法来设置状态栏的背景颜色：
FlutterStatusbarcolor.setStatusBarColor(Colors.blue);
3. 设置状态栏图标颜色
你可以使用 FlutterStatusbarcolor.setStatusBarWhiteForeground 方法来设置状态栏图标的颜色。这个方法接受一个布尔值参数，true 表示使用亮色（白色）图标，false 表示使用暗色（黑色）图标。
FlutterStatusbarcolor.setStatusBarWhiteForeground(true);
4. 设置导航栏颜色
如果你还想自定义导航栏的颜色，可以使用 FlutterStatusbarcolor.setNavigationBarColor 方法：
FlutterStatusbarcolor.setNavigationBarColor(Colors.green);
5. 设置导航栏图标颜色
类似地，你可以使用 FlutterStatusbarcolor.setNavigationBarWhiteForeground 方法来设置导航栏图标的颜色：
FlutterStatusbarcolor.setNavigationBarWhiteForeground(false);
示例代码
下面是一个完整的示例代码，展示了如何使用 flutter_statusbarcolor_ns_ohos 插件来自定义状态栏和导航栏的颜色：
import 'package:flutter/material.dart';
import 'package:flutter_statusbarcolor_ns_ohos/flutter_statusbarcolor_ns_ohos.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: HomeScreen(),
);
}
}
class HomeScreen extends StatefulWidget {
[@override](/user/override)
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
[@override](/user/override)
void initState() {
super.initState();
// 设置状态栏颜色为蓝色
FlutterStatusbarcolor.setStatusBarColor(Colors.blue);
// 设置状态栏图标为亮色（白色）
FlutterStatusbarcolor.setStatusBarWhiteForeground(true);
// 设置导航栏颜色为绿色
FlutterStatusbarcolor.setNavigationBarColor(Colors.green);
// 设置导航栏图标为暗色（黑色）
FlutterStatusbarcolor.setNavigationBarWhiteForeground(false);
}
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('状态栏颜色自定义'),
),
body: Center(
child: Text('Hello, World!'),
),
);
}
}