Question

我有一个登录应用程序，其中包含一个带有渐变容器，并且作为其子级，另一个应用程序带有白色背景。因此，我正在尝试制作一些具有透明背景的按钮，以使渐变背景与按钮背景一样可见。

我得到这个结果

我需要看起来像这样：

（不考虑图标）

我的“按钮”代码是：

`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))
),`

有什么建议吗？

Answer 1

您将需要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),
          ),
        ],
      ),
    );
  }
}

使容器在特定点透明

1 个答案: