Flutter Create Gradient Screen Background Example

Modern UIs use gradients in their app. In Flutter, you can also create gradients. Let’s see how you can change your app’s background color to the gradient.

You will learn about gradient backgrounds using the BoxDecoration widget inside the Container Widget decoration property.

For a more quick approach, you will use the scaffold_gradient_background package.

In this Article

Method 1: Gradient Background with `BoxDecoration`

You will create a gradient background by using the Container widget.

How do you do that?

First You will create a scaffold screen and make the scaffold background transparent.

class GradientBackgroundScreen extends StatelessWidget {
  const GradientBackgroundScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return  const Scaffold(
        //Make sure you make the scaffold background transparent
        backgroundColor: Colors.transparent,
        body: Center(child: Text('Welcome!')),
     
    );
  }
}

Then wrap this Scaffold with the Container widget and define the decoration property.

decoration property will take BoxDecoration as an argument. You will pass the BoxDecoration with gradient property.

In this example, you will use the LinearGradient widget, in which you define colors and the begin and end properties.

Complete Code:

class GradientBackgroundScreen extends StatelessWidget {
  const GradientBackgroundScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: [
            Colors.blue,
            Colors.amber,
            Colors.orange,
            Colors.green,
          ],
        ),
      ),
      child: const Scaffold(
        //Make sure you make the scaffold background transparent
        backgroundColor: Colors.transparent,
        body: Center(child: Text('Welcome!')),
      ),
    );
  }
}

Check the preview of the above gradient code.

You create a gradient for full-screen size. But you notice there is no AppBar in the above example. Let’s see another example with the AppBar

Gradient Background with `AppBar`

The code is similar to the above but checks the Scaffold appBar property. We define the AppBar here.

//Method 1 with AppBar
class GradientBackgroundScreen extends StatelessWidget {
  const GradientBackgroundScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: [
            Colors.blue,
            Colors.amber,
            Colors.orange,
            Colors.green,
          ],
        ),
      ),
      child: Scaffold(
        //Make sure you make the scaffold background transparent
        backgroundColor: Colors.transparent,
        appBar: AppBar(
          backgroundColor: Colors.black45,
          centerTitle: true,
          title: const Text('CodewithHussain'),
        ),
        body: const Center(child: Text('Welcome!')),
      ),
    );
  }
}

You can see that we have a AppBar with gradient background below it.

But,

You ask me, “I need to create a gradient background for my body of the scaffold.”

You can easily exclude your AppBar from the Underlying gradient by simply checking the below example.

Gradient Background Only For `Scaffold`

Here you will focus on the body property of the Scaffold widget where you use the Container widget with BoxDecoration.

And you see we remove the Scaffold wrapping Container widget.

//Method 2
class GradientBackgroundScreen extends StatelessWidget {
  const GradientBackgroundScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //Make sure you make the scaffold background transparent
      backgroundColor: Colors.transparent,
      appBar: AppBar(
        backgroundColor: Colors.black45,
        centerTitle: true,
        title: const Text('CodewithHussain'),
      ),
      body: Container(
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [
                Colors.blue,
                Colors.amber,
                Colors.orange,
                Colors.green,
              ],
            ),
          ),
          child: const Center(child: Text('Welcome!'))),
    );
  }
}

Output:

Most of the time above method is enough but sometimes you want a more quick solution for the Flutter gradient background. You will exactly learn that method below.

Method 2: Create Gradient Background Using scaffold_gradient_background Package

This is the single-line solution for adding a gradient background.

You will install the scaffold_gradient_background package from the pub.dev.

Install scaffold_gradient_background:

Run this command in the console.

flutter pub add scaffold_gradient_background

You can define the package in the pubspec.yaml file.

dependencies:
  scaffold_gradient_background: ^1.0.3+1

then

Import the package

import 'package:scaffold_gradient_background/scaffold_gradient_background.dart';

Now you will replace the scaffold with the ScaffoldGradientBackground widget from the scaffol_gradient_background.

Define the LinearGradient for the gradient and mention the gradient colors.

Check the full code


//Method 3 - Using Scaffold Gradient Background Package
class GradientBackgroundScreen extends StatelessWidget {
  const GradientBackgroundScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ScaffoldGradientBackground(
      //Make sure you make the scaffold background transparent
      gradient: const LinearGradient(
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
        colors: [
          Colors.blue,
          Colors.amber,
          Colors.orange,
          Colors.green,
        ],
      ),
      appBar: AppBar(
        backgroundColor: Colors.black45,
        centerTitle: true,
        title: const Text('CodewithHussain'),
      ),
      body: Container(
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [
                Colors.blue,
                Colors.amber,
                Colors.orange,
                Colors.green,
              ],
            ),
          ),
          child: const Center(child: Text('Welcome!'))),
    );
  }
}

Output:

Conclusion

You find out about the two super easy ways to add gradients to your flutter app. you first use the Container widget with the BoxDecoration property then you use a gradient package from the flutter packages.

You can increase your flutter knowledge from flutter tutorial sections.

Hope you find it helpful thanks!