Android 和 IOS 的 Flutter 中的透明状态和导航栏

Question

我正在制作我的第一个 Flutter 应用程序，我有一个问题。我想让 Android 和 IOS 上的状态栏和导航栏都透明。这就是我现在所拥有的： https://i.stack.imgur.com/h3DJ3.png

这就是我想要的： https://i.stack.imgur.com/kKrec.png

我是Flutter的初学者，所以如果你有解决方案，请简单点。提前致谢！

Answer 1

在 iOS 中，您不能根据他们的指南更改状态栏的颜色，尽管它在 iOS 中已经是透明的。对于 android，请在根小部件的构建方法中使用它：

if (Theme.of(context).platform == TargetPlatform.android) {
      SystemChrome.setSystemUIOverlayStyle(
          SystemUiOverlayStyle(statusBarColor: Colors.transparent));
    }

更多详情：

 import 'package:flutter/foundation.dart' show defaultTargetPlatform;
 Future main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Permission.camera.request();

  runApp(MyApp());
}


    class MyApp extends StatefulWidget {
      @override
      State<MyApp> createState() => _MyAppState();
    }
    
    class _MyAppState extends State<MyApp> {
      @override
      void initState() {
        SchedulerBinding.instance?.addPostFrameCallback((timeStamp) {
          if (defaultTargetPlatform == TargetPlatform.android) {
            SystemChrome.setSystemUIOverlayStyle(
                SystemUiOverlayStyle(statusBarColor: Colors.transparent));
          }
        });
        super.initState();
      }
    
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          home: MyHomePage(),
        );
      }
    }

Answer 2

您也可以将 color 或 backgroundColor 参数设置为 Colors.transparent。

Android 和 IOS 的 Flutter 中的透明状态和导航栏

Transparent status and navigation bar in Flutter for both Android and IOS

flutter