CODEWITHSUNDEEP
colorsflutter
Geoffrey Lee
Geoffrey Lee

Reputation: 407

Flutter Card with Transparent Background

I am trying to make my card transparent in order to show the thing in background.

I had tries to set color property of card to transparent, but it is show gray kind of background with opacity.

Result

I also tries use white color with different opacity, but the result outcome is not pure white color with transparent.

   Card(
      color: Colors.transparent,
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            CardLabelSmall("Current Premix Plan Document"),
            Expanded(child: PremixPlanDocList()),
            Row(
              children: <Widget>[
                Expanded(
                  child: RaisedButton(
                    onPressed: () async {
                      homeBloc.retrieveCurrentMrfPremixPlan();
                    },
                    child: const Text("Retrieve Premix Plan"),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );

other white color but still not white at all

color: Colors.white70,
color: Colors.white54,
color: Colors.white30,

How can I achieve to have a pure white background with transperant?

Upvotes: 20

Views: 57380

Answers (3)

ibneummah
ibneummah

Reputation: 61

Instead of setting elevation to 0 as mentioned in accepted answer. You can also change of surfaceTintColor:Colors.white It will remove grayish color

Card(
      elevation: 0, //optional to controll the drop shadow
      color: Colors.transparent,
surfaceTintColor: Theme.of(context).colorScheme.surface,
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            CardLabelSmall("Current Premix Plan Document"),
            Expanded(child: PremixPlanDocList()),
            Row(
              children: <Widget>[
                Expanded(
                  child: RaisedButton(
                    onPressed: () async {
                      homeBloc.retrieveCurrentMrfPremixPlan();
                    },
                    child: const Text("Retrieve Premix Plan"),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );```

Upvotes: 6

Farhana Naaz Ansari
Farhana Naaz Ansari

Reputation: 7944

You can try something like this.

  new Container(
                height: 300.0,
                color: Colors.blue,
                child: new Card(
                    color: Colors.transparent,
                    child: new Center(
                      child: new Text("Hi modal sheet"),
                    )),
              ),

enter image description here

Upvotes: 7

Sami Kanafani
Sami Kanafani

Reputation: 15739

try setting the elevation to 0, it should work

Card(
      elevation: 0,
      color: Colors.transparent,
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            CardLabelSmall("Current Premix Plan Document"),
            Expanded(child: PremixPlanDocList()),
            Row(
              children: <Widget>[
                Expanded(
                  child: RaisedButton(
                    onPressed: () async {
                      homeBloc.retrieveCurrentMrfPremixPlan();
                    },
                    child: const Text("Retrieve Premix Plan"),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );

Upvotes: 58

Related Questions