使容器在某一点透明

Question

I have a login application with a container with a gradient, and as a child of it, another container with a white background. So, what i'm trying to make some buttons with transparent background, so that the gradient background becomes visible, as the buttons background.

I get this result

My work

and I need to look like this:

What I need

(Dont take into account the icons)

My "button" code is:

`Container(
   width: 32.0,
   height: 32.0,
   decoration: new BoxDecoration(
     shape: BoxShape.circle,
     color: Colors.transparent
   ),
   child: Center(child: Text("G", style: TextStyle(fontSize: 20, color: 
   Colors.black), textAlign: TextAlign.center))
),`

Any suggestion?

Answer 1

You will need Font Awesome Icon pack for Flutter

class SO extends StatelessWidget {
  Color bg = Colors.white;// change to whatever background color is behind icons

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          Text("sign in with"),
          CircleAvatar(
            child: IconButton(icon: new Icon(FontAwesomeIcons.facebookF, color: bg), onPressed: () {}),
            backgroundColor: const Color(0xffFF5486),
          ),
          CircleAvatar(
            child: IconButton(icon: new Icon(FontAwesomeIcons.twitter, color: bg), onPressed: () {}),
            backgroundColor: const Color(0xffFF5486),
          ),
        ],
      ),
    );
  }
}