Build a functional weather app using Flutter & Provider


The intent of this article is to demonstrate the use of Provider in a non-trivial application — a weather app.

The app consists of a single screen, on which the user can enter the name of a city. The weather for the current day is displayed and a 3-day daily forecast. The app appearance also adapts for day-time and night-time weather conditions.

An introduction to Provider, one of a plethora of state management solutions for Flutter.

Who Should Read This

This post is intended for those new to state management in Flutter. The article assumes you are familiar with Stateless and Stateful widgets and can navigate between screens. If not, check out the links below.

What is State Management

State is the data your application needs to display or do something with. Data which may change.

For relatively simple scenarios, where the application consists of a single screen, we could use Flutter’s Stateful widgets and call setState()to rebuild the widget after we’ve modified some data or state. Remember, Flutter adopts a reactive model, rendering the user interface in response to state changes.

But consider…

For many, UI design is difficult and time-consuming. Hope is not lost, however. Thanks to Flutter’s Material library, developers can quickly create beautiful and distinct mobile apps.

Who Should Read This

This post is intended for those new to Flutter mobile app development and can create new projects and have a basic understanding of concepts such as Flutter’s Stateful and Stateless widgets.

What is Material Design

Material design is an approach to design that has successfully unified the best traits of user experience and good design.

Developed by Google in 2014, it promotes a uniform app experience across different platforms. Google’s own products like Keep, Meet and Maps, as well as popular apps like WhatsApp and DropBox, follow Material Design guidelines. This can result in apps with unified and distinct identities.

Another Go-Live Day. The phone rings. It’s the client. Production is down. My stomach feels sick.

We exchange a few niceties before he gets straight to the point of the call — the production line is down. I’m hanging on his every word as my mind races. He mentions the ERP system integration. Did I think of everything? I tested this!! What’s gone wrong? The call finishes and all I have to offer is a meek “Ok, I’ll look at the code”.

The crowded mobile app framework landscape recently welcomed a new member — Flutter.

Flutter promises cross-platform, natively compiled apps, with slick smooth UIs. Sounds promising. Developed by Google, the framework is gaining in popularity, especially amongst new startups.

Single Codebase…like Java?

Flutter’s major selling point is that it allows developers to create mobile apps for Android and iOS using a single codebase. It’s possible to build a Flutter app targeting Android and build the same project on a Mac for iOS devices without changing a single line of code.

Unlike most other mobile app frameworks Flutter does not use WebView nor OEM widgets. Instead, Flutter uses its own rendering engine to draw widgets.

Kenneth Carey

Windows Desktop Developer

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