CODEWITHSUNDEEP
flutteruser-interfaceavatar
Đặng Minh Hiếu
Đặng Minh Hiếu

Reputation: 425

Flutter: How to make a custom avatar

I want to make avatars that wrapped inside a smooth + customized shape that looks similar to Xiaomi current's Logo (it is not a rectangle with some kind of Radius.elliptical(x,y) but rather a little bit more complicated function). Is there a way to do so efficiently?

enter image description here

Upvotes: 1

Views: 693

Answers (1)

Mahesh Jamdade
Mahesh Jamdade

Reputation: 20249

You could try with ContinousRectangularBorder as mentioned by @pkskink

  1. Using ContinousRectangularBorder
Container(
  decoration: ShapeDecoration(
    shape: ContinuousRectangleBorder(
    borderRadius: BorderRadius.circular(95.0),
  ),
  color: Colors.orange[800]),
  height: 100,
  width: 100,
  alignment: Alignment.center,
  child: Text('Mi',
           style: TextStyle(color: Colors.white, fontSize: 40),
         ),
),
  1. Using the normal borderRadius (For comparison)
Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(40.0),
    color: Colors.orange[800]),
  height: 100,
  width: 100,
  alignment: Alignment.center,
  child: Text(
  'Mi',
   style: TextStyle(color: Colors.white, fontSize: 40),
 ),
),

And if you are not satisfied with this I would suggest using custom Paint which allows you to draw any kind of shapes

Upvotes: 1

Related Questions