An App for my Profile — Flutter
Daksh Jain
You must have seen many people create websites for themselves, to showcase their skills. They create professional websites to exhibit their portfolio in a creative way.
I came up with an app.
An application to showcase your skills, who you are, contact information, and what are you good at.
In this article, I will show how I have used creative methods to create a responsive application to tell about myself, my skills, and my contact information.
I have created this app using Flutter because it is easy to use and presents a single-code base for the developer. The same app can be converted for use in Android, iOS, or a web-based application.
Firstly I have created a splash screen.
A splash screen usually appears at the start of an application when it is loading.
I have used a creative way to show an animated “D” as the loader.
Such a screen is generally used by most apps like Uber, Airtel, Netflix, Google Apps, Skype, and most games like Clash of Clans, Fruit Ninja, etc.
Now, coming to the first page of the app.
Here, I have first presented an image in a bottom spherical fashion. Under that, a black & white partition is present width wise.
A function is created, on the press of the Rocket icon (🚀). When it is pressed the partition goes towards the right and :
- It seems as if the white background is behind the black one.
- The comment and 2 emojis appear.
- Colour of the surname is inverted.
- The Rocket disappears!!
This is done using the Tween Animation in Flutter. It gives the appearance that the first object is smoothly transforming into a second object. It provides a very smooth transition effect as the user wants.
In the comment & emojis, I have changed opacity from 0 to 1 => means it is transformed from not visible to visible.
The Rocket has the same Opacity concept, but it is changed from 1 to 0.
The partition going towards the right is done by changing the width of the left half from a certain value to MediaQuery.size.width, which fixes it to the size of the user’s device.
The colour of the surname is changed from white to black.
All this is done for the same duration so that it appears to be a very smooth transition when the click happens.
Next understanding the navigation of the multiple pages.
I have used the curved_navigation_bar package from pub.dev to create the bottom bar.
This is creative and easy to use package. It gives multiple options to edit the default setting of the NavBar : the colours, number of pages, & icons.
The speed of the animation can also be tweaked as per requirement. Overall it is a nice Navigation Bar to make your app look out-of-the-box.
Now looking at the second page.
On the second page, I have showcased what all skills I possess.
Here as soon as the person navigates, the list seems to fall from the top. This is again done by using the tween animation.
Then on each List tile, a Hero Widget is there. This widget shows a great appearance of the image when doing the transition from one page to the next.
It appears as if the first photo increased its size to a larger one & back to original when pressed back!
Now, the final contact information page
Here all my social media accounts are connected to this single app. On clicking any icon, I am directly navigated to that particular social media handle.
On pressing LinkedIn Logo it navigates to the LinkedIn app.
On pressing GitHub it opens my GitHub account on chrome because there is not an app of GitHub in my phone.
On pressing Gmail I am directly navigated to the Gmail app with from: <my mail id> already written in the compose section.
