CODEWITHSUNDEEP
flutterborderflutter-animation
Akhil George
Akhil George

Reputation: 427

How to Create a Transparent Inner Border Effect in Flutter?

I'm trying to create an inner border effect in Flutter that appears transparent, allowing the background image inside the widget to be visible through the border area, similar to the effect shown in the image below.

The inner border should appear just inside the widget’s edges, and it needs to have a transparent or semi-transparent look.

Border Image

How can I achieve this transparent inner border effect in Flutter?

Upvotes: -1

Views: 66

Answers (1)

Lostsaka
Lostsaka

Reputation: 308

The border is always inner. So you can just add an opaque white border that fades out the background color like so:

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    color: Colors.green,
    border: Border.all(
      color: Colors.white.withOpacity(0.5),
      width: 4,
    ),
    borderRadius: BorderRadius.circular(20),
  ),
),

Result:

enter image description here

Upvotes: 1

Related Questions