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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import'package:flutter/material.dart';
import'dart:math';
voidmain(){
runApp(constMyApp());
}
classMyAppextendsStatelessWidget{
constMyApp({Key?key}):super(key:key);
@override
Widget build(BuildContext context){
returnMaterialApp(
debugShowCheckedModeBanner:false,
home:MyHomePage(),
);
}
}
Create MyHomePage class which extends stateful widget
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.
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
@override
Widget build(BuildContext context){
returnScaffold(
appBar:AppBar(
title:Text("Use of Gradient Color"),
),
body:SingleChildScrollView(
child:Padding(
padding:constEdgeInsets.all(5.0),
child:GridView.builder(
shrinkWrap:true,
physics:NeverScrollableScrollPhysics(),
gridDelegate:
constSliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount:2,
childAspectRatio:3/2,
crossAxisSpacing:6,
mainAxisSpacing:6),
itemCount:20,
itemBuilder:(BuildContext ctx,index){
returnContainer(
child:Padding(
padding:constEdgeInsets.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
Skilled in iOS and Flutter app development, with expertise in Swift and Auto Layout. Enhances app efficiency through advanced frameworks, bloc patterns, and innovative tools.
Be the first to comment.