Flut­ter — you will take to it in no time. It’s all becau­se of the high-spe­ed deve­lop­ment, its attrac­ti­ve inter­fa­ce and com­po­nents who­se UI will work on many plat­forms, instan­tly visi­ble effects, and a huge open-sour­ce com­mu­ni­ty aro­und this pro­ject. That is why we deci­ded to use Flut­ter in our two pro­jects — check out which featu­res of Flut­ter have pro­ved the most useful.

Flut­ter is an open-sour­ce fra­me­work inven­ted by Google, geared to cre­ate appli­ca­tions desi­gned for vario­us ope­ra­ting sys­tems. Ini­tial­ly ava­ila­ble only for Andro­id devi­ces, it cur­ren­tly allows you to build appli­ca­tions for iOS, macOS and web browsers.

Flut­ter allows you to effi­cien­tly imple­ment attrac­ti­ve-looking, respon­si­ve user inter­fa­ces. It ena­bles the simul­ta­ne­ous use of UI com­po­nents and design pat­terns from dif­fe­rent plat­forms — inc­lu­ding Mate­rial Design wid­gets deri­ved from Google design lan­gu­age and the Cuper­ti­no set, ori­gi­na­ting from Apple ope­ra­ting systems.

The basis for cre­ating the appli­ca­tion is the Dart lan­gu­age, which is cur­ren­tly being deve­lo­ped by Google, main­ly having the discus­sed fra­me­work in mind. Dart is an object-orien­ted lan­gu­age with the C pro­gram­ming lan­gu­age-deri­ved syn­tax that also allows the use of func­tio­nal pro­gram­ming. Addi­tio­nal­ly, Dart has a well-desi­gned API for asyn­chro­no­us ope­ra­tions and the abi­li­ty to instan­tly upda­te the code of a run­ning appli­ca­tion. For deve­lo­pers who know lan­gu­ages, ​​such as C#, Kotlin or Swift, it allows them to quic­kly beco­me flu­ent in using it.

Sin­ce Flut­ter is an open-sour­ce fra­me­work, in the last few years, a lar­ge com­mu­ni­ty of pro­gram­mers has for­med aro­und it, cre­ating libra­ries with a wide ran­ge of appli­ca­tions — from high­ly- spe­cia­li­sed UI com­po­nents, to data­ba­ses, to libra­ries dedi­ca­ted to network communication.

It is also worth noting that buil­ding richly deta­iled GUIs with Flut­ter is very smo­oth. Due to the “Hot relo­ad” func­tio­na­li­ty, chan­ges in the code gene­ra­ting visu­al ele­ments are imme­dia­te­ly visi­ble on the devi­ce scre­en. This pro­cess does not requ­ire the deve­lo­per to restart the appli­ca­tion and navi­ga­te to the modi­fied sec­tions of the application.

Let’s look at how Flut­ter works in prac­ti­ce, using the exam­ple of two pro­jects deve­lo­ped by our team.

Our task was to cre­ate two mobi­le appli­ca­tions, the key pur­po­se of which was to pre­sent the con­tent down­lo­aded from the server, as well to pro­cess and send data ente­red by the user via the smart­pho­ne touch scre­en. The use of this fra­me­work in both cases ena­bled deve­lo­pers to cre­ate softwa­re com­pa­ti­ble with Andro­id and iOS using a com­mon sour­ce code.

SUSTAC

In the case of the Sustac appli­ca­tion, which is a com­pen­dium of know­led­ge abo­ut good prac­ti­ces that the user can apply in eve­ry­day life to mini­mi­se the cli­ma­te chan­ge, Flut­ter has allo­wed us to cre­ate one code, com­pa­ti­ble with  iOS and Andro­id, which signi­fi­can­tly shor­te­ned the work time and mar­ke­dly redu­ced the costs of pro­ject implementation.

The appli­ca­tion inte­gra­tion with the data­ba­se cre­ated in the Google Fire­ba­se servi­ce only requ­ired the con­fi­gu­ra­tion of the ava­ila­ble depen­den­cy and wri­ting the code fet­ching the data using the Fire­ba­se API. Then the down­lo­aded data was sent to the wid­gets pre­sen­ted on the user’s  smart­pho­ne screen.

