Flut­ter — you will take to it in no time. It’s all because of the high-speed devel­op­ment, its attract­ive inter­face and com­pon­ents whose UI will work on many plat­forms, instantly vis­ible effects, and a huge open-source com­munity around this pro­ject. That is why we decided to use Flut­ter in our two pro­jects — check out which fea­tures of Flut­ter have proved the most useful.

Flut­ter is an open-source frame­work inven­ted by Google, geared to cre­ate applic­a­tions designed for vari­ous oper­at­ing sys­tems. Ini­tially avail­able only for Android devices, it cur­rently allows you to build applic­a­tions for iOS, macOS and web browsers.

Flut­ter allows you to effi­ciently imple­ment attract­ive-look­ing, respons­ive user inter­faces. It enables the sim­ul­tan­eous use of UI com­pon­ents and design pat­terns from dif­fer­ent plat­forms — includ­ing Mater­i­al Design wid­gets derived from Google design lan­guage and the Cuper­tino set, ori­gin­at­ing from Apple oper­at­ing systems.

The basis for cre­at­ing the applic­a­tion is the Dart lan­guage, which is cur­rently being developed by Google, mainly hav­ing the dis­cussed frame­work in mind. Dart is an object-ori­ented lan­guage with the C pro­gram­ming lan­guage-derived syn­tax that also allows the use of func­tion­al pro­gram­ming. Addi­tion­ally, Dart has a well-designed API for asyn­chron­ous oper­a­tions and the abil­ity to instantly update the code of a run­ning applic­a­tion. For developers who know lan­guages, ​​such as C#, Kot­lin or Swift, it allows them to quickly become flu­ent in using it.

Since Flut­ter is an open-source frame­work, in the last few years, a large com­munity of pro­gram­mers has formed around it, cre­at­ing lib­rar­ies with a wide range of applic­a­tions — from highly- spe­cial­ised UI com­pon­ents, to data­bases, to lib­rar­ies ded­ic­ated to net­work communication.

It is also worth not­ing that build­ing richly detailed GUIs with Flut­ter is very smooth. Due to the “Hot reload” func­tion­al­ity, changes in the code gen­er­at­ing visu­al ele­ments are imme­di­ately vis­ible on the device screen. This pro­cess does not require the developer to restart the applic­a­tion and nav­ig­ate to the mod­i­fied sec­tions of the application.

Let’s look at how Flut­ter works in prac­tice, using the example of two pro­jects developed by our team.

Our task was to cre­ate two mobile applic­a­tions, the key pur­pose of which was to present the con­tent down­loaded from the serv­er, as well to pro­cess and send data entered by the user via the smart­phone touch screen. The use of this frame­work in both cases enabled developers to cre­ate soft­ware com­pat­ible with Android and iOS using a com­mon source code.

SUS­TAC

In the case of the Sus­tac applic­a­tion, which is a com­pen­di­um of know­ledge about good prac­tices that the user can apply in every­day life to min­im­ise the cli­mate change, Flut­ter has allowed us to cre­ate one code, com­pat­ible with  iOS and Android, which sig­ni­fic­antly shortened the work time and markedly reduced the costs of pro­ject implementation.

The applic­a­tion integ­ra­tion with the data­base cre­ated in the Google Fire­base ser­vice only required the con­fig­ur­a­tion of the avail­able depend­ency and writ­ing the code fetch­ing the data using the Fire­base API. Then the down­loaded data was sent to the wid­gets presen­ted on the user’s  smart­phone screen.

The main screen of the applic­a­tion fea­tures a grid of them­at­ic cat­egor­ies of texts access­ible to the user and a gal­lery of green cards rep­res­ent­ing posts avail­able on the blog. Below you can see a bar that enables you to nav­ig­ate between the vari­ous sec­tions of the applic­a­tion (energy sav­ings cal­cu­lat­ors, a search engine).

Since Flut­ter offers a rich set of graph­ic ele­ments, such as nav­ig­a­tion bars, view grids, lists and image views, we have availed of ready-made com­pon­ents, adapt­ing them to the nature of the UI / UX project.

Sus­tac also offers the pos­sib­il­ity of search­ing for art­icles using words entered into the text­field. The con­tent of art­icles stored in the Fire­base serv­er data­base was indexed using the Algo­lia ser­vice, to which the applic­a­tion sends quer­ies using a lib­rary writ­ten in the Dart lan­guage. Send­ing quer­ies and receiv­ing search res­ults is a mat­ter of typ­ing in just a few lines of code, and the asso­ci­ated list of wid­gets show­ing the res­ults is auto­mat­ic­ally generated.

OMS (Order Man­age­ment System)

OMS is an applic­a­tion designed for engin­eers work­ing on con­struc­tion sites. It enables you to quickly browse a cata­logue of con­struc­tion ele­ments and tools, and then place orders, just like we nor­mally shop online.

The applic­a­tion is designed for Android smart­phones but the exper­i­ence in pro­gram­ming using Flut­ter allowed for the work of the team that nat­ively cre­ates soft­ware for iOS on a daily basis.

Like in the case of Sus­tac, the users take advant­age of the applic­a­tion to search and nav­ig­ate the cata­logue of con­tents, that this time is the descrip­tion of items, which can be added to the bas­ket, and then ordered by send­ing a list of selec­ted products to the orders department.

The user inter­face is slightly more expan­ded here, com­pared to the applic­a­tion dis­cussed above. The com­plex­ity of the product vari­ants avail­able in the cata­logue required sev­er­al ways of show­ing data on the smart­phone screen. Depend­ing on the avail­able options of the product, its descrip­tion is dis­played via a photo gal­lery, detailed text descrip­tion or a list of vari­ants. The user makes their selec­tion by using the pick­er or but­tons vis­ible on the screen.

The data­base this time is loc­ated on the AWS serv­er, and its con­tent is down­loaded and stored by the mobile applic­a­tion to facil­it­ate the user to browse the cata­logue, also in the case when there is no Inter­net access on the con­struc­tion site.

On the tech­nic­al side, a Dio — an HTTP cli­ent lib­rary for the Dart lan­guage was applied here, which down­loads resources from the AWS serv­er, and Hive — a no-sql data­base, in order to save a loc­al copy of the product cata­logue, as well as the pur­chase his­tory sent by the user to the orders department.

As you can see, the spe­cif­ic advant­ages of Flut­ter allowed us to cre­ate applic­a­tions in an effi­cient way. Not without sig­ni­fic­ance was the Android applic­a­tion cre­ated by a team that spe­cial­ises in iOS on a daily basis — this is the strength of Flut­ter. What was char­ac­ter­ist­ic of both pro­jects was quick and effi­cient imple­ment­a­tion. We could ven­ture to say that it would not have been pos­sible with a more tra­di­tion­al approach to cre­at­ing mobile applications.