Search code examples
androiddartflutterandroid-wallpaper

How to make a transparent/wallpaper-showing Flutter app


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?


Solution

  • 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