An App for my Profile — Flutter

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.

Splash Screen

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.

Tween Animation

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.

Curved Navigation Bar

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.

Hero Widget

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

Connect to other apps

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.

If you have any questions? any error/problem you are facing feel free to comment them down I will get back to you as soon as possible.

Or you can connect with me over LinkedIn.

Automation Tech Enthusiast || Terraform Researcher || DevOps || MLOps ||

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store