flutter - widget with transparent background

Question

I am creating a StatefulWidget which have a transparent background. Code for same is:

return Scaffold(
  body: Builder(
    builder: (context) => Material(
          color: Colors.black.withOpacity(0.75),
          child: new SafeArea(
            child: Center(
              child: Container(
                color: Colors.white,
                child: ListView(
                  children: <Widget>[
                    resetPasswordLabel,
                    inputFields,
                    doneButton(context),
                  ],
                ),
                height: 250.0,
                margin: EdgeInsets.only(left: 20.0, right: 20.0),
              ),
            ),
          ),
        ),
  ),
);

Problem: When I am opening this widget using Navigator the transparent color is visible for 1 - 2 seconds and after it turns to the black background.

Output:

Accepted Output should be:

Please assist me here.

check [this stackoverflow answer](https://stackoverflow.com/a/54572108) — Zvi Karp, Mar 19 '19 at 08:45

score 2 · Answer 1 · answered Mar 22 '20 at 11:25

2

You can create a custom dialog and open it with below line...

Navigator.of(context).push(
    PageRouteBuilder(
        pageBuilder: (context, _, __) => CustomAlertDialog(), opaque: false),
);

The opaque: false will keep background transparent.

answered Mar 22 '20 at 11:25

Sanket Vekariya

2,848
3
12
34

score 1 · Answer 2 · edited Jan 03 '19 at 08:37

1

When you open a new "page" with push state, the old "page" or state is disposed until you call Navigator.pop(context). If you want to have a effect shown in the screenshot you provided, use a dialog.

edited Jan 03 '19 at 08:37

Günter Zöchbauer

623,577
216
2,003
1,567

answered Jan 03 '19 at 07:31

dshukertjr

15,244
11
57
94

Is there any way we can make widget's background transparent, so that user can able to see prev screen content? – Rahul Sharma Jan 03 '19 at 10:17
I don't think so. – dshukertjr Jan 03 '19 at 10:28
1

There's always a way to control every single pixel. You may just have to write a custom widget. But keep in mind the source code to all the other widgets is just a keystroke or two away! – Randal Schwartz Jan 03 '19 at 23:20

flutter - widget with transparent background

2 Answers2