Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter Card with Transparent Background

Tags:

colors

flutter

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?

like image 495
Geoffrey Lee Avatar asked Apr 12 '19 06:04

Geoffrey Lee


People also ask

How do you make a transparent container color?

withOpacity(0), ... you can specify how much opacity you want by using decimal value from 0 to 1, 0 being fully transparent while 1 being fully opaque . Save this answer.

What is color code for transparent?

#0000ffff - that is the code that you need for transparent.


1 Answers

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"),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
like image 174
Sami Kanafani Avatar answered Sep 21 '22 20:09

Sami Kanafani