# Experience Sharing on Developing A Near-Realistic, Beautiful Mobile app in Record time using Flutter # Background My experience with mobile apps development is minimal. I had tried doing something basic with [PhoneGap](https://phonegap.com/) a while back and developed a few *Hello World* style applications using the 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 the past. Recently I learned 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. So 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 its APIs. I had to learn, understand the useful APIs and code. - Building anything that has to do with the 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 it 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 a 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. Instead, however, testing it on an IOS phone and **without changing ane source code**. I just followed this to set up the environment: [Flutter Install Doc](https://flutter.dev/docs/get-started/install/windows). Follow it line by line. All will be set, guaranteed. Note: if you are not using a Google Nexus phone, you may feel that you got to use an 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 the `flutter doctor` command to ensure you are on the 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, and 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: { '/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 shows that to the users. There is also an option to go back to the *Home Page*. Well, we need **Routing**. These lines in the `main.dart` file do the trick: ```javascript routes: { '/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 collect info from users, buttons, 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 a 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 it into the dart file to use 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 is *JSON*. To support this, I had added the following dependency in the `pubspec.yaml` file: ```bash http: ^0.12.0+2 ``` And in the `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 parses 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 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. So including the Custom Images and Icons are very easy. - Create a folder called `assets` at the same level as 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 the 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 the following command: ```bash flutter build apk ``` To install the APK on your device, connect the device with a USB and use the following command ```bash flutter install -d DXXXXX0123456787 ``` Where *DXXXXX0123456787* is your Device Id. #### TIPS on Deploying the APK - Your app may use an internet connection like the *Prediction* app. Make sure to add the following line in the `android/app/src/main/AndroidManifest.xml` file: ```xml ``` 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, we can edit the same file 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 90% of it already. Please follow the links for doing the rest of it. Learn about the deployment. - [Android](https://flutter.dev/docs/deployment/android) - [IOS](https://flutter.dev/docs/deployment/ios) That's All about it. It's effortless and super easyBut, above all, pure fun! # Code Feel free to clone and enhance the code from GitHub %[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] # What's Next Next, I would like to interact with Hardware like a 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 I hope you liked the start. Please let me know what's your experience with mobile app development or with flutter. I will be glad to learn from your likes and dislikes of it. Let's connect. You can follow me on [Twitter(@tapasadhikary)](https://twitter.com/tapasadhikary). Keep reading, Keep following, Keep sharing!