Флаттер Как создать объединенное изображение с разделенным кругом

Question

Я хотел бы создать объединенное изображение в форме круга. Например, есть teamA и teamB, логотип или изображение teamA находятся слева от круга, а 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,
          )
        ],
      ),
    ),
  ),

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'),
                            )),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          )

Результат