Question 332270 in Flutter Question posted in
The official Flutter documentation can be found here.

create clubhouse avatar with flutter

I’m unable to create clubhose avatar in flutter because the image widget background is dynamic or video , so i’m try to use clubhose avatar as blue print and then clipping with the new dynamic image from api .

here is my code :

Container(
            height: height,
            width: width,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.all(
                  Radius.elliptical(width / 3 * 1.4, width / 3 * 1.6),
                ),
                // color: mainColor,
                image: decorationImage ??
                    DecorationImage(image: AssetImage(unknown_person))),
            child: child ?? SizedBox(),
          );

this was i wanted without black border .

enter image description here
enter image description here

this what i got :

enter image description here

Tags:

2

Answers


  1. 0

    To round corners, there’s a special Widget for that – ClipRRect:

    A widget that clips its child using a rounded rectangle.

    enter image description here

    To make an elliptical shape, you specify the Radius.elliptical constructor (as you have already done):

    ClipRRect(
    borderRadius: BorderRadius.all(
    Radius.elliptical(100, 100), // horizontal, vertical
),
     child: Image.network('https://picsum.photos/250?image=9'))
    Login or Signup to reply.
  2. 0

    Use Container with clipBehaviour property and give radius to every corner according to your need like this

    Container(
    clipBehavior: Clip.antiAlias,
    height: 100,
    width: 100,
    decoration: BoxDecoration(
// give radius to each corner different
      color: Colors.black,
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(40),
        topRight: Radius.circular(20),
        bottomLeft: Radius.circular(20),
        bottomRight: Radius.circular(50),
      ),
    ),
    child: Image.asset(
      'assets/images/stripe.png',
      fit: BoxFit.cover,
      height: 100,
      width: 100,
    ),
  )

    this what you will got

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search