Experience Sharing on Developing A Near-Realistic, Beautiful Mobile app in Record time using Flutter
Tags: flutter, dart, android, tips
Published: 2019-06-18 06:57:39

# Some Background
My experience with developing mobile apps was very limited. To be honest, I had tried doing something basic with  [PhoneGap](https://phonegap.com/) long back and developed few *Hello World* style applications with Android SDK. But nothing with an incremental success to make it like a useful app.

I had built my own apprehensions about the complexity in setting up things, building, deploying etc. This caused huge reluctance in me in trying out mobile app development (sigh) in past.

Recently I learnt about [Flutter](https://flutter.dev/) from Google. What caught my attention was,

> Flutter - Beautiful native apps in record time

I felt, this statement is so true. Here I present my experience in building a Near Realistic, (almost) Beautiful native app developed in around 9 hours(record time, not continuous though.)! 

I will consider this as *record time* because, I never had any experience working with,
- Dart as a Programming Language and it's APIs. I had to learn, understand the useful APIs and code.
- Building anything that has to do with Native app.
- Setup => Develop => Publish cycle of a Mobile App.

This post is all about sharing the joy of Developing a native app using Flutter. I am sure, you will enjoy as well if you are a beginner like me with it.

# What's the App about?
I didn't want to build a *Hello World* again. I intended to learn the followings within a quick time by doing good amount of hands-on:
- Know all about the Setup without getting demotivated.
- Write good code.
- Routing and Navigation, Complex?
- Layout and Design, Do I need to be a designer?
- Play with Images and Styles, must be easy!
- Server Communication with API Call, Hmmm....
- Handling Custom Images/Icons
- Packaging and building
- Installation of the app
- Publishing it on Play Store, the fun begins.

I had enjoyed lots while developing a  [Prediction app using node-cli](https://blog.greenroots.info/a-step-by-step-guide-to-your-first-clicommand-line-interface-app-using-nodejs-cjvm6woau000mkvs1sd8u3qxm) before. How about building a *Prediction* mobile app? Here is how the interaction goes:

![flow.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1559207835443/dVe-_XYEq.gif)

# Let us go Step by Step
Here is all that I could gather as my learning from it:

### Setting up the environment
I have used Windows 10 operating system and the aim was to develop, test the APP on an Android device. However I ended up testing it on an IOS phone as well **without changing any of the source code**.

To set up the environment, I just followed this:  [Flutter Install Doc](https://flutter.dev/docs/get-started/install/windows). Follow it just line by line. All will be set, guaranteed. 

Note: if you are not using Google Nexus phone, you may feel that, you got to use additional driver for your OS to connect to the phone using USB for debugging. You do not need to do anything additional.

### Setting up the Editor to code and debug
I have configured VS Code as my editor for coding and debugging. Here is the link that I followed to set it up:  [Flutter VS Code setup](https://flutter.dev/docs/get-started/editor?tab=vscode)

### Flutter Doctor
Keep running `flutter doctor` command to ensure, you are on right track.
![flutter_doc.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1559240051056/adRdbFK4M.png)

### Code Structure
[Dart](https://dart.dev/) is the language behind Flutter. In many of the examples out there, you will see one `main.dart` file contains tons of code. As the application grows, this file becomes unmanageable. To make sure, I do not fall into this trap, I had structured my code as below:

![code.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1559240627351/PV2D9S8fo.png)

The `main.dart` file would look like:
```javascript
import 'package:flutter/material.dart';

import 'pages/homePage.dart';
import 'pages/resultPage.dart';


void main() => runApp(new PredictionApp());

class PredictionApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Prediction',
      theme: new ThemeData(
        primarySwatch: Colors.red,
      ),
      home: new HomePage(title: 'Prediction'),
       routes: <String, WidgetBuilder> {
        '/home': (BuildContext context) => new HomePage(),
        '/result' : (BuildContext context) => new ResultPage()
      },
    );
  }
}
```
### Routing
The *Prediction* app is a multi-page app. The *Home Page* asks for information from users. The *Result Page* fetches the information and show that to the users. There is also an option to go back to the *Home Page*. Well, we need **Routing**.

These lines in `main.dart` file do the trick:
```javascript
routes: <String, WidgetBuilder> {
        '/home': (BuildContext context) => new HomePage(),
        '/result' : (BuildContext context) => new ResultPage()
}
```

### Layout, Images and Style
The *Prediction* app has multiple *Widgets* in use. Like, the title bar at the top, Body for the content, Form which helps collecting info from users, Button, Images, Texts etc. So following leanings are essential:
-  [Introduction to Widgets](https://flutter.dev/docs/development/ui/widgets-intro)   
-  [Introduction to Layout](https://flutter.dev/docs/development/ui/layout/tutorial)
-  [Learn Interactivity](https://flutter.dev/docs/development/ui/interactive) 

These links are super important and very informative, engaging to follow.

### Server communication
Flutter uses plug-in based approach. We do not get everything installed by default with the framework itself. Rather, we need to install what we need and import into the dart file to make use of it. The `Prediction` app needs to interact with the  [Horoscope-API](https://github.com/tapaswenipathak/Horoscope-API) that exposes HTTP methods to fetch data. The response format of the API calls are *JSON*.

To support this, I had added following dependency in `pubspec.yaml` file:
```bash
http: ^0.12.0+2
```
and in `main.dart` file, imported it along with the json parser provided by Dart language itself.

```javascript
import 'package:http/http.dart' as http;
import 'dart:convert';
```
These three lines Request the API, Receive JSON response and Parse it respectively:
```javascript
final response = await http.get('http://horoscope-api.herokuapp.com/horoscope/' + predictionData.getDuration().toLowerCase() + '/' + zodiacSign);
final responseJson = json.decode(response.body); 
Horoscope horoscope = new Horoscope.fromJson(responseJson); 
```
The last line of the code parse the response JSON to map the value to the model(Horoscope) attributes.

The `Horoscope` model class is as simple as this:
```javascript
class Horoscope {
  String horoscope;
  String sunsign;

  Horoscope({this.horoscope,this.sunsign});


  factory Horoscope.fromJson(Map<String, dynamic> parsedHoroscope){
      return Horoscope(
        horoscope: parsedHoroscope['horoscope'],
        sunsign : parsedHoroscope['sunsign']
      );
  }
}
```
### Handling Custom Images
I have used many Custom Images(icons mostly) to represent various Zodiac Signs. Including the Custom Images and Icons are very easy.
- Create a folder called `assets` at the same level of the `pubspec.yaml` file.
- Keep all your icons and images inside the `assets` folder.
- Add the following entry into the `pubspec.yaml` file to include all the icons and images from asset folder:
```bash
assets:
    - assets/
```
If you want to include selected icons/images, please specify the names respectively.

### Debugging, Packaging and Building
I had used both `Android Emulator`(Installed as part of the setup) and Real Device to debug the application. The Footer bar of the VS Code shows the devices you are connected to and you can select one while debugging the code.

![editor_bottom.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1559243017538/xjf2BC7Uu.png)

To Build the APK, use following command:
```bash
flutter build apk
```

To install the APK on your device, connect the device with USB and use following command
```bash
flutter install -d DXXXXX0123456787
```
Where *DXXXXX0123456787* is your Device Id.

#### TIPS on Deploying the APK
- Your app may use internet connection like the *Prediction* app. Make sure to add the following line in `android/app/src/main/AndroidManifest.xml` file:
```xml
<uses-permission android:name="android.permission.INTERNET" /> 
```
See  [this thread](https://github.com/flutter/flutter/issues/27883#issuecomment-495910150) for more details.
- You might want to customize the *Launch Icon* of your app, like 
![icon.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1559243496519/lLsil_9YX.png)
Add the icon under folders named starts with `mipmap-`. These can be located under, `android\app\src\main\res`. Then modify the `AndroidManifest.xml` file to point to the image/icon as
```xml
android:icon="@mipmap/icon">
```
Please note, the same file can be edited to provide the suitable App name and description as well.

### Publishing the app to the APP Store
If you have followed it so far, you have done 70% of it already. Please follow the links for doing the rest of it:
-  [Android](https://flutter.dev/docs/deployment/android) 
-  [IOS](https://flutter.dev/docs/deployment/ios) 

That's All about it. It's very simple and super easy. Above all, pure fun!

# Code 
Feel free to clone and enhance the code from GitHub

[https://github.com/atapas/horoscope-app](https://github.com/atapas/horoscope-app)

You can See the app in full action in the following video(30 seconds):

[https://www.youtube.com/watch?v=ZLYFX18TQCA](https://www.youtube.com/watch?v=ZLYFX18TQCA)

# What's Next
Next, I would like to interact with Hardware like, Camera, Bluetooth and try out the  [ML Vision with Firebase](https://pub.dev/packages/flutter_camera_ml_vision). Stay Tuned!

# Credit
- Cover icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY

Hope you liked the start. Please let me know what's your experience with the mobile app development or with flutter. I will be glad to learn from your likes and dislikes of it. 

Keep reading, Keep following, Keep sharing!

*This story was [originally Published here](https://blog.greenroots.info/experience-sharing-on-developing-a-near-realistic-beautiful-mobile-app-in-record-time-using-flutter-cjwb25ql2000efvs1ofac4azo)*