Skip to content

Transparent Flutter App always has black background #28844

Closed
@simc

Description

@simc

Hi,

I need my Flutter app to have a transparent background (just a dialog).
When I use showDialog, it has a black background if there is no route below the dialog.

When I set the color of the MaterialApp to be transparent, I get an error:

══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
The following assertion was thrown building WidgetsApp-[GlobalObjectKey
_MaterialAppState#8500b](dirty, state: _WidgetsAppState#87d79):
'package:flutter/src/widgets/title.dart': Failed assertion: line 24 pos 15: 'color != null &&
color.alpha == 0xFF': is not true.

Is there another way to create a transparent app?

flutter doctor -v

[✓] Flutter (Channel master, v1.3.3-pre.18, on Mac OS X 10.14.2 18C54, locale de-DE)
    • Flutter version 1.3.3-pre.18 at /usr/local/Caskroom/flutter/1.0.0/flutter
    • Framework revision 2bab21b2bd (31 hours ago), 2019-03-03 05:15:28 -0500
    • Engine revision a28329cb91
    • Dart version 2.2.1 (build 2.2.1-dev.0.0 7c70ab1817)

[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    • Android SDK at /Users/___/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-28, build-tools 28.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1248-b01)
    • All Android licenses accepted.

Activity

HansMuller

HansMuller commented on Mar 6, 2019

@HansMuller
Contributor

It would help if you provide a small complete application that demonstrates the problem you've run into. Thanks!

added
waiting for customer responseThe Flutter team cannot make further progress on this issue until the original reporter responds
frameworkflutter/packages/flutter repository. See also f: labels.
f: material designflutter/packages/flutter/material repository.
on Mar 6, 2019
simc

simc commented on Mar 6, 2019

@simc
Author

@HansMuller Here is a small test project: https://github.com/leisim/dialogapp

removed
waiting for customer responseThe Flutter team cannot make further progress on this issue until the original reporter responds
on Mar 6, 2019
simc

simc commented on Mar 27, 2019

@simc
Author

@HansMuller is this a flutter issue or am I doing anything wrong?

NMateu

NMateu commented on Apr 2, 2019

@NMateu

@leisim https://github.com/NMateu/flutter_transparent_app

Some explanation:

  1. To make an android app transparent you must edit a app style https://github.com/NMateu/flutter_transparent_app/blob/master/android/app/src/main/res/values/styles.xml
  2. Apply this theme in manifest https://github.com/NMateu/flutter_transparent_app/blob/master/android/app/src/main/AndroidManifest.xml#L16
  3. Enable Flutter transparent view in MainActivity https://github.com/NMateu/flutter_transparent_app/blob/master/android/app/src/main/java/com/example/flutter_transparent_app/MainActivity.java#L14

After this your Android activity is transparent. Until you use MaterialApp or WidgetApp in the flutter code, it will remain so.

To show dialog in flutter I must use a showGeneralDialog function because showDialog uses a MediaQuery which is dependent of MaterialApp or WidgetApp https://github.com/NMateu/flutter_transparent_app/blob/master/lib/main.dart#L78

The last condition to display the dialog is to wrap AlertDialog in MaterialApp widget https://github.com/NMateu/flutter_transparent_app/blob/master/lib/main.dart#L84

@HansMuller is there any reason why MaterialApp or WidgetApp cannot be transparent? It would be much easier...

simc

simc commented on Apr 7, 2019

@simc
Author

@NMateu Thank you that really helps me. But it would be nice if it was less complicated to use material widgets...

rayliverified

rayliverified commented on May 1, 2019

@rayliverified

Thanks @NMateu for your detailed explanation. Your sample project was very helpful in allowing me to setup a transparent FlutterView correctly. Many thanks!

phanirithvij

phanirithvij commented on Jul 22, 2019

@phanirithvij

@leisim I think it can be done with just

    return MaterialApp(
      builder: (context, child) {
        return Scaffold(
          backgroundColor: Colors.transparent, // <------ this
...
simc

simc commented on Jul 22, 2019

@simc
Author

@phanirithvij Unfortunately the background is just black if I try that...

phanirithvij

phanirithvij commented on Jul 23, 2019

@phanirithvij

@leisim I mean after following this #28844 (comment).

This is a demo app similar to @NMateu's flutter_transparent_app.

https://github.com/phanirithvij/invisible_flutter

19 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Labels

f: material designflutter/packages/flutter/material repository.frameworkflutter/packages/flutter repository. See also f: labels.waiting for customer responseThe Flutter team cannot make further progress on this issue until the original reporter responds

Type

No type

Projects

No projects

Relationships

None yet

    Development

    No branches or pull requests

      Participants

      @HansMuller@lts1610@lawonga@matthew-carroll@simc

      Issue actions

        Transparent Flutter App always has black background · Issue #28844 · flutter/flutter