fluttercontainerslinear-gradients

Container with gradient color

My desired output

enter image description here

How can I create this kind of container with gradient color ? I was trying to built it but couldn't achieve .

Here is what I have done

 Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(25.r)
            ),
            child: ShaderMask(
              shaderCallback: (Rect bounds) {
                return LinearGradient(
                  colors: [kDarkDesertSand.withOpacity(0.2), kDarkDesertSand],
                  begin: Alignment.topLeft,
                  end: Alignment.bottomCenter,
                  stops: [0.0,1.0],
                ).createShader(bounds);
              },
              child:...
           ),
          ),

My current design look like this one

enter image description here

Solution

  • I think you could start from here:

    enter image description here

    Here's the code:

    Container(
        margin: EdgeInsets.all(50),
        padding: EdgeInsets.all(3),
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.centerLeft,
            end: Alignment.centerRight,
            colors: [
              Colors.amber.shade200,
              Color.fromARGB(255, 148, 87, 65),
            ],
          ),
          borderRadius: BorderRadius.circular(35),
        ),
        child: Container(
          decoration: BoxDecoration(
            color: Color.fromARGB(255, 148, 87, 65),
            borderRadius: BorderRadius.circular(33.5),
          ),
          child: Center(
            child: Text('Enter further widgets here',
                style: TextStyle(color: Colors.white)),
          ),
        ),
      )