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

Flutter – How to achieve this rounded gradient edges?

I want to achieve the following gradient effect in flutter where the gradient has rounded edges at bottom left and right.

enter image description here

Widget _buildTopBar() {
    return Container(
      height: .35.sh,
      decoration: BoxDecoration(
        gradient: LinearGradient(
            colors: [
              const Color(0xFF1ED760).withAlpha(25),
              Colors.black.withOpacity(0.6),
            ],
            stops: const [
              0.0,
              .3,
            ],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            tileMode: TileMode.repeated),
      ),
    );
  }

I also tried giving the container border radius. But it’s not giving the desired effect.

Tags:

2

Answers


  1. 0

    Try experimenting with one of the following in your BoxDecoration, adjusting the radius or elliptical values:

    borderRadius: const BorderRadius.only(bottomLeft: Radius.circular(50), bottomRight: Radius.circular(50))

borderRadius: const BorderRadius.only(bottomLeft: Radius.elliptical(150, 40), bottomRight: Radius.elliptical(150, 40))

    With the .elliptical option for instance, I got this:

    enter image description here

    Login or Signup to reply.
  2. 0

    @Archit Arora Please review the provided code; it should assist you in achieving your desired output.

    
 Container(
      decoration: BoxDecoration(
       color: Colors.black,
        gradient: RadialGradient(
         radius: 1,
              colors: [
                const Color(0xFF1ED760).withAlpha(25),
                const Color(0xFF1ED760).withAlpha(100),
                Colors.green,
                Colors.black
              ],
          center: Alignment(0, -1.9),
            ),
      ),
    ),

    Output:

    enter image description here

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

Back To Top
Search