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
|
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'; 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
|
1 2 3 4 5 6 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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.
|
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) { 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
|
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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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(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)), ); })), )); } } |
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 ✍️