Making a Places to Visit app using Python and Flutter: Part 3

Making the App.

Welcome to part 3 of the creation of the ‘Tembea Kenya’ application :)

First, we create a new flutter project by running

flutter create <Project Name>

For all my flutter projects, i typically arrange my folders in into folders inside the lib folder like show in the image below.

• Model contains model that describe the structure of the objects.
• Providers contains functions that define how data will be inherited and utilized in the application.
• Screens contains screens that the user will interact with
• Theme contains the colors, themes and fonts utilized in the project.
• Widgets contains reusable components in the project e.g. cards, buttons.

Next, we link the api to the flutter frontend by sending requests to the server and getting the http response using the http package .

For the logic of working with the fetched data, saving and retrieving data to/from cache, i was joined by a friend in a pair programming session where you essentially get an extra pair of eyes during your coding process. During the sessions we had i was able to:

• Get feedback on how to make my code more efficient and readable.
• Get insight on how i could improve on my workflow and coding skills by viewing how coding problems are tackled and solved.
• Use concepts from other programming languages in the project.

He wrote a nice blog about pair programming. If you are interested, you can check it out here.

Since we are getting a json response from the server we will need to decode it and then work with the http response and store the data needed into an object or a list of objects. The provider package then is used to pass data down the flutter widget tree where the object/list is utilized.

For storing the categories and bookmarked destinations in cache, we will need to utilize the shared preferences package that stores, retrieves and removes stores items to the cache, in our case we are storing list of objects to cache. This blog on saving objects to shared preferences was a life-saver. Check it out here.

Additionally, i utilized the flutter webview package to display the destination wikipedia page, the destination google maps page and a link to this blog in the app.

Since i had like 7 screens and the code for each is fairly long, i can’t include the snippets here but the code for the logic, the providers and the screens can be found here:

The app icon and the splash for the app were generated the flutter icons and flutter native splash packages respectively.

For some the packages mentioned so far, their docs recommend some changes to the android manifest, root level and app level build gradle.

At this juncture, the app is done :).

The next step is deploying the app where the process of deploying is well documented here for android and here for ios.

Some observations i made during this task:

• The webscrapped data had some errors in the wikipedia descriptions and destination links since the package used has some errors in generating them.
• It would be better to cache the images fetched instead of loading them again.

The link to the application is here: Tembea Kenya App

The repo is publicly on github here: Tembea Kenya.

Thank you!