How to generate gradient background in Flutter

Flutter provides creative freedom to developers to create visually attractive applications by providing various UI features. Flutter is a single codebase framework that can be used across different platforms like Android and iOS. It has the pub package manager that offers a range of packages and plugins.

What is a gradient background?

A gradient background refers to a visually attractive effect that is created when two colors are gradually blended with each other, achieving various tones of the same shades. The transition from one color to another is smooth, creating a pleasing effect, as seen in the image below.

import 'dart:math';
import 'package:flutter/material.dart';

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

class GradientBackgroundApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GradientBackgroundGenerator(),
    );
  }
}

class GradientBackgroundGenerator extends StatefulWidget {
  @override
  _GradientBackgroundGeneratorState createState() =>
      _GradientBackgroundGeneratorState();
}

class _GradientBackgroundGeneratorState
    extends State<GradientBackgroundGenerator> {
  String gradientCode = '';
  Color color1 = Colors.blue;
  Color color2 = Colors.purple;

  void generateGradient() {
    final Random random = Random();
    color1 = Color.fromRGBO(random.nextInt(256), random.nextInt(256),
        random.nextInt(256), 1);
    color2 = Color.fromRGBO(random.nextInt(256), random.nextInt(256),
        random.nextInt(256), 1);

    gradientCode = '''
      background: linear-gradient(to bottom, ${color1.toString()}, ${color2.toString()});
    ''';

    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Gradient Background Generator'),
        centerTitle: true,
      ),
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [color1, color2],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
          ),
        ),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'Generated Gradient',
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
              ),
              SizedBox(height: 20),
              Container(
                padding: EdgeInsets.all(20),
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.white, width: 2),
                ),
                child: Text(
                  gradientCode,
                  style: TextStyle(color: Colors.white),
                ),
              ),
              SizedBox(height: 40),
              ElevatedButton(
                onPressed: generateGradient,
                child: Text('Generate Random Gradient'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Create generative gradient background.

Lines 29–37: Create an generateGradient() method that generates random color combinations, each stored in color1 and color2, respectively, and dynamically updates the string stored in gradientCode.
Line 40: The setState() method is called to set the changes made and preserve the newly assigned values to the attributes.
Lines 44–45: Create the app UI in the build method that returns a Scaffold widget containing the basic structure.
Lines 46–48: Set the appBar property to an AppBar widget, which specifies the a title and the backgroundColor.
Lines 50–55: Set the body to Container widget with a LinearGradient type and set the positions of the two colors in it.
Lines 58–74: Create a Center widget, and inside it, make a Column widget to align the content vertically and set the title, text styling, and font to get an interface as per requirements.
Line 77: Create a box to display the generated gradient background code using SizedBox() and pass the height as a parameter.
Lines 78–80: Create ElevatedButton widgets that trigger the generateGradient function when pressed and set the button text.

Code output

Press the Generate Random Gradient button and see the background dynamically change to a randomly created gradient color combination. The code for the generated color palette appears in the box so that it can be used for the required purposes.

How to generate gradient background in Flutter

What is a gradient background?

Example code

Code explanation

Code output

Real-life application

Summary