如何在Flutter中更改状态栏颜色？

10 浏览
0 Comments

如何在Flutter中更改状态栏颜色？

我试图将状态栏颜色更改为白色。我在Flutter上找到了这个pub。我尝试在我的dart文件中使用示例代码。

admin 更改状态以发布 2023年5月22日
0

2 答案

0 Comments

在我的应用程序中完全正常工作

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:
建议解决方案（Flutter 2.0及以上）

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

0
0 Comments

升级Flutter 2.0（推荐）：

使用最新的Flutter版本，您应该使用：

AppBar(
  systemOverlayStyle: SystemUiOverlayStyle(
    // Status bar color
    statusBarColor: Colors.red, 
    // Status bar brightness (optional)
    statusBarIconBrightness: Brightness.dark, // For Android (dark icons)
    statusBarBrightness: Brightness.light, // For iOS (dark icons)
  ),
)

只在Android上（更灵活）：

import 'package:flutter/services.dart';
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
)

有点瑕疵，但在iOS和Android上都可以运行：

Container(
  color: Colors.red, // Status bar color
  child: SafeArea(
    left: false,
    right: false,
    bottom: false,
    child: Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue, // App bar color
      ),
    ),
  ),
)

0