Gradient Colors in GridView Flutter

Gradient Color is known as the blending of colors with another color. Gradient Colors in GridView will make it unique.

You can visit Flutter App Development Services from mobikul.

So, Gradient colors are used to make UI more attractive and create visual interest and help to move users through a design.

However, Gradient Colors in GridView can be a highly useful and engaging design tool and add spark and intrigue to a multitude of projects.

This blending can occur between colors of the same tone (from light blue to navy blue), colors of two different tones (from blue to yellow), or even between more than two colors (from blue to purple to red to orange).

Types of Gradient Color

Radial
Circular

Radial:

The Radial gradients work from the center point to the outer edge of a Lens Effects feature, changing color or brightness in a straight line from left to right as you scan the gradient bar. firstly, the left edge of the gradient is aligned with the center of the effect and the right edge is aligned with the outer edge of the effect.

Circular:

Similarly, Changes colors in a circular manner, working clockwise around a Lens Effects feature. However, If you mark North, East, South, and West on a circle, these points represent the 0%, 25%, 50%, and 75% marks of the gradient.

Why we use Gradient Colors

To Help Move the Eye
Backgrounds Create Interest
Lettering Can Provide a Focal Point
Create Something Memorable
They Are Easy to Create

Now lets start implementing

Create a flutter project and you will get a default Main.dart file.

Add Dependency for Gradient Color

Now Create Class MyApp & return Material app

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home:  MyHomePage(),
    );
  }
}

import 'package:flutter/material.dart';

import 'dart:math';

void main() {

runApp(const MyApp());

}

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);

@override

Widget build(BuildContext context) {

return MaterialApp(

debugShowCheckedModeBanner: false,

home: MyHomePage(),

);

}

Create MyHomePage class which extends stateful widget

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class MyHomePage extends StatefulWidget {

const MyHomePage({Key? key}) : super(key: key);

@override

State<MyHomePage> createState() => _MyHomePageState();

}

In this paragraph, we are going to create some lists of Gradient Colors and add them in a list of type List<List<Color>> . So, please see below code snippet. And import dart.math to use Random() to use Gradient Colors in GridView. In other words,

Random()

Random is used to pick and show the random color set on any random child.

class _MyHomePageState extends State<MyHomePage> {
 Random _random = Random();
List<List<Color>> gradientColors = [];
List<Color> gradientFirst = [Color(0xFF6f0000), Color(0xFF6f0000), Color(0xFF200122)];
List<Color> gradientSecond = [Color(0xFFF56217), Color(0xFF0B486B), Color(0xFF0B486B)];
List<Color> gradientThird = [Color(0xFFffffff), Color(0xFF076585), Color(0xFF076585)];
List<Color> gradientFourth = [Color(0xFF283048), Color(0xFF283048), Color(0xFF859398)];
List<Color> gradientFifth = [Color(0xFF1F1C18), Color(0xFF8E0E00), Color(0xFFf3aa94)];


  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    gradientColors.addAll({
      gradientFirst,gradientSecond,gradientThird,
        gradientFourth,gradientFifth
    });
  }

class _MyHomePageState extends State<MyHomePage> {

Random _random = Random();

List<List<Color>> gradientColors = [];

List<Color> gradientFirst = [Color(0xFF6f0000), Color(0xFF6f0000), Color(0xFF200122)];

List<Color> gradientSecond = [Color(0xFFF56217), Color(0xFF0B486B), Color(0xFF0B486B)];

List<Color> gradientThird = [Color(0xFFffffff), Color(0xFF076585), Color(0xFF076585)];

List<Color> gradientFourth = [Color(0xFF283048), Color(0xFF283048), Color(0xFF859398)];

List<Color> gradientFifth = [Color(0xFF1F1C18), Color(0xFF8E0E00), Color(0xFFf3aa94)];

@override

void initState() {

// TODO: implement initState

super.initState();

gradientColors.addAll({

gradientFirst,gradientSecond,gradientThird,

gradientFourth,gradientFifth

});

}

however, here are the code snippets of the UI part that show the complete interface. Here we have used the GridView.Builder to show the multiple children.

In addition, please check the code snippet.

