如何创建颤振列表线性梯度小部件？

Question

如何制作图像中的小部件 以及如何控制程度

形状2

Answer 1

如果您要查找线性渐变，则可以在 LinearGradient 中使用 Container 。

      new Container(
        child: new Text('Hello'),
        decoration: new BoxDecoration(
          gradient: new LinearGradient( // <-- This is what you need to do
            colors: [
              Colors.red[200],
              Colors.red
            ],
            begin: Alignment.centerLeft,
            end: Alignment.centerRight,
          ),
          borderRadius: new BorderRadius.all(
            new Radius.circular(10.0)
          )
        ),
        padding: new EdgeInsets.all(20.0),
        margin: new EdgeInsets.all(20.0),
      )

如果您希望使用自定义设计框，则需要使用Container。

注意：始终先检查文档。 https://docs.flutter.io

Answer 2

这将根据需要生成UI

Widget build(BuildContext context) {
    return new Container(
      height: 100.0,
      margin: new EdgeInsets.all(10.0),
      decoration: new BoxDecoration(borderRadius: new BorderRadius.all(new Radius.circular(10.0)),
      gradient: new LinearGradient(colors: [Colors.yellow[700], Colors.redAccent],
      begin: Alignment.centerLeft, end: Alignment.centerRight, tileMode: TileMode.clamp)),
      child: new Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
        new Padding(padding: new EdgeInsets.only(left: 10.0, right: 10.0),
          child: new Icon(Icons.cloud, color: Colors.white70,),
        ),
          new Expanded(child: new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              new Text('New York', style: new TextStyle(fontSize: 20.0, color: Colors.white70, fontWeight: FontWeight.bold),),
              new SizedBox(height: 8.0,),
              new Text('Sunny', style: new TextStyle(fontSize: 12.0, color: Colors.white70),),
            ],)),
        new Padding(padding: new EdgeInsets.only(left: 10.0, right: 10.0),
            child: new Text('12°', style: new TextStyle(fontSize: 30.0, color: Colors.white70),),)

      ],),
    );
  }