PassVault

Peter Chow | June 30 - July 17, 2020 | App Dev | Flutter | Dart

My setup. (Visual Studio Code left, IOS simulator right)

The Idea

I have been using the notes app on the iPhone, and retrieving my password is such a pain. Therefore, the very first app I decided to make is a password managing app. This app is a simple app that stores account information locally. The app itself will be password or touch/face ID protected. After watching a few youtube videos on the basics of Flutter programming, I set my mind on creating this app.

The Learning Process

Flutter is an SDK that is a package with a collection of tools that allows the user to create an app. At first, I thought it was a game making platform similar to Unity. There are other ways to make an app such as React Native, Swift, or Kotlin, but I prefer Flutter over Swift and Kotlin as Flutter is a cross-platform SDK that allows me to create both IOS and Android apps with the same code! React Native, on the other hand, is well known, but at the end of the day, it all boils down to a matter of preference.

Dart is an interesting programming language as it feels like a mix of Java, HTML, CSS, and Javascript. There are times when I feel like I'm creating a website. The concept of parent and child elements is also important here as it is the primary way of creating the UI elements.

Flutter greatly simplifies the method to create an app by using Widgets. There are many premade widgets in Flutter that allows for diverse customizations on the widgets. The possibilities are endless and it is simpler to create beautiful UI.

On the other hand, the Java aspect of Dart is worthy of talking about because it feels more like writing code with classes, objects, variables as opposed to the formatting of UI elements. Widgets will often be a subclass of StatelessWidget or StatefulWidget. These two main classes contain all of the useful methods that simplify the process. These methods include the Text( ), IconButton( ), Row( ), Column( ), Stack( ), Container( ), and many more.

Widget constructors in Dart use a very interesting kind of parameter: named optional parameters. In most cases, these parameters in a widget will determine some sort of customization. Examples of this would be adding a child object within, changing the styling of the widget, or performing some kind of function. A code snippet can be seen below:

The Challenges

A challenge that took me a while to grasp are the await, async, and Promise keywords. They are heavily used in Flutter when we have to query data from the database or the device's local storage. The correct method to properly get Promised values is similar to Javascript, but with a slight variation. The codes below demonstrate how to return a value stored in the device's local storage and then updating that onto the UI. The purpose of using the file called jsonStorage.txt containing a JSON string is to store each account entry object as a string. This means that with only a string literal, we can decode the JSON and turn it into objects. All of this just to retrieve data from storage...

The Extensions

Some extensions I use for Flutter are: