How to make a transparent/wallpaper-showing Flutter app

Question

Basically, I'm trying for fun to write a launcher using Flutter, and one thing I'm stuck on is the home screen. I'm trying to make it so that you can see through the app and through to the wallpaper. I changed my AndroidManifest.xml like so:

<activity android:name=".MainActivity"
          android:launchMode="singleTop"
          android:theme="@android:style/Theme.Wallpaper.NoTitleBar"  <!-- I changed this line -->
          android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection"
          android:hardwareAccelerated="true"
          android:windowSoftInputMode="adjustResize">

and put this in my main.dart:

return new MaterialApp(
  title: 'Launcher',
  theme: new ThemeData(
    scaffoldBackgroundColor: Colors.transparent,  // <-- this line
  ),
  home: new HomeScreen(),
);

but it still doesn't work. What am I missing?

Answer 1

A transparent flutter background is possible now (July 2019).

The Android issue is being discussed here

How to do it:

• This comment gives a detailed explanation.

Some working Android demo apps that are transparent:

• A transparent app that shows the device wallpaper GitHub repo
• A transparent app that displays itself on top of other apps. GitHub repo

The iOS issue is here

A comment suggests that it's possible to have a transparent background on iOS.

It can be achieved by adding the following line to the ViewController.

flutterViewController.modalPresentationStyle = UIModalPresentationStyle.overCurrentContext

And to set flutterViewController.isViewOpaque = false

Answer 2

I believe you've run into a bug in the Flutter Engine, which is tracked by https://github.com/flutter/flutter/issues/9627. At time of writing that bug has identified that the Flutter Engine (the c++ parts of Flutter) by default fills the whole FlutterView region with black on Android before letting the Dart code draw.