The main scre­en of the appli­ca­tion featu­res a grid of the­ma­tic cate­go­ries of texts acces­si­ble to the user and a gal­le­ry of gre­en cards repre­sen­ting posts ava­ila­ble on the blog. Below you can see a bar that ena­bles you to navi­ga­te betwe­en the vario­us sec­tions of the appli­ca­tion (ener­gy savings cal­cu­la­tors, a search engine).

Sin­ce Flut­ter offers a rich set of gra­phic ele­ments, such as navi­ga­tion bars, view grids, lists and ima­ge views, we have ava­iled of ready-made com­po­nents, adap­ting them to the natu­re of the UI / UX project.

Sustac also offers the possi­bi­li­ty of sear­ching for artic­les using words ente­red into the text­field. The con­tent of artic­les sto­red in the Fire­ba­se server data­ba­se was inde­xed using the Algo­lia servi­ce, to which the appli­ca­tion sends queries using a libra­ry writ­ten in the Dart lan­gu­age. Sen­ding queries and rece­iving search results is a mat­ter of typing in just a few lines of code, and the asso­cia­ted list of wid­gets sho­wing the results is auto­ma­ti­cal­ly generated.

OMS (Order Mana­ge­ment System)

OMS is an appli­ca­tion desi­gned for engi­ne­ers wor­king on con­struc­tion sites. It ena­bles you to quic­kly brow­se a cata­lo­gue of con­struc­tion ele­ments and tools, and then pla­ce orders, just like we nor­mal­ly shop online.

The appli­ca­tion is desi­gned for Andro­id smart­pho­nes but the expe­rien­ce in pro­gram­ming using Flut­ter allo­wed for the work of the team that nati­ve­ly cre­ates softwa­re for iOS on a daily basis.

Like in the case of Sustac, the users take advan­ta­ge of the appli­ca­tion to search and navi­ga­te the cata­lo­gue of con­tents, that this time is the descrip­tion of items, which can be added to the basket, and then orde­red by sen­ding a list of selec­ted pro­ducts to the orders department.

The user inter­fa­ce is sli­gh­tly more expan­ded here, com­pa­red to the appli­ca­tion discus­sed abo­ve. The com­ple­xi­ty of the pro­duct variants ava­ila­ble in the cata­lo­gue requ­ired seve­ral ways of sho­wing data on the smart­pho­ne scre­en. Depen­ding on the ava­ila­ble options of the pro­duct, its descrip­tion is display­ed via a pho­to gal­le­ry, deta­iled text descrip­tion or a list of variants. The user makes the­ir selec­tion by using the pic­ker or but­tons visi­ble on the screen.

The data­ba­se this time is loca­ted on the AWS server, and its con­tent is down­lo­aded and sto­red by the mobi­le appli­ca­tion to faci­li­ta­te the user to brow­se the cata­lo­gue, also in the case when the­re is no Inter­net access on the con­struc­tion site.

On the tech­ni­cal side, a Dio — an HTTP client libra­ry for the Dart lan­gu­age was applied here, which down­lo­ads reso­ur­ces from the AWS server, and Hive — a no-sql data­ba­se, in order to save a local copy of the pro­duct cata­lo­gue, as well as the pur­cha­se histo­ry sent by the user to the orders department.

As you can see, the spe­ci­fic advan­ta­ges of Flut­ter allo­wed us to cre­ate appli­ca­tions in an effi­cient way. Not witho­ut signi­fi­can­ce was the Andro­id appli­ca­tion cre­ated by a team that spe­cia­li­ses in iOS on a daily basis — this is the strength of Flut­ter. What was cha­rac­te­ri­stic of both pro­jects was quick and effi­cient imple­men­ta­tion. We could ven­tu­re to say that it would not have been possi­ble with a more tra­di­tio­nal appro­ach to cre­ating mobi­le applications.