Using Firestore Storage and Caching Files inside of Dart's Flutter Framework

Repository

https://github.com/flutter/flutter

What Will I Learn?

• You will learn how to cache files in Flutter
• You will learn about the Asset Bundle
• You will learn how to upload files to Firebase Storage
• You will learn how to download files from Firebase Storage
• You will learn how to add and remove files from the Asset Bundle
• You will learn how to make Regular Expressions

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 little understanding of caching and storage
• A fair understanding of Mobile development and Imperative or Object Oriented Programming
• Some understanding of file explorers

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/
• Flutter Awesome GitHub Repository: https://github.com/Solido/awesome-flutter

Sources:

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

Difficulty

• Intermediate

Description

Outline and Overview

In this Flutter Tutorial Video, we build a very simple application that allows us to upload photos to Firebase Storage. The user is then able to download the files back to the application and then serve them through the Image.asset() widget. We make use of Regular Expressions and file caching through the asset bundle object. We also read and write data to these temporary files as byte streams.

Outline for this Tutorial

Firebase Storage in Flutter

Firebase and Cloud Firestore provide a way of storing user made data in a real-time cloud database. While we can store URIs and URLs into these databases, we have no ability to directly upload a more complex fileformat like a video or image file. This is what Firebase Storage is for. As a scaling, media database, Firebase Storage gives the developer the ability to store any type of data in an intuitive bucket storage system.

As you can see from the console, the basic storage module is very similar to Firebase and it can be used in a way that is also very similar to a typical Firebase or Cloud Firestore database. Each file is stored in a bucket which works like a document or key/value pair from the other two databases. You are then able to give your application's the ability to download and upload data from these buckets at will.

The Flutter Asset Bundle

Flutter allows the developer to interact with external files and web files through its asset bundle. The asset bundle changes as we move up and down the widget tree based on what pieces of data are exposed to that node on the tree. The root asset bundle is made out of two bundle types, a network asset bundle and a default asset bundle. As the name implies, the network asset bundle handles the network assets and the default asset bundle handles the local assets.

In the uploadFile function, we pull our pictures from the local storage folders through the root asset bundle and convert them into a stream of bytes. We are then able to create a duplicate file in the operating system's temporary folder. We are able to upload this file to the Firebase Storage bucket and we can also use this file to cache the original asset from the root bundle.

Filtering through URLs and File names with a Regular Expression

In this application, we make use of a regular expression inside of the downloadFile function.

This RegEx allows us to quickly filter through the download URL path to pick out the simple filename of our target file. Regular Expressions are very useful for filtering and searching through various types of strings and can be used in many different situations.

The Regular Expression that we use in this application is made up of two primary capturing groups. The first group starts with a ^ character which indicates that we want to negate this pattern. The pattern just looks for the literal characters ? and /. By negating these characters we can filter out any part of the string which contains these characters. At the end of this capture group, [^?/] is an asterisks which signifies that we want to match none of these proceeding tokens. Following this asterisks, we have an escaped period \.. This period specifies that we want a string that contains a period which bridges the first capture group and the second capture group. The final capture group looks for the three characters jpg in that order. In this way we are able to specifically grab the filename for our file from the download URL.

The source code for this project can be found here

Regexpr Website can be found here

Video Tutorial

Projects and Series

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)

Weather Application

• Building a Weather Application with Dart's Flutter Framework (Part 1, Handling Complex JSON with Built Code Generation)
• Building a Weather Application with Dart's Flutter Framework (Part 2, Creating a Repository and Model)
• Building a Weather Application with Dart's Flutter Framework (Part 3, RxCommand (RxDart) and Adding an Inherited Widget)
• Building a Weather Application with Dart's Flutter Framework (Part 4, Using RxWidget to Build a Reactive User Interface)
• Localize and Internationalize Applications with Intl and the Flutter SDK in Dart's Flutter Framework

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
• Playing Local, Network and YouTube Videos with the Video Player Plugin in Dart's Flutter Framework
• Building Custom Scroll Physics and Simulations with Dart's Flutter Framework
• Making Dynamic Layouts with Slivers in Dart's Flutter Framework
• Building a Sketch Application by using Custom Painters in Dart's Flutter Framework
• Using Dart Isolates, Dependency Injection and Future Builders in Dart's Flutter Framework
• Looking at the Main Features of the Beta Three Release of Dart's Flutter Framework
• Working with Material Theme and Custom Fonts in Dart's Flutter Framework
• Using Cloud Firestore as a Realtime Datastore for CRUD with Dart's Flutter Framework
• Authenticating Users with Google Sign In and Firebase\Firestore inside of Dart's Flutter Framework
• Using the Elm Architecture or the MVU pattern with Dartea inside of Dart's Flutter Framework
• Using the BloC Pattern to Build Reactive Applications with Streams in Dart's Flutter Framework
• Building Immutable Models with Built Value and Built Collection in Dart's Flutter Framework
• Building Pure Dart Libraries and Packages for Dart's Flutter Framework
• Using Plugins to Interface with Android or iOS with Dart's Flutter Framework

Proof of Work Done

https://github.com/tensor-programming