![flutter-logo.jpg](https://cdn.utopian.io/posts/2bbd07b20600e6cf03bd122e9cb9a68aef45flutter-logo.jpg)

#### What Will I Learn?

- You will learn about the RxWidget Plugin
- You will learn how to access RxCommands from the User interface
- You will learn how to use an RxLoader Widget
- You will learn about the WidgetSelector Widget
- You will learn about the PopupMenu Widgets

#### Requirements
##### System Requirements: 
- [IDEA intellij](https://www.jetbrains.com/idea/), [Visual Studio Code](https://code.visualstudio.com/) with the Dart/Flutter [Plugins](https://github.com/flutter/flutter-intellij), [Android Studio](https://developer.android.com/studio/index.html) or [Xcode](https://developer.apple.com/xcode/) 
- The [Flutter SDK](https://flutter.io/get-started/install/) 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
- Information from the first three parts of this series


#### Resources for Flutter and this Project:
- 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 the finale of the Flutter Mobile Weather Application tutorial series detailed in these video articles: [Part 1](https://utopian.io/u/44612250), [Part 2](https://utopian.io/u/44918839), [Part 3](https://utopian.io/u/43961141)

#### Outline and Overview
##### General Overview
The goal of this **Video Tutorial Series** is to showcase how you can build out a **Reactive application** using the **Dart's Flutter Framework**. The **Example application** used in this tutorial series is a **Weather Geolocation Application** that makes use of various **ReactiveX libraries and concepts**.  The application uses **RxWidget** and **RxCommands** which allows us to make a **reactive user interface and model**.  The logic fetches the GPS data from the mobile device and then that data is fed into a function which fetches data from **Open Weather Map's API**.  Both of these functions are wrapped in **RxCommand abstractions** so that they produce **Observables**.  The response from the API is serialized from JSON into Dart objects using the **JSON annotation and JSON serialization plugins**.  With these plugins, we are able to select the fields that we want to display onto the view of our application.

##### Outline of this Tutorial

In this video tutorial, we finish the **Weather Application** by importing the **RxWidget library** and using some of its special **reactive widgets** to build out a fluid user interface.  The application features a button and menu in the app bar.  It also uses a list view to present the weather data to the user and it has a button with a switch on the bottom bar.  The button on the top, allows us to check to see if the **GPS location services** are active on the device.  The button on the button allows us to fetch the **JSON data**.    The switch on the bottom of the application lets the user shut off data and stop the application from fetching data or **GPS coordinates**.  



##### Item 1: RxWidgets
**The Flutter SDK** has a fair amount of widgets which are able to directly interface with streams and stream based data.  These widgets are the basis for the **reactive widgets** that are in the **RxWidgets library**.  We are able to use these widgets in tandem with our defined **RxCommands** to create a specific rule-set that our **User Interface** must follow. In this way, we can have widgets change based on various events from the back-end of the application.  
![click-button.gif](https://cdn.utopian.io/posts/1e938c90118d84cc00344aba8ffa1db06fc0click-button.gif) 
![loading_data.gif](https://cdn.utopian.io/posts/29545bd251b7e3c63f1369af1427dce73edcloading_data.gif)


Here you can see two of the main reactive widgets in action.  On the left (top) is the **GPS button** which checks to GPS to see if it is turned on.  If it is not turned on then the button on the bottom will not activate.  On the right (bottom), we have the bottom button fetching data from the API.  When the user presses this button, they are then unable to press the button again until the data has been fetched. 



##### Item 2: Interfacing with RxCommand
**RxCommand** is an abstraction that sits atop of the functions that make up the **business logic** of our application. The outputs of these functions can be modified by other **Observables** and **directly accessed** through our **User Interface widgets**.  With the **inherited widget** that was implemented in the last video, we are able to easily pass these functions around to different areas of our application.      

![main-func.jpg](https://cdn.utopian.io/posts/c4c3bbf52ebe97b1291e8748c3323da34d1fmain-func.jpg)


This picture shows the main implementation of the **inherited widget** at the base of our widget tree.  We build out the repository which is used to instantiate the **Model Command object**.  This object is then passed into our inherited widget and any widget below it on the widget tree will have direct access to the commands.    

#### Item 3: RxLoader and Widget Selector

The two main widgets that we use to deal with the reactive logic are the **RxLoader** and the **Widget Selector** widgets.  The **RxLoader widget** is a widget that acts like **Stream Builer widget** but it has special features to help it **interface with Observables**.  The **RxLoader** will show a spinner when the stream attached to it is currently in the process of loading a piece of data.  Once the stream returns data, the **RxLoader** inflates the widget that is attached to its data builder property.  

The **Widget Selector** widget lets you choose between two widgets based on a boolean event.  In a way, its a bit like a more **generalized RxLoader widget**.  We use the **Widget Selector** to verify when a command is able to execute using the command's `canExecute` property.  

![widget-selector.jpg](https://cdn.utopian.io/posts/4170b59619a870a6e34e2fb277cb3d477bfdwidget-selector.jpg)


In this image, you can see the widget selector that was used in this tutorial.  The selector chooses which widget to inflate based on whether or not the `updateWeatherCommand.canExecute` observable comes back as true or false.  In this case, we have two buttons one which is active and another which is inactive.  

#### Project GitHub Repository:
The Source Code for this project can be found [here](https://github.com/tensor-programming/Weather_Tutorial) 






#### Video Tutorial
<iframe width="560" height="315" src="https://www.youtube.com/embed/3SeswxnfSVI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

#### Projects and Series
> #### Related Videos
> - [Building a Weather Application with Dart's Flutter Framework (Part 1, Handling Complex JSON with Built Code Generation)](https://utopian.io/u/44612250)
> - [Building a Weather Application with Dart's Flutter Framework (Part 2, Creating a Repository and Model)](https://utopian.io/u/44918839)
> - [Building a Weather Application with Dart's Flutter Framework (Part 3, RxCommand (RxDart) and Adding an Inherited Widget)](https://utopian.io/u/45106441)

> ##### Stand Alone Projects:
> - [Dart Flutter Cross Platform Chat Application Tutorial](https://steemit.com/@tensor/dart-flutter-cross-platform-chat-application-tutorial)
> - [Building a Temperature Conversion Application using Dart's Flutter Framework](https://utopian.io/u/38673252)
> - [Managing State with Flutter Flux and Building a Crypto Tracker Application with Dart's Flutter Framework](https://utopian.io/u/43961141)
> ##### Building a Calculator
> - [Building a Calculator Layout using Dart's Flutter Framework](https://utopian.io/u/39348292)
> - [Finishing our Calculator Application with Dart's Flutter Framework](https://utopian.io/u/39522895)
> ##### Movie Searcher Application
> - [Building a Movie Searcher with RxDart and SQLite in Dart's Flutter Framework (Part 1)](https://utopian.io/u/41053969)
> - [Building a Movie Searcher with RxDart and SQLite in Dart's Flutter Framework (Part 2)](https://utopian.io/u/41208913)
> - [Building a Movie Searcher with RxDart and SQLite in Dart's Flutter Framework (Part 3, Final)](https://utopian.io/u/41384278)
> #### Minesweeper Game
> - [Building a Mine Sweeper Game using Dart's Flutter Framework (Part 1)](https://utopian.io/u/42282888)
> - [Building a Mine Sweeper Game using Dart's Flutter Framework (Part 2)](https://utopian.io/u/42433127)
> - [Building a Mine Sweeper Game using Dart's Flutter Framework (Part 3)](https://utopian.io/u/42568713)
> - [Building a Mine Sweeper Game using Dart's Flutter Framework (Part 4, Final)](https://utopian.io/u/42697072)
#### Curriculum

- [Building a Multi-Page Application with Dart's Flutter Mobile Framework](https://utopian.io/u/36304896)    
- [Making Http requests and Using Json in Dart's Flutter Framework](https://utopian.io/u/36711012)
- [Building Dynamic Lists with Streams in Dart's Flutter Framework](https://utopian.io/u/36947451)
- [Using GridView, Tabs, and Steppers in Dart's Flutter Framework](https://utopian.io/u/37160274)
- [Using Global Keys to get State and Validate Input in Dart's Flutter Framework](https://utopian.io/u/37555657)
- [The Basics of Animation with Dart's Flutter Framework](https://utopian.io/u/37731908)
- [Advanced Physics Based Animations in Dart's Flutter Framework](https://utopian.io/u/38077640)
- [Building a Drag and Drop Application with Dart's Flutter Framework](https://utopian.io/u/38246831)
- [Building a Hero Animation and an Application Drawer in Dart's Flutter Framework](https://utopian.io/u/38433382)
- [Using Inherited Widgets and Gesture Detectors in Dart's Flutter Framework](https://utopian.io/u/38862139)
- [Using Gradients, Fractional Offsets, Page Views and Other Widgets in Dart's Flutter Framework](https://utopian.io/u/39001452)
- [Making use of Shared Preferences, Flex Widgets and Dismissibles with Dart's Flutter framework](https://utopian.io/u/39694109)
- [Using the Different Style Widgets and Properties in Dart's Flutter Framework](https://utopian.io/u/39890067)
- [Composing Animations and Chaining Animations in Dart's Flutter Framework](https://utopian.io/u/40065925)
- [Building a Countdown Timer with a Custom Painter and Animations in Dart's Flutter Framework](https://utopian.io/u/40384708)
- [Reading and Writing Data and Files with Path Provider using Dart's Flutter Framework](https://utopian.io/u/40536227)
- [Exploring Webviews and the Url Launcher Plugin in Dart's Flutter Framework](https://utopian.io/u/40707081)
- [Adding a Real-time Database to a Flutter application with Firebase](https://utopian.io/u/41791441)
- [Building a List in Redux with Dart's Flutter Framework](https://utopian.io/u/41963715)
- [Managing State with the Scoped Model Pattern in Dart's Flutter Framework](https://utopian.io/u/42126946)
- [Authenticating Guest Users for Firebase using Dart's Flutter Framework](https://utopian.io/u/43164921)
- [How to Monetize Your Flutter Applications Using Admob](https://utopian.io/u/43345353)
- [Using Geolocator to Communicate with the GPS and Build a Map in Dart's Flutter Framework](https://utopian.io/u/43502503)
- [Managing the App Life Cycle and the Screen Orientation in Dart's Flutter Framework](https://utopian.io/u/43654354)
- [Making use of General Utility Libraries for Dart's Flutter Framework](https://utopian.io/u/44131554)
- [Interfacing with Websockets and Streams in Dart's Flutter Framework](https://utopian.io/u/44306750)
    

<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@tensor/building-a-weather-application-with-dart-s-flutter-framework-part-4-using-rxwidget-to-build-a-reactive-user-interface">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>