Gradients in Flutter

Gradient, a reflection of your persona..

A long gap since I wrote the last article, Future Builder — Part Two. In this article, I have made use of gradients available from the flutter framework.

Part One

Lets start..First we need to add the images in our app. This is done as

in the pubspec.yaml…

Include these in the main.dart as

Moving forward, we took a SizedBox, added properties such as height and child.

In the child we took a PageView.builder, adding properties such as scrollDirection, padding etc and finally adding images in the itembuilder.

Here, you can see the viewportFraction set as 0.8. This allows us to see the images on the left and right side of the center image. If this value is set to 1, then only 1 image can be seen in the screen at a time. (see below)

Inside the itembuilder of PageView, we have used a material widget. This makes use of Material guidelines and allows us to benefit from its functionalities.

Material widget has the property of child, where we used the Stack Widget. Finally, inside this stack widget, we binded our images as :

Stackfit.expand ensures that the images are aligned taking up the space of entire card. If you don’t specify, then it aligns (by default) to top left….

BoxFit.fill makes sure that entire image is displayed inside the card. You can explore various options such as BoxFit.cover etc…

Enough theory, time to see the results….

Part Two

Lets start including the gradient now….

We have used DecoratedBox property of flutter, which comprises of two type of gradients — Linear Gradient and Radial Gradient…

In this case, we used Linear Gradient…It asks us to specify the begin and end points of the gradients. Also, we have to enter the colors here too, which would use the points (begin and end) as defined by the user…

begin : FractionalOffset.bottomRight (states the gradient should start from the bottom right of the screen).

end: FractionalOffset.topLeft(states the gradient should end towards the top left of the screen).

Colors, two colors are defined which gets applied from the begin till the end…

Thanks for your patience….

Video demonstration :

Also, I made a separate program which uses the gradients onto the text fields only…Here is the result:

For complete source code, visit

https://github.com/AseemWangoo/flutter_programs/blob/master/gradient_text.dart

P.S……………….