怎么能把图像放在图像里面颤动

Question

https://i.stack.imgur.com/w5mLQ.png

就像我们在大图中看到的小圆形图像一样。以及如何按照图片排列文本

https://i.stack.imgur.com/w5mLQ.png

Answer 1

Widget build(BuildContext context) {
  return new Container(
    height: 150.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 CircleAvatar(radius: 35.0, backgroundImage: NetworkImage('https://wallpapercave.com/wp/wp2365076.jpg'),)
        ),
        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 SizedBox(height: 10.0,),
            new Row(children: <Widget>[
              new Column(children: <Widget>[
                new Text('2342', style: new TextStyle(fontSize: 12.0, color: Colors.white)),
                new Text('Popularity', style: new TextStyle(fontSize: 10.0, color: Colors.white)),
              ],),
              new Column(children: <Widget>[
                new Text('2342', style: new TextStyle(fontSize: 12.0, color: Colors.white)),
                new Text('Like', style: new TextStyle(fontSize: 10.0, color: Colors.white)),
              ],),
              new Column(children: <Widget>[
                new Text('2342', style: new TextStyle(fontSize: 12.0, color: Colors.white)),
                new Text('Followed', style: new TextStyle(fontSize: 10.0, color: Colors.white)),
              ],)
            ],)
          ],)),
        new Padding(padding: new EdgeInsets.only(left: 10.0, right: 10.0),
          child: new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
            new Text('12°', style: new TextStyle(fontSize: 30.0, color: Colors.white70),),
            new Text('Ranking', style: new TextStyle(fontSize: 14.0, color: Colors.white70),),
          ],))

      ],),
  );
}

Answer 2

要完成您想要实现的目标，需要一些小部件。以下是我将如何解决它（它可能需要一些微调以满足您的确切需求，但应该让您开始）：

首先从背景开始（我相信你称之为大局）。要完成此操作，您可以使用Container小部件绘制矩形，并使用decoration属性设置BoxDecoration属性来设置背景图像。

接下来使用child小部件设置Container小部件的Row属性，该小部件将包含圆形图像和包含文本元素的Column小部件。

整件事看起来像这样：

new Container(
    decoration: new BoxDecoration(
        image: new DecorationImage(
            image: new AssetImage('assets/images/card_background.png'),
            fit: BoxFit.cover,
        ),
    ),
    child: new Row(
        children: <Widget>[
            new CircleAvatar(
                backgroundImage: new AssetImage('assets/images/avatar.png')
            ),
            new Column(
                children: <Widget>[
                    new Text('David Borg'),
                    new Text('Title: Flying Wing'),
                ],
            ),
        ],
    ),
)

以下是对上述代码段中使用的最重要的小部件的一些引用：

• Container小部件
• BoxDecoration小部件
• CircleAvatar小部件
• Column小部件
• Row小部件

请注意，我尚未测试代码段中列出的代码，因此可能需要进行一些调整。