Blog

In computer graphics, a color gradient specifies a range of position-dependent colors, usually used to fill a region. Gradients are supported by Flutter definately, but even easier to implement using ready made classes.

In this tutorial we want to explore examples related to implementing gradients in flutter.

Example 1: Flutter Simple LinearGradient Example

This is a simple LinearGradient example. We do not use any third party package. All we need is the Material package.

Here is what we build:

Step 1: Create Project

Start by Creating flutter project in your favorite IDE or Editor.

Step 2: Dependencies

No third party dependency is needed.

Step 3: Create Utils File

Create a Dart file known as utils.dart.

Import the material package:

import 'package:flutter/material.dart';

Define a function known as getCustomGradient() that returns a LinearGradient object. Then instantiate a LinearGradient object, passing in two colors, then the beginproperty, the end property, the stops as well as the tileMode:

LinearGradient getCustomGradient() {
  // Define a Linear Gradient
  return new LinearGradient(
      colors: [Colors.pink, Colors.blueAccent],
      begin: const FractionalOffset(0.0, 0.0),
      end: const FractionalOffset(0.6, 0.0),
      stops: [0.0, 0.6],
      tileMode: TileMode.clamp);
}

Here's the full file:

utils.dart

import 'package:flutter/material.dart';
LinearGradient getCustomGradient() {
  // Define a Linear Gradient
  return new LinearGradient(
      colors: [Colors.pink, Colors.blueAccent],
      begin: const FractionalOffset(0.0, 0.0),
      end: const FractionalOffset(0.6, 0.0),
      stops: [0.0, 0.6],
      tileMode: TileMode.clamp);
}

Step 4: Create Main class

Now come to main.dart and import both the material.dart as well as the utils.dart:

import 'package:flutter/material.dart';
import './utils.dart' as utils;

Here's how you will apply the gradient as the background of our screen:

 body: new Container(
              // Center the content
              child: new Center(
                // Add Text
                child: new Text(
                  "Hello World!",
                  style: new TextStyle(color: Colors.white),
                ),
              ),
              // Set background
              decoration: new BoxDecoration(
                  // Add Gradient
                  gradient: utils.getCustomGradient())))));

Here's the full code for this file:

main.dart

import 'package:flutter/material.dart';
import './utils.dart' as utils;
void main() {
  runApp(new MaterialApp(
      // Title
      title: "Using Gradient",
      // Home
      home: new Scaffold(
          // Appbar
          appBar: new AppBar(
            // Title
            title: new Text("Using Gradient"),
          ),
          // Body
          body: new Container(
              // Center the content
              child: new Center(
                // Add Text
                child: new Text(
                  "Hello World!",
                  style: new TextStyle(color: Colors.white),
                ),
              ),
              // Set background
              decoration: new BoxDecoration(
                  // Add Gradient
                  gradient: utils.getCustomGradient())))));
}

Step 5: Run

1. Copy the two files: utils.dart and main.dart into your flutter project.
2. Run.

That's it!