flutter - Flutter 如何创建分割的圆形合并图像

Question

我想创建形状像这样的圆形合并图像。例如有teamA 和teamB，teamA 的logo 或图片出现在圆圈的左边，而teamB 出现在右边。

我试过这样，但两个图像的形状仍然是这样的矩形。

我怎样才能让它工作？

new Center(
    child: new Container(
      width: 120.0,
      height: 120.0,
      child: new Row(
        children: <Widget>[
          Image.network(
            'https://images.unsplash.com/photo-1535593063927-5c40dee9cb83?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3bfc6e7c6043924de9c4746bef6dc969&auto=format&fit=crop&w=500&q=60',
            width: 60.0,
            height: 120.0,
            fit: BoxFit.cover,
          ),
          Image.network(
            'https://images.unsplash.com/photo-1535603863228-ded98173a95d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=78dee486ac6c9bffda623b83a36ecb1f&auto=format&fit=crop&w=500&q=60',
            width: 60.0,
            height: 120.0,
            fit: BoxFit.cover,
          )
        ],
      ),
    ),
  ),

标签： flutter

Answer 1

有很多方法可以实现这一点，其中一种是这样的：

    new Center(
            child: new Container(
              height: 300.0,
              width: 300.0,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                border: new Border.all(color: Colors.blue, width: 4.0),
              ),
              child: new Stack(
                children: <Widget>[
                  Container(
                    decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        image: DecorationImage(
                            fit: BoxFit.cover,
                            image: NetworkImage(
                              'https://images.unsplash.com/photo-1535593063927-5c40dee9cb83?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3bfc6e7c6043924de9c4746bef6dc969&auto=format&fit=crop&w=500&q=60',
                            ))),
                  ),
                  ClipRect(
                    child: Align(
                      alignment: Alignment.centerLeft,
                      widthFactor: 0.5,
                                      child: Container(
                        decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            image: DecorationImage(
                              fit: BoxFit.cover,
                              image: NetworkImage(
                                  'https://images.unsplash.com/photo-1535603863228-ded98173a95d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=78dee486ac6c9bffda623b83a36ecb1f&auto=format&fit=crop&w=500&q=60'),
                            )),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          )

结果