CODEWITHSUNDEEP
flutter
Daibaku
Daibaku

Reputation: 12576

Flutter How can I create divided circle merged image

I would like create circle merged image shaped like this. For example there are teamA and teamB, teamA's logo or image comes to the left side of circle and teamB to the right.

I tried like so but both images shape is still rectangle like so.

enter image description here

How can I make it work?

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

Upvotes: 2

Views: 871

Answers (1)

diegoveloper
diegoveloper

Reputation: 103451

There are many ways to achieve that, one of them is like this :

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

Result

enter image description here

Upvotes: 5

Related Questions