A Design Pattern for Flutter

Weather App with “mvc_pattern”

I Like Screenshots. Click For Gists.

Other Stories by Greg Perry

The MVC Approach

Flutter + MVC at Last!

An MVC Example

Structure By Design

An MVC Directory Structure

The directories of a Flutter project

Export MVC

controller.dart and model.dart and view.dart

Everything In Its Place

Get On With It

Class WeatherCon

A Flutter Directory Structure

MVC within MVC

Again, Everything In Its Place

In The Beginning

Class WeatherApp

What’s All This?

Where’s Waldo…I mean Weather?

Class Weather in home.dart

“The Export Files” An Applied Example

Both ‘secondary’ widgets are applied to a ‘child’ property.

Oops. Broke It.

The ‘View Export File’ before updating the four lines.
The ‘View Export File’ after updating the four lines.

It Is All In The Name

Again And Again, Everything In Its Place

Class WeatherApp in WeatherApp.dart

In The Beginning?


The App Layer

package release to develop Flutter apps
Class App and Class AppMVC
Class WeatherApp

Import Control

Class WeatherApp

The App’s Controller

Class WeatherApp

The App’s View

Class WeatherApp

The View Under The Hood

Class AppView

Keep It Static If You Can

Class WeatherApp and Class WeatherApp

What’s In The Drawer?


It Is All In The Name


Location! Location! Location!

Who Calls Who

Class SettingsDrawer and Class LocationCon

Step Back To See The Bigger Picture

The Color Theme Changes

What’s The Theme

Class WeatherApp

All Starts Under The Hood!


Follow the breakpoints

Class _AppState and Class App
Class WeatherApp

Wait For The Future!

Class App
Class AppView and Class AppViewState
Class WeatherApp and Class AppController

Back To Our Theme!

Class WeatherApp
Class ThemeCon
Class AppView

How’s It Works…Really

Follow The Code

Class _WeatherState in home.dart
WeatherCon in home.dart

What’s Your Preference?

It’s All In The Init

Class WeatherCon

Saved For Later

The Prefs


DECODE Flutter on YouTube




Freelance Developer

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

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
Greg Perry

Greg Perry

Freelance Developer

More from Medium

Flutter local_value Package: Simplest Way to Store Local Data

Flutter Testing— Understand Unit, Widget, and Integration Testing

Flutter Unit Test Basics

What makes Flutter different from other languages and frameworks?