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.

At first, you may get confused between StatelessWidget, StatefulWidget but once you start practicing it will be as simple as popping a wheelie on a Yamaha MT - 09 (This might clear your confusion)

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

1. 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.

Upper Section:

Curve shape with the Header image.

The upper curve is created by making a Container with a child of ClipPath.

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.
ClipPath uses 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
2. Middle
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);

Center Section:

TextField and Proceed Buttons

This one is quite interesting. Lets first start with the TextField

TextField

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 TextField background.

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.

Circular Button

Here a Container is wrapped around an ImageIcon. For the Container's decoration, ShapeDecoration with CircularBorder is used to create the circle around the container. We also added a gradient using a LinearGradient.

RoundedRectangularButton

The Rounded Rectangular Buttons are created using a Container by adding RoundedRectangleBorder as the shape and LinearGradient.

We are using a Stack for placing the icon over the button. Stack works similar to RelativeLayout in Android.

The Visibility Widget is wrapped around the ImageIcon to change the visibility of the ImageIcon as per need.

Moving further we are using a Column to place the HeaderText “Email” vertically above the TextInput. Column acts similar to LinearLayout in Android.

Bottom Section

circular widgets and a curved path

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, 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.

SubirZ/Awesome_Flutter_UI

More Awesome Stuff here.

SubirZ/The-Morphing-Fab

Implementing Google’s newly launched Bottom AppBar

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!

Flutter Community (@FlutterComm) | Twitter