Flutter Button – Linear Gradient Background Color

Flutter Button – Background Color with Linear Gradient

In this tutorial, we will learn how to generate a gradient color background for a button.

We shall use Container widget with its decoration property doing the gradient magic. The child of this Container would be our FlatButton.

Sample Code Snippet

Following is a sample code snippet of Container that decorates a FlatButton with linear gradient of colors provided.

Container(
  decoration: new BoxDecoration(
	gradient: new LinearGradient(
	  colors: [Colors.red, Colors.blue],
	  begin: FractionalOffset.centerLeft,
	  end: FractionalOffset.centerRight,
	),
  ),
  child: FlatButton(
	child: new Text('Login'),
	onPressed: () {},
  ),
),

You may provide other properties of Container and FlatButton widgets as required.

Example

In this example Flutter Application, we have created four buttons with different scenarios of producing linear gradient background for buttons based on the number of colors provided and providing a specific begin and end.

Try running this application and we shall explain each of these gradient buttons in detail to get an understanding on some of the various options available to produce a gradient background for a button.

To recreate the following example Flutter Application, you may create a basic Flutter application and replace main.dart with the following code.

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter Tutorial - googleflutter.com'),
          ),
          body: Center(child: Column(children: <Widget>[
            Container(
              margin: EdgeInsets.all(20),
              width: 200,
              height: 50,
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [Colors.red, Colors.blue],
                  begin: FractionalOffset.centerLeft,
                  end: FractionalOffset.centerRight,
                ),
              ),
              child: FlatButton(
                child: Text(
                  'Login',
                  style: TextStyle(color: Colors.white),
                ),
                onPressed: () {},
              ),
            ),
            Container(
              margin: EdgeInsets.all(20),
              width: 200,
              height: 50,
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [Colors.lightGreen, Colors.orange],
                  begin: FractionalOffset.topLeft,
                  end: FractionalOffset.bottomRight,
                ),
              ),
              child: FlatButton(
                child: Text(
                  'Login',
                  style: TextStyle(color: Colors.white),
                ),
                onPressed: () {},
              ),
            ),
            Container(
              margin: EdgeInsets.all(20),
              width: 200,
              height: 50,
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [Colors.lightGreen, Colors.orange],
                  begin: FractionalOffset.topRight,
                  end: FractionalOffset.bottomLeft,
                ),
              ),
              child: FlatButton(
                child: Text(
                  'Login',
                  style: TextStyle(color: Colors.white),
                ),
                onPressed: () {},
              ),
            ),
            Container(
              margin: EdgeInsets.all(20),
              width: 200,
              height: 50,
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [Colors.black45, Colors.blue, Colors.blueGrey],
                  begin: FractionalOffset.center,
                  end: FractionalOffset.bottomRight,
                ),
              ),
              child: FlatButton(
                child: Text(
                  'Login',
                  style: TextStyle(color: Colors.white),
                ),
                onPressed: () {},
              ),
            ),
          ]))),
    );
  }
}

Screenshot

First Gradient Button

Container(
  margin: EdgeInsets.all(20),
  width: 200,
  height: 50,
  decoration: BoxDecoration(
	gradient: LinearGradient(
	  colors: [Colors.red, Colors.blue],
	  begin: FractionalOffset.centerLeft,
	  end: FractionalOffset.centerRight,
	),
  ),
  child: FlatButton(
	child: Text(
	  'Login',
	  style: TextStyle(color: Colors.white),
	),
	onPressed: () {},
  ),
),

For the gradient property, we have taken LinearGradient, and provided two colors namely red and blue.

And the gradient starts at begin FractionalOffset.centerLeft meaning at center left of container, and ends at FractionalOffset.centerRight center right of button.

All possible values for a being and end are given below.

Fourth Button

In the fourth button we used more than two colors to create gradient background. You can use as many colors as required.

colors: [Colors.black45, Colors.blue, Colors.blueGrey],

Summary

In this Flutter Tutorial, we learned how to provide linear gradient color background for a button.