How to create a Greetings App Using Flutter and deploy to play store

This is only a basic App in the flutter to show the greet the user based on the time when the user opens the app. This tutorial aims for beginners in the flutter to help and understand the flutter framework. Suggestions and comments are welcome.

What we are trying to do ??

We will implement a basic App that will greet the user Good morning, Good afternoon, Good Evening and Good night based on the current time. Also, we will show the corresponding image accordingly.

Let's get to work

I will be using the official doc links some places. Also I have added GitHub commit link to each section to show what was the difference and also provided with the image of the output on each step

Our Work Area

1. Install the flutter SDK and UP and running Emulator.
2. Create the basic App and install the dependencies.
3. App Widget Tree.
4. Create the Basic UI.
5. Add background and text color.
6. Added fonts for the header.
7. Added image from the network.
8. Complete the design for UI for the morning.
9. Custom logic based on time.
10. Add icons for App.
11. Publish our App to Store.

1. Install the flutter SDK and UP and running Emulator

To install the flutter, please follow this link from the official doc. After this check on installation is everything works fine using flutter doctor -v

It will get something like above. To run the android emulator, use the below command,

flutter emulators --launch <emulator_name>

2. Create the basic App and install the dependencies

Creating a new App using the command flutter create <app_name>

hello_my_dear is my app name

commit link

3. App Widget Tree.

In flutter, Everything is a widget, So we are going to implement a rough sketch of our app using the widget tree in the flutter. All these widgets are available in the flutter.

will explain those widgets in the below section.

4. Create the Basic UI.

So Far, we are only in theory, Now it is the time for the real action.

First, we need to import the material package which will have all the material tools. Clear the main.dart file and add,

import 'package:flutter/material.dart';

Now, to test we need to check everything is working using a text called Welcome My Dear. Below is the whole code for this,

Explanation:

1. Text() is a widget to display any message.
2. Center() is to align with the Center.
3. Scaffold() basic material design visual layout structure of the flutter app.
4. StatelessWidget since we don’t have state to handle we can go with this.

The response will be like below,

GitHub Link

5. Add background and text color.

To add those, we need to use backgroundColor color property of Scaffold widget.

To add the font color, need to add the color property inside TextStyle

6. Added fonts for the header.

Currently, we don’t have a nice look for the header. Using the flutter it is possible to add custom fonts.

in pubspec.yaml already contains the skeleton for this, it is in commented format, will remove the comments and add our own fonts. I have placed the fonts in root_path/assets/fonts. I have downloaded a suitable font from google fonts and placed that path.

then hit save, flutter will automatically install the dependency and then we can use this font in our app.

We can add this under the TextStyle property.

The response is below,

GitHub commit link

7. Added image from the network.

Our aim is to add the greeting with an image on the bottom. To do that, we can use the Image widget in the flutter.

First of all, we will update with an image from the URL to check it is working correctly, then only will update with the local images.

Image.network('src link')

We have added SafeArea to handle the content only in the boundary and gives some spacing using the Padding widget.

The response is below,

GitHub Link

8. Complete the Design for UI for the morning.

Now, we know how we can place images from the network, it is now the time for a local image, ie from inside our root path. To do that, we can have some changes to the existing code.

One thing to be done is to declare the image to flutter, this is the image we are using here, we can add this by adding the info to the pubspec.yaml

Also need to define which part of the image we will place in, here in my example, root_path/assets/images/. By defining, images/flutter will take all the images under this folder

Need to add the image with the source path,

Image.asset('image path') // 'assets/images/1.jpg'

Also, we have added another widget called ClipRRect which will help us to curve the image in circular around the corners.

The Response is below,

GitHub Link

9. Custom logic based on time

Now, we need to display images and messages based on time. Things to do is,

→ Fetch the current time.

→ Parse the time and fetch only hours.

→ Change messages according to time

→ Remove the hard coding message and images and update it with runtime.

Fetch the current time.

The current time can be fetched using

DateTime now = DateTime.now();

Parse the time and fetch only hours.

To parse the time, need to install the library called intl, we need to install using pubspec.yaml and import in the main.dart.

Now, our timeNow a variable has the hour value in integer format we only need to check the condition and do the needful.

Change messages according to time

We will initialize 2 variables for messages and will add a condition to change the message accordingly.

All these .jpg files are available in our assets/images/ path.

All these images I have used pexeles, They are free to use and a lot of thanks to the awesome pics.

Remove the hard coding message and images and update it with runtime

Now we have a correct message and the image in variables, we can add these variables in place of message and image.

$imageName will interpolate the name and in run time it will fill with the correct value.

All done, Now we can run the App

Note: It shows good morning when I recorded this, it is morning here :D

10. Add icons for App.

by default, all the icons for the app are taken from the flutter icon only, we need to use our own icon and replace all.

I have taken the icons from icons8.

To use this icon for our app, we can use another package called flutter_launcher_icons . It will create the necessary icon for our app. We need to add this plugin in the pubspec.yaml .

We need to specify that which is the icon image and where it is placed. I have placed my new downloaded icon in the root_path/assets/images/icon.png

Then run these commands will create all the necessary icons.

flutter pub get
flutter pub run flutter_launcher_icons:main

For more details, visit this link.

GitHub Link

Now, we have a new icon for the app, we can check that in the emulator as well.

Awesome let's proceed with publish the App to play Store.

11. Publish our App to Store.

I know, it is a pretty simple App, publishing this app to the play store gives us so much confidence to do more. Currently, I am deploying to the android store only.

To do that, we need to have a developer account in the play store by paying $25 as a one-time fee. After that, we can upload multiple apps.

Also, we need to add some changes in our code to handle the play store,

Please visit this link and update it accordingly. It is from the official flutter doc which explains the app name and creating a build for release, one with APK and other with app bundle. I would use the app bundle for this.

Once the Keystore update, manifest reviewing is over we can proceed with creating the app bundle.

To create the app bundle,

flutter build appbundle

We have app-release.aab in the above-mentioned path. We will use this for the App release.

Now, login to the Google play console and create an application,

Mandatory thing is to add 512x512 png file for the icon, we can use any resize online tools to create like that if you know to design, then you can do your own.

Next thing is to add some screenshot for the app, that we can use any screenshot tool to fetch to do that.

The next thing is we need to create a Feature graphic, for this, we can use the canva. use the create design → custom size and type 1024 w x 500 h

I am not much of a designer, I just created an image for this,

On the dashboard of the google play store, select the app releases tab and then select your track, it will be good if we select the alpha/beta track. I am using the beta track for deployment for the first time then we will proceed with the production deployment.

We need to upload the .aab files we created,

Also, on the left side, the checked tabs are greyed, we need to click on each tab and add necessary details which are like our app is not promoting violence, Countries where our app is present and kind of things. once we are done with all, we can click on publish our app.

that’s it, normally google takes a maximum of 7 days or more to check our app and then only they will publish.

Thanks for reading my blog, please do clap or comment, if you like it, Will upload new blogs on flutter in the coming days.

If this story helps you to learn anything, please feel free to buy me a coffee

Repo Link: Link

Personnel details: GitHub-link . Linkedin Link

contact me: anoob.bava@gmail.com

Flutter Community