如何创建颤振列表线性渐变小部件？ [关闭]

Question

如何制作像图像中的小部件以及如何控制学位

形状2

Answer 1

这将根据您的需要生成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),),)

      ],),
    );
  }

Answer 2

如果您正在寻找线性渐变，那么您可以在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),
      )

如果您希望拥有自定义设计盒容器就是您所需要的。

注意：请务必先检查文档。 https://docs.flutter.io