Experiments, DIY & Proof Of Concept sharing

Site home

Flutter | DART | Android | iOS | Firebase

A Flutter Mobile App

On March 3, Google announced a major release of Flutter.
This 2nd version now makes possible to consider cross-platform development from another angle, since the same SDK can be used to develop iOS, Android, MacOS, Win, Linux and Web applications.

It is especially important to retain (because cross-platform development is not new), the ability of compiling native applications from the same code; the dream for any developer.

Since version 1 of Flutter (2018), this approach is already possible for iOS and Android mobile apps.
This is the reason why I had considered in the first part of my cellar-wine project, to investigate deeply Flutter which seemed to me already  an interesting compromise to meet the challenge of offering a mobile app to my project. without having to disperse myself between Objective-c / Swift and Java / Kotlin.

The FLutter community is growing, almost exponentially. Google has made great resources available (Youtube channels, tutorials, events, etc.). Everything is therefore available on the web to get started without wasting time.
Flutter is very intuitive. The mobile app only took me a few days (1-2 weeks with code-refactoring and Play stor publishing) to get started on my iphone and my samsung.

1. Goal

I had no other goal in mind than to transpose my angular App (running on web navigator) to mobile:

I also wanted to produce natives Apps for both iOS and Android without having to develop an maintain 2 different codes.

2. Environment

IMPORTANT: in order to provide the iOS (.ipa) file, a MacOS is mandatory. The code has to be compiled by X-Code, the Apple development tool.

For this reason, I recommand to sync the code with GitHub in order to be able to compile the same version for both platforms, and also to check as things progress, that added packages are still compiling on all environments.

There is no added value to re-explained how to install Flutter and Dart SDK on either environments. You might as well refer to the official documentation: https://flutter.dev/docs/development/tools

As far as I’m concern, I made the choice of Visual Studio Code (again).

I decided to implement an SSO authentication step just to check by myself the implications in terms of development. I only considered Google without performing any control from the API. Just keep in mind that according to my understanding, in such context publishing on the Apple Apps Store, requires Apple Authentication, otherwise the App will be rejected by Apple.

For the authentication, I opted for Firebase, another opportunity to be familiarized with this service. In order to speed up my understanding, I followed the free training tuto proposed by the Net Ninja (unmissable) on Youtube: Flutter&Firebase App

3. The code

The code is structured as described below:

Firebase requires 2 files to be downloaded into Flutter; one for iOS: GoogleService-info.plist which has to placed into the /ios folder. another one for Android: google-service.json which has to be placed into /android/app folder.

In order to allow Android to access internet (not necessary for ios), the following line has to be inserted into the AndroidManifest.xml file inside /android/app/src/main folder:

 

<uses-permission android:name=“android.permission.INTERNET”/>

The code itself is commented and does not required any more comments: cf github project

 

4. Result

The App woks perfectly on Android and iOS with a much elaborated look-and-feel compared to the web App. The Android one has been published on Play Store, but it doesn’t make sense to share the link as long as the App requires an API URL on startup (for securty reasons, I can’t share my on one). 

Enjoy !

8 Comments

  1. temp mail

    It’s as if you read my mind; you seem to know so much about this that it’s as if you wrote the book in it or something. Although I believe a few images would help to drive home the point a bit more, this is an outstanding site. I will definitely be back.

    Reply
  2. LipoSlend

    I discovered this amazing website a few days back, they craft excellent content for their audience. The site owner excels at educating followers. I’m thrilled and hope they maintain their awesome work.

    Reply
  3. temp mail

    I do not even know how I ended up here but I thought this post was great I dont know who you are but definitely youre going to a famous blogger if you arent already Cheers.

    Reply
  4. cerebrozen reviews

    I sincerely enjoyed what you’ve accomplished here. The sketch is fashionable, your written content chic, yet you appear to have developed some apprehension regarding what you aim to offer thereafter. Certainly, I shall return more frequently, just as I have been doing almost constantly, should you uphold this upswing.

    Reply
  5. admin

    Thank you for your warm thanks

    Reply
  6. Temp Mail

    The level of my enthusiasm for your work is the same as yours. The sketch is tastefully done, and the authored material has excellent qualities. Despite your uneasiness, it appears that you are unwilling to proceed in a direction that might cause anxiety. I’m certain you’ll be able to handle this situation effectively.

    Reply
  7. Temp Mail

    Fantastic site A lot of helpful info here Im sending it to some buddies ans additionally sharing in delicious And naturally thanks on your sweat.

    Reply
  8. Free URL Shortener

    Hey, Jack here. I’m hooked on your website’s content – it’s informative, engaging, and always up-to-date. Thanks for setting the bar high!

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *