如何在flutter中创建透明的UI？

Question

我想在Flutter中创建一个透明的UI。

您能帮我提供代码吗？

这是我需要的东西的链接。

https://dribbble.com/shots/3958928-Wikipedia-App/attachments/904403

https://dribbble.com/shots/1081917-WhereTO-App

https://dribbble.com/shots/1539644-App-Mockup

https://dribbble.com/shots/1254375-Events-More/attachments/171069

Answer 1

此示例是我帮助您解决问题的代码段

Widget build(BuildContext context) {

List list = ['Introduction','Early life', 'Non-Film work', '2012-present', 'Controversy'];
return new Container(
  child: new Stack(
    fit: StackFit.expand,
    children: <Widget>[

    new Image.asset('assets/bg_img.jpg', fit: BoxFit.fitHeight,),
    new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
        elevation: 0.0,
        backgroundColor: const Color(0xFFB4C56C).withOpacity(0.5),
      ),
      backgroundColor: Colors.transparent,
      body: new Center(
        child: new Center(
          child: new BackdropFilter(
                filter: new ui.ImageFilter.blur(
                  sigmaX: 6.0,
                  sigmaY: 6.0,
                ),
                child: new Container(
                  margin: EdgeInsets.all(20.0),
                  padding: EdgeInsets.all(20.0),
                  decoration: BoxDecoration(
                    color: const Color(0xFFB4C56C).withOpacity(0.01),
                    borderRadius: BorderRadius.all(Radius.circular(50.0)),
                  ),
                  child: new Container(child: ListView.builder(itemBuilder: (contex, index){
                    return index == 0?new Container(
                      height: 50.0,
                      alignment: Alignment.centerLeft,
                      padding: EdgeInsets.only(left: 12.0),
                      decoration: BoxDecoration(
                        color: const Color(0xFFB4C56C).withOpacity(0.7),
                        borderRadius: BorderRadius.all(Radius.circular(25.0)),
                          boxShadow: [new BoxShadow(color: Colors.black12,offset: new Offset(2.0, 2.0), blurRadius: 2.0 )]
                      ),child: new Row(children: <Widget>[
                        new Icon(Icons.info, color: Colors.white,),
                      new SizedBox(width: 8.0),
                      new Text(list[index], style: TextStyle(color: Colors.white70, fontSize: 18.0))
                    ],),
                    ):new ListTile(title: new Text(list[index], style: TextStyle(color: Colors.white),), leading: new Text('${index}',
                        style: TextStyle(color: const Color(0xFFB4C56C), fontSize: 18.0)),);
                  }, itemCount: list.length,),),
                ),
              ),
            ),
      ),
    )
  ],),
);

}

可以从此处下载完整的源代码blue_effect