Creating Awesome Login Screen in Flutter ❤️
It's been a month since I started using Flutter and I am loving it. Creating UI is pretty simple once you get used to it.
With the intro out of the way, lets quickly dive into what we are going to create today:
Isn’t it beautiful 😍, I know it is. All credit goes to Sandip Ramani for this awesome inspiration.
For simplicity, let's divide the screen into 3 different parts
- Upper Section: Holds the upper curve and header image.
2. Center Section: Holds the TextField and proceed button.
3. Bottom Section: Holds the gradient curve and rounded shapes.
In the context of computer graphics, Clipping is a method to selectively enable or disable rendering operations within a defined region of interest. A clipping area is supplied to a Canvas so the rendering engine will only “paint” the pixels inside of the defined area. Nothing “painted” outside of that area will be rendered.
As developers, we use clipping to create awesome looking, custom user interfaces. You can create some very cool, custom looking interface with very few lines of code.
Let's dig into some code how its created:
Here we are using a
ClipPath to clip the path in Container.
CustomClipper to clip the path required.
BoxDecoration is used to add a Linear Gradient to the Container.
Firstly, we are creating a path by starting a line at the top left corner of the screen and using path.quadraticBezierTo() method to create curves at three points
1. Bottom Left
3. Top Right
Control Point decides the amount of curve and End Point decides total length the curve path will travel.
For example, you want to create a curve near the bottom left of the screen. So, you will create a QuadraticBezier curve with control point a little away from the bottom left and end point near the center.
control point = Offset(bottomLeft + 30, height - 40);
This one is quite interesting. Lets first start with the
We are using a material widget to add the desired elevation. In addition to this, we can also add color to our shadow.
Material Widget is provided the shape of
RoundedRectangularBorder with Rounded edges only at one side i.e
topRight to add a curve to our
The Material widget is wrapped around the
TextField to provide it desired rounded background.
we have used InputDecoration in TextField with border as InputPorder.none to remove the underLine from InputText.
Here a Container is wrapped around an
ImageIcon. For the Container's decoration,
CircularBorder is used to create the circle around the container. We also added a gradient using a
The Rounded Rectangular Buttons are created using a Container by adding
RoundedRectangleBorder as the shape and
The Visibility Widget is wrapped around the
ImageIcon to change the visibility of the
ImageIcon as per need.
Its looks pretty cool right.
Let's see how the circular widget is made.
We created the circular widget using a Material widget adding a shape of
CircleBorder is used to add the white border around the circle.
You can also use Container instead of Material to create the same Circular Widget.
We translated the Circular widget out the screen by wrapping it by a Transform widget.
The bottom curved widget is created using ClipPath that I explained at the Upper Section.
You can check out the entire code for this post on my repository. Feel free to fork and share your creations as well.
This repository demonstrates use of various widgets in flutter and tricks to create beautiful UI elements in flutter…github.com
More Awesome Stuff here.
This repository demonstrates how to create custom fab transformation using Object animators, Circular Reveal and Path…github.com
We have reached the end of this post, If you have any questions about any of the widgets used, check out the docs or ask in the comments section. There are plenty of great widgets in the documentation, but hopefully, I gave you enough to get started.
Thanks for reading!
If you enjoyed reading 😍, Show some Love by clapping 👏 on this post!