Hello from the Outside: Flutter Weather App — Introduction

https://images.wallpaperscraft.com/image/road_asphalt_mountains_123090_3840x2160.jpg

A few words before the journey

In the series of posts, we will embark on the journey to discover Flutter and build a simple application. I am going to investigate how to solve typical problems of Mobile Development (perform a network request, show list of data, request user’s permission etc) using the Flutter framework.

I am an Android Developer with around 3 years of experience and I’ve never worked with the iOS platform. So, this is my first date with Flutter and the goal is to figure out how to create a small app together with you;-). As I am a beginner — feel any free to suggest improvements to the article or reach me in social networks.

What is Flutter?

Let’s check the definition from the official website:

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

The first release version of Flutter (1.0) was presented on 4th December 2018.

Before writing this article, I have checked what Medium already has about Flutter. And I found that most of the articles about Flutter have been written in 2018.

We can check how often people search for some information about Flutter on Google. We can do it using Google Trends tool. I put the range between 1 Jan 2018 (Flutter was released in December) and the current date (27th October 2020). As we can see, people were highly interested at the beginning of 2018 and at December, cause of the release. After this, the interest was rising until the middle of 2020, and then lowed a little bit.

Okay, searches in Google can be a measure of success of PR company, but what developers and business think about it?

I know a few companies which use Flutter for development in production. For example, it is the application for taxi drivers — Yandex Taximeter, and the Russian app news — Meduza.

According to this article, the number of apps in Google Play which are implemented on Flutter is about 90k. Comparing all number of apps in Google play — 2.8 million it is not so big number, but let’s see after a few years.

I heard about some examples when people use Flutter to develop something quickly and fancy looking for hackathons.

From a developer perspective, I should say that Flutter is not the first attempt to try cross-platform development. There were a few attempts before — Xamarin, React Native, Ionic, Kotlin Multiplatform Mobile. And we know a few very big projects which are implemented fully or partially using cross-platform development — for example, Instagram or Facebook (they use React Native framework).

Why Flutter?

Despite I haven’t any experience with this toolkit, I think it is a good attempt to look of well-know Material Design in the Android world and try to implement something totally new from a design perspective.

Because, first of all, Flutter is about UI. As a developer each time when I look at some amazing design in Dribbble, I think — it is very hard or almost impossible to implement it :)

https://dribbble.com/shots/11711922-Furniture-e-commerce-ios-mobile-app-screens

For example — how long do you think it will take your time to implement such layout? And here is a static picture, let’s add some time for implementation some fancy animations. The devil’s always in the details — and usually, we spend a huge amount of time to achieve the desired result.

Of course in the Android world, we can implement custom Views and try to create something very unique, but usually, developers and designers follow Material Design guidelines and reuse well-known for users Material Components. Using custom views is not so easy, cause we have to draw on Canvas manually — you should carry about performance and write a lot of code to specify instructions on how the view should look like (coordinates for lines, rectangle, circles etc).

And even not so difficult task as round ImageView (like profile picture) already requires some knowledge and have a few solutions on how to do it. Maybe someone of Android readers is aware of the library for this. It has more than 13k stars on Github, and quite popular as an easy solution for such a common task.

Idea

I looked at various ideas and settled on Weather app. In my opinion, it is a good example, cause we need to implement not so many screens (of course, we can extend it, but in general it would be enough to have 2 screens).

Also, one of the important thing that we already have a good API with all the necessary data, so we don’t need to implement our own back end.

I checked Dribbble and found the fancy design for weather app:

https://dribbble.com/shots/14310353-Mobile-application-Weather-App

As you can see, here we have a detailed screen for the current time and dedicated screen for the forecast in the future. I also think about the screen with the search of the city — the user may be interested in seeing the weather in another city, also we should somehow to choose the city when the user opens our app in the first time.

What’s next?

I am going to study Flutter and publish a few stories about the implementation of this app. Like I said above, it will be typical problems which we face every day as developers — how to make a request to the network, how to show the list of items for the user, what should be the architecture to be scalable and maintainable in the future?

Let’s install Flutter and start to deep dive in this tool. Feel free to join this journey and discover Flutter all together :)

Android Developer, dreamer, reader

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

My take on Environment Variables in Android project

Kotlin — ‘for’ loop in 2 min (Updated - Jun, 2020)

Android Data Binding-How to use it with <include> tag using live data and view model

Why use RxDart and how we can use with BLoC Pattern in Flutter?

Creating a log file in Flutter on External Storage

Jetpack Compose: Beginners Guide to Declarative UI in Android

The 7 Best Free Android Apps to Find Your Friends via GPS

Jetpack Compose: LottieSwipeRefreshIndicator

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sergey Pinkevich

Sergey Pinkevich

Android Developer, dreamer, reader

More from Medium

Flutter Web — IOS Crashing on animations

Introduction to UI Testing in Flutter | BrowserStack

Localizing Flutter Packages

final vs const dart || — Flutter