Building a Weather Application with Dart's Flutter Framework (Part 2, Creating a Repository and Model)

What Will I Learn?

Basic Ideas

• You will learn how to use the named constructors to interface with the generated code
• You will learn how to setup a repository for location data and requested data
• You will learn how to navigate multiple Dart objects to select the fields and items that you want to display

Requirements

System Requirements:

• IDEA intellij, Visual Studio Code with the Dart/Flutter Plugins, Android Studio or Xcode
• The Flutter SDK on the latest Master Build
• An Android or iOS Emulator or device for testing

OS Support for Flutter:

• Windows 7 SP1 or later (64-bit)
• macOS (64-bit)
• Linux (64-bit)

Required Knowledge

• A basic understanding of APIs
• A fair understanding of Mobile development and Imperative or Object Oriented Programming
• Basic knowledge of how to read JSON data

Resources for Flutter and this Project:

• Flutter Website: https://flutter.io/
• Flutter Official Documentation: https://flutter.io/docs/
• Flutter Installation Information: https://flutter.io/get-started/install/
• Flutter GitHub repository: https://github.com/flutter/flutter
• Flutter Dart 2 Preview Information: https://github.com/flutter/flutter/wiki/Trying-the-preview-of-Dart-2-in-Flutter
• Flutter Technical Overview: https://flutter.io/technical-overview/
• Dart Website: https://www.dartlang.org/
• Open Weather Map Website: https://openweathermap.org/
• Flutter Awesome GitHub Repository: https://github.com/Solido/awesome-flutter

Sources:

Flutter Logo (Google): https://flutter.io/

Difficulty

• Intermediate

Description

This video tutorial is a continuation of the Flutter Mobile Weather Application tutorial series detailed in this video article.

Outline and Overview:

General Overview

The goal of this Video Tutorial Series is showcase a Weather Application with a reactive interface that makes use of the Geolocation Plugin to ping the GPS of the user's device. Once we have the location data, we can then make a request to the Open Weather Map's API using our API key. The resulting JSON response is then serialized by the built generated Json serializer code which was created using the JSON Annotation and JSON Serialization plugins. We select specific fields in this JSON request and display them to the view. The application also will use a few ReactiveX libraries like RxCommands to reactively respond to the user's input and the various data events through the use of Observables and Streams.

Outline of this Tutorial

We build on the JSON serializer code that was made in the last tutorial. We create a data model for the fields that we want to display to application's view and a repository for fetching the GPS data and the JSON data.

Item 1: Data Model

The Data model features a set of parameters and items that we want to be able to selectively pull from the JSON request and serve to the user. We do this by orientating our data around the highest level object that is featured in our desired data fields. In this case, the top level object is the City object. We can then create a named constructor for our model which will allow us to fetch the data in relation to this City object.

In this image you can see the named constructor code for the data model. Notice how we pass in a City object and then use it as a baseline to reference the other objects that are connected to it.

Item 2: Http Repository

After deciding how we want our model to be structured, we can then implement logic which will allow us to actually make the requests to Open Weather Map's API. The resulting JSON request is then serialized into Dart objects and then pushed into our Data Model object. We are also able to modify the request based on various different constants. These modifications include the Location of the Device and how much data we can import through our JSON requests.

This image shows the main function that is used to make the HTTP request and populate our model with data; the updateWeather function. Notice that we use string interpolation to modify the request with a Location Result data type. There is also a fallback url which contains a static set of latitudes and longitudes should the program not have access to the location data. The return type for this function is a Future with a List of Weather Model inside of it. This will be very important for when we turn the emitted data into an Observable.

Item 2: Location Repository

With our Http Repository built, we now need to gain access to the GPS of the device. To accomplish this, we make use of the Geolocation plugin for Flutter. This plugin uses Channel Methods to talk to platform specific GPS APIs which allows us to use the resulting data in our Flutter code. We are able to make a small function using a method called lastKnownLocation to get the GPS location from the user's device. We can also build a small utility function to check to see if the user has given us permissions to access their GPS.

Above, we have the two location functions. The updateLocation function is a wrapper around the lastKnownLocation method. It lets us return a Location Result type wrapped in a Future which will be important when we implement the reactive elements and streams for this application. The getGps function is a utility function and it will be used as the basis for a Boolean Observable. If this observable returns a false value, then our updateLocation function can not be executed by the user or the application.

Project GitHub Repository:

The Source Code for this project can be found here

Video Tutorial

Projects and Series

Related Videos

• Building a Weather Application with Dart's Flutter Framework (Part 1, Handling Complex JSON with Built Code Generation)

Stand Alone Projects:

• Dart Flutter Cross Platform Chat Application Tutorial
• Building a Temperature Conversion Application using Dart's Flutter Framework
• Managing State with Flutter Flux and Building a Crypto Tracker Application with Dart's Flutter Framework

Building a Calculator

• Building a Calculator Layout using Dart's Flutter Framework
• Finishing our Calculator Application with Dart's Flutter Framework

Movie Searcher Application

• Building a Movie Searcher with RxDart and SQLite in Dart's Flutter Framework (Part 1)
• Building a Movie Searcher with RxDart and SQLite in Dart's Flutter Framework (Part 2)
• Building a Movie Searcher with RxDart and SQLite in Dart's Flutter Framework (Part 3, Final)

Minesweeper Game

• Building a Mine Sweeper Game using Dart's Flutter Framework (Part 1)
• Building a Mine Sweeper Game using Dart's Flutter Framework (Part 2)
• Building a Mine Sweeper Game using Dart's Flutter Framework (Part 3)
• Building a Mine Sweeper Game using Dart's Flutter Framework (Part 4, Final)

Curriculum

• Building a Multi-Page Application with Dart's Flutter Mobile Framework
• Making Http requests and Using Json in Dart's Flutter Framework
• Building Dynamic Lists with Streams in Dart's Flutter Framework
• Using GridView, Tabs, and Steppers in Dart's Flutter Framework
• Using Global Keys to get State and Validate Input in Dart's Flutter Framework
• The Basics of Animation with Dart's Flutter Framework
• Advanced Physics Based Animations in Dart's Flutter Framework
• Building a Drag and Drop Application with Dart's Flutter Framework
• Building a Hero Animation and an Application Drawer in Dart's Flutter Framework
• Using Inherited Widgets and Gesture Detectors in Dart's Flutter Framework
• Using Gradients, Fractional Offsets, Page Views and Other Widgets in Dart's Flutter Framework
• Making use of Shared Preferences, Flex Widgets and Dismissibles with Dart's Flutter framework
• Using the Different Style Widgets and Properties in Dart's Flutter Framework
• Composing Animations and Chaining Animations in Dart's Flutter Framework
• Building a Countdown Timer with a Custom Painter and Animations in Dart's Flutter Framework
• Reading and Writing Data and Files with Path Provider using Dart's Flutter Framework
• Exploring Webviews and the Url Launcher Plugin in Dart's Flutter Framework
• Adding a Real-time Database to a Flutter application with Firebase
• Building a List in Redux with Dart's Flutter Framework
• Managing State with the Scoped Model Pattern in Dart's Flutter Framework
• Authenticating Guest Users for Firebase using Dart's Flutter Framework
• How to Monetize Your Flutter Applications Using Admob
• Using Geolocator to Communicate with the GPS and Build a Map in Dart's Flutter Framework
• Managing the App Life Cycle and the Screen Orientation in Dart's Flutter Framework
• Making use of General Utility Libraries for Dart's Flutter Framework
• Interfacing with Websockets and Streams in Dart's Flutter Framework

---

Posted on Utopian.io - Rewarding Open Source Contributors

---