Create gradient on button in Flutter

Hello flutter geeks this is the second article of this series. In this article we will learn about the gradient on buttons in flutter. This is basically the part of Today I Learned category. So, Let’s start.

Here is the video tutorial

In Android we usually use SVG or PNG for gradient or any kind of custom background on buttons and on other views. But in flutter SVG are not supported properly. So, the solution of this problem is we should create gradient in our own way. I am sharing here my experience that how to create a gradient on button.

In Flutter their is a supported widget that helps to create gradient on button easily. Here is the code.

Container(
  height: 50.0,
  child: RaisedButton(
    onPressed: () {},
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(80.0)),
    padding: EdgeInsets.all(0.0),
    child: Ink(
      decoration: BoxDecoration(
          gradient: LinearGradient(colors: [Color(0xff374ABE), Color(0xff64B6FF)],
            begin: Alignment.centerLeft,
            end: Alignment.centerRight,
          ),
          borderRadius: BorderRadius.circular(30.0)
      ),
      child: Container(
        constraints: BoxConstraints(maxWidth: 300.0, minHeight: 50.0),
        alignment: Alignment.center,
        child: Text(
          "Login",
          textAlign: TextAlign.center,
          style: TextStyle(
              color: Colors.white
          ),
        ),
      ),
    ),
  ),
),

Here is the output.

So, there is an Ink widget that helps to create gradient or other kind of decorations on buttons or any widget.

So, That’s all for now, Cheerssssss! 🍷

Sharing is caring. Follow me on GitHub, Twitter, YouTube,