Flutter透明/半透明背景应用是否仍支持？附当前版本实现方案

透明/半透明背景功能在当前Flutter版本中完全支持，你的现有配置存在几处关键错误，以下是修正后的完整实现方案：

一、Android 端配置修正 #

1. 修改 styles.xml #

将主题父类改为Theme.AppCompat.Translucent.NoActionBar，并补充核心透明属性：

<style name="LaunchTheme" parent="Theme.AppCompat.Translucent.NoActionBar">
    <!-- 核心透明配置 -->
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
    <item name="android:navigationBarColor">@android:color/transparent</item>
</style>

<style name="NormalTheme" parent="Theme.AppCompat.Translucent.NoActionBar">
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
    <item name="android:navigationBarColor">@android:color/transparent</item>
</style>

2. 调整 MainActivity.kt #

将窗口透明配置移到super.onCreate(savedInstanceState)之前，确保Flutter初始化前窗口已完成透明设置：

import android.os.Bundle
import io.flutter.embedding.android.FlutterActivity
import android.view.WindowManager

class MainActivity: FlutterActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        // 先配置窗口透明属性
        window.setBackgroundDrawableResource(android.R.color.transparent)
        window.setFlags(
            WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
            WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS
        )
        window.setFlags(
            WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,
            WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS
        )
        window.setFlags(
            WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION,
            WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION
        )
        super.onCreate(savedInstanceState)
    }
}

3. 确认 AndroidManifest.xml #

保持现有配置即可，但注意不要添加android:hardwareAccelerated="false"（会导致透明效果失效）：

<activity
    android:name=".MainActivity"
    android:launchMode="singleTop"
    android:theme="@style/LaunchTheme"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize|smallestScreenSize|screenLayout|density|layoutDirection"
    android:windowSoftInputMode="adjustResize">
    <meta-data
        android:name="io.flutter.embedding.android.NormalTheme"
        android:resource="@style/NormalTheme"
        />
    <intent-filter>
        <action android:name="android.intent.action.MAIN"/>
        <category android:name="android.intent.category.LAUNCHER"/>
    </intent-filter>
</activity>

二、Flutter Dart 代码修正 #

确保整个Widget层级的背景均为透明，避免默认黑色背景覆盖：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  // 适配Android 12+系统栏透明
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    navigationBarColor: Colors.transparent,
    statusBarIconBrightness: Brightness.dark,
    navigationBarIconBrightness: Brightness.dark,
  ));
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(scaffoldBackgroundColor: Colors.transparent),
      home: const TransparentScreen(),
    );
  }
}

class TransparentScreen extends StatelessWidget {
  const TransparentScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: Center(
        child: Container(
          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
          color: Colors.white.withOpacity(0.5),
          child: const Text(
            'Hello, 透明背景!',
            style: TextStyle(fontSize: 24, color: Colors.black87),
          ),
        ),
      ),
    );
  }
}

三、验证与注意事项 #

• 执行flutter clean后重新编译运行，避免缓存导致配置不生效；
• 部分Android机型需要手动开启"显示在其他应用上层"权限，可在应用设置中操作；
• 若仍显示黑色背景，检查是否有第三方插件或自定义代码强制设置了背景色；

内容的提问来源于stack exchange，提问作者Nobel Okelekele