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

How to Create a Gradient Border in Flutter?

I’m trying to add a gradient border to a Container widget in Flutter, but I’m not sure how to achieve this effect since Flutter doesn’t support gradient borders natively. I want the gradient to be applied to the border only, not the entire container. Could someone provide an example of how to create a gradient border around a Container or any other widget in Flutter?

Tags:

2

Answers


  1. 0

    For this, you can put the container in a DecoratedBox and apply the gradient.

    DecoratedBox(
  decoration: BoxDecoration(
    border: Border.all(),
    borderRadius: BorderRadius.circular(16),
    
    // add gradient
    borderGradient: gradient 
  ),

  child: Container(),
),
    Login or Signup to reply.
  2. 0

    gradient_borders: ^1.0.0 use this in pubspec.yaml

    flutter pub get

    Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    border: const GradientBoxBorder(
      gradient: LinearGradient(colors: [Colors.blue, Colors.red]),
      width: 4,
    ),
    borderRadius: BorderRadius.circular(8)
  ),
),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search