如何使这样的小部件或卡片列表颤动

Question

如何制作这样的小部件 或卡列表

Answer 1

这将根据您的要求生成所需的用户界面装饰

Widget build(BuildContext context) {
return new Container(
  alignment: Alignment.centerLeft,
  margin: new EdgeInsets.all(8.0),
  padding: new EdgeInsets.all(8.0),
  height: 150.0,
  decoration: new BoxDecoration(
    color: Colors.lightBlue,
    borderRadius: new BorderRadius.all(new Radius.circular(10.0)),
    boxShadow: [new BoxShadow(color: Colors.black54, offset: new Offset(2.0, 2.0),
    blurRadius: 5.0)]
  ),
  child: new Row(children: <Widget>[
    new CircleAvatar(backgroundColor: Colors.white70,radius: 50.0,),
    new Expanded(child: new Padding(padding: new EdgeInsets.only(left: 8.0),
      child: new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          new Text('Hot Pot', style: new TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),),
          new Row(children: <Widget>[
            new Icon(Icons.star, color: Colors.white,),
            new Icon(Icons.star, color: Colors.white,),
            new Icon(Icons.star, color: Colors.white,),
            new Icon(Icons.star_half, color: Colors.white,),
            new Icon(Icons.star_border, color: Colors.white,),
          ],),
          new Wrap(spacing: 2.0,children: <Widget>[
            new Chip(label: new Text('Hot')),
            new Chip(label: new Text('Hot')),
            new Chip(label: new Text('Hot')),
          ],)
        ],),))
  ],),
);
}

Answer 2

看看这个question。

对于背景图像，请使用Container和BoxDecoration。对于左侧的图片，请使用Image.asset小部件。