 @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Use of Gradient Color"),
        ),
        body: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(5.0),
            child: GridView.builder(
              shrinkWrap: true,
              physics: NeverScrollableScrollPhysics(),
              gridDelegate: 
               const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                childAspectRatio: 3 / 2,
                crossAxisSpacing: 6,
                mainAxisSpacing: 6),
                itemCount: 20,
                 itemBuilder: (BuildContext ctx, index) {
                    return Container(
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                     child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.end,
                          children: [
                            Text(
                              "Gardient Color Tile ",
                              style: TextStyle(
                                  fontWeight: FontWeight.bold,
                                  color: Colors.white),
                            ),
                            Text(
                              ("Tile -> " + (index).toString()),
                              style: TextStyle(
                                  fontWeight: FontWeight.bold,
                                  color: Colors.white),
                            )
                          ],
                        ),
                      ),
                   decoration: BoxDecoration(
                       gradient: LinearGradient(
                         begin: Alignment.topLeft,
                         end: Alignment.bottomRight,
                        colors: gradientColors[
                       _random.nextInt(gradientColors.length)],
                          ),
                          borderRadius: BorderRadius.circular(5)),
                    );
                  })),
        ));
  }

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text("Use of Gradient Color"),

body: SingleChildScrollView(

child: Padding(

padding: const EdgeInsets.all(5.0),

child: GridView.builder(

shrinkWrap: true,

physics: NeverScrollableScrollPhysics(),

gridDelegate:

const SliverGridDelegateWithFixedCrossAxisCount(

crossAxisCount: 2,

childAspectRatio: 3 / 2,

crossAxisSpacing: 6,

mainAxisSpacing: 6),

itemCount: 20,

itemBuilder: (BuildContext ctx, index) {

return Container(

child: Padding(

padding: const EdgeInsets.all(8.0),

child: Column(

crossAxisAlignment: CrossAxisAlignment.start,

mainAxisAlignment: MainAxisAlignment.end,

children: [

Text(

"Gardient Color Tile ",

style: TextStyle(

fontWeight: FontWeight.bold,

color: Colors.white),

Text(

("Tile -> " + (index).toString()),

style: TextStyle(

fontWeight: FontWeight.bold,

color: Colors.white),

)

decoration: BoxDecoration(

gradient: LinearGradient(

begin: Alignment.topLeft,

end: Alignment.bottomRight,

colors: gradientColors[

_random.nextInt(gradientColors.length)],

borderRadius: BorderRadius.circular(5)),

);

})),

));

}

Have a look on complete code of Gradient Colors in GridView

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Random _random = Random();
  List<List<Color>> gradientColors = [];
  List<Color> gradientFirst = [
    Color(0xFF6f0000),
    Color(0xFF6f0000),
    Color(0xFF200122)
  ];
  List<Color> gradientSecond = [
    Color(0xFFF56217),
    Color(0xFF0B486B),
    Color(0xFF0B486B)
  ];
  List<Color> gradientThird = [
    Color(0xFFffffff),
    Color(0xFF076585),
    Color(0xFF076585)
  ];
  List<Color> gradientFourth = [
    Color(0xFF283048),
    Color(0xFF283048),
    Color(0xFF859398)
  ];
  List<Color> gradientFifth = [
    Color(0xFF1F1C18),
    Color(0xFF8E0E00),
    Color(0xFFf3aa94)
  ];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    gradientColors.addAll({
      gradientFirst,
      gradientSecond,
      gradientThird,
      gradientFourth,
      gradientFifth
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Use of Gradient Color"),
        ),
        body: SingleChildScrollView(
          child: Padding(
              padding: const EdgeInsets.all(5.0),
              child: GridView.builder(
               shrinkWrap: true,
               physics: NeverScrollableScrollPhysics(),
               gridDelegate: const 
              SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 2,
                      childAspectRatio: 3 / 2,
                      crossAxisSpacing: 6,
                      mainAxisSpacing: 6),
                  itemCount: 20,
                  itemBuilder: (BuildContext ctx, index) {
                    return Container(
                     child: Padding(
                       padding: const EdgeInsets.all(8.0),
                    child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                   mainAxisAlignment: MainAxisAlignment.end,
                          children: [
                            Text(
                              "Gardient Color Tile ",
                              style: TextStyle(
                                  fontWeight: FontWeight.bold,
                                  color: Colors.white),
                            ),
                            Text(
                              ("Tile -> " + (index).toString()),
                              style: TextStyle(
                                  fontWeight: FontWeight.bold,
                                  color: Colors.white),
                            )
                          ],
                        ),
                      ),
                      decoration: BoxDecoration(
                          gradient: LinearGradient(
                            begin: Alignment.topLeft,
                            end: Alignment.bottomRight,
                            colors: gradientColors[
                       _random.nextInt(gradientColors.length)],
                     ),
                      borderRadius: BorderRadius.circular(5)),
                    );
                  })),
        ));
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

import 'package:flutter/material.dart';

import 'dart:math';

void main() {

runApp(const MyApp());

}

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);

@override

Widget build(BuildContext context) {

return MaterialApp(

debugShowCheckedModeBanner: false,

home: MyHomePage(),

);

}

class MyHomePage extends StatefulWidget {

const MyHomePage({Key? key}) : super(key: key);

@override

State<MyHomePage> createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

Random _random = Random();

List<List<Color>> gradientColors = [];

List<Color> gradientFirst = [

Color(0xFF6f0000),

Color(0xFF200122)

];

List<Color> gradientSecond = [

Color(0xFFF56217),

Color(0xFF0B486B),

Color(0xFF0B486B)

];

List<Color> gradientThird = [

Color(0xFFffffff),

Color(0xFF076585),

Color(0xFF076585)

];

List<Color> gradientFourth = [

Color(0xFF283048),

Color(0xFF859398)

];

List<Color> gradientFifth = [

Color(0xFF1F1C18),

Color(0xFF8E0E00),

Color(0xFFf3aa94)

];

@override

void initState() {

// TODO: implement initState

super.initState();

gradientColors.addAll({

gradientFirst,

gradientSecond,

gradientThird,

gradientFourth,

gradientFifth

});

}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text("Use of Gradient Color"),

body: SingleChildScrollView(

child: Padding(

padding: const EdgeInsets.all(5.0),

child: GridView.builder(

shrinkWrap: true,

physics: NeverScrollableScrollPhysics(),

gridDelegate: const

SliverGridDelegateWithFixedCrossAxisCount(

crossAxisCount: 2,

childAspectRatio: 3 / 2,

crossAxisSpacing: 6,

mainAxisSpacing: 6),

itemCount: 20,

itemBuilder: (BuildContext ctx, index) {

return Container(

child: Padding(

padding: const EdgeInsets.all(8.0),

child: Column(

crossAxisAlignment: CrossAxisAlignment.start,

mainAxisAlignment: MainAxisAlignment.end,

children: [

Text(

"Gardient Color Tile ",

style: TextStyle(

fontWeight: FontWeight.bold,

color: Colors.white),

Text(

("Tile -> " + (index).toString()),

style: TextStyle(

fontWeight: FontWeight.bold,

color: Colors.white),

)

decoration: BoxDecoration(

gradient: LinearGradient(

begin: Alignment.topLeft,

end: Alignment.bottomRight,

colors: gradientColors[

_random.nextInt(gradientColors.length)],

borderRadius: BorderRadius.circular(5)),

);

})),

));

}

Gradient Colors in GridView Images

Thanks for reading this article ❤

I hope this blog will help you to learn about the Gradient Colors in flutter and you will be able to implement it. For more blogs click here.

For similar blogs click here.

Happy Learning ✍️

Flutter Gradient GradientColor

Deepak Kumar 27 April 2023

. . .

Gradient Colors in GridView Flutter

Types of Gradient Color

Radial:

Circular:

Why we use Gradient Colors

Now lets start implementing

Random()

Have a look on complete code of Gradient Colors in GridView

Gradient Colors in GridView Images

Leave a Comment Cancel Reply

Message Sent!