Gradients in Flutter

Gradients in Flutter

aseemwangoo No Comment
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

Adding assets…

Adding assets…

in the pubspec.yaml…

Include these in the main.dart as

List of images added…

List of images added…

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.

SIzedBox and PageView Builder…

SizedBox and PageView Builder…

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)

View port = 1.0

View port = 1.0

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…

Material Widget…

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

Stack of images

Stack of images

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 One….

Part One….

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…

Gradients in Flutter….

Gradients in Flutter….

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

endFractionalOffset.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……………….

Leave a Reply