I am trying to create a flutter app with translucent or transparent background. I tried following instructions found in stackoverflow, and from ChatGPT. but only getting black background instead of seeing my phone's wallpaper underneath. so, I wanted to know if it is no longer support.
Direction on how to create translucent or transparent background flutter app, with the current Flutter version
AndroidManifest.xml
<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>
styles.xml
<style name="LaunchTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Transparent background -->
<item name="android:background">@android:color/transparent</item>
<item name="android:windowBackground">@android:color/transparent</item>
<item name="android:windowIsTranslucent">true</item>
</style>
<style name="NormalTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Transparent background -->
<item name="android:background">@android:color/transparent</item>
<item name="android:windowBackground">@android:color/transparent</item>
<item name="android:windowIsTranslucent">true</item>
</style>
MainActivity.kt
import android.os.Bundle
import io.flutter.embedding.android.FlutterActivity
import android.view.WindowManager
class MainActivity: FlutterActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
window.setBackgroundDrawableResource(android.R.color.transparent)
window.setFlags(
WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS
)
}
}
main.dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: TransparentScreen(),
);
}
}
class TransparentScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.transparent,
body: Center(
child: Container(
color: Colors.white.withOpacity(0.5), // Adjust the opacity as needed
child: Text(
'Hello, World!',
style: TextStyle(fontSize: 24),
),
),
),
);
}
}
Add these lines to styles.xml:
<style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowBackground">@android:color/transparent</item>
<item name="android:windowContentOverlay">@null</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowIsFloating">true</item>
<item name="android:backgroundDimEnabled">false</item>
</style>
and:
<style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowBackground">@android:color/transparent</item>
<item name="android:windowContentOverlay">@null</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowIsFloating">true</item>
<item name="android:backgroundDimEnabled">false</item>
</style>
And in MainActivity.kt override the following function:
override fun getTransparencyMode(): TransparencyMode {
return TransparencyMode.transparent
}
No other manipulations with MainActivity are required.