DEV Community: Colton Ehrman

Flutter: User Auth with Firebase

Colton Ehrman — Mon, 30 Mar 2020 01:51:41 +0000

In this guide, I am going to walk through setting up a basic login screen that will authenticate with Firebase.

To get started, set up a widget for the LoginScreen. This widget will be stateful and consist of fields to input an email and a password, and also a submit button.

lib/login_screen.dart

import 'package:flutter/material.dart';

class LoginScreen extends StatefulWidget {
  @override
  LoginScreenState createState() => LoginScreenState();
}

class LoginScreenState extends State<LoginScreen> {

  Widget emailField() {
    return TextField(...);
  }

  Widget passwordField() {
    return TextField(...);
  }

  Widget submitButton() {
    return TextField(...);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(20.0),
      child: Form(
        child: Column(
          children: <Widget>[
            emailField(),
            passwordField(),
            submitButton(),
          ],
        ), // Column
      ), // Form
    ); // Container
  }
}

Let's start working on the emailField and passwordField methods to get something to display out on the screen.

Widget emailField() {
  return TextFormField(
    decoration: InputDecoration(
      labelText: 'Email',
      hintText: 'john.doe@gmail.com',
    ),
    keyboardType: TextInputType.emailAddress,
  );
}

Widget passwordField() {
  return TextFormField(
    obscureText: true,
    decoration: InputDecoration(
      labelText: 'Password',
      hintText: '8-12 characters long',
    ),
  );
}

Our app should now look like this.

Next, we are going to create the submitButton widget, and give it some custom styling to make it look somewhat nice.

Widget submitButton() {
  final accentColor = HSLColor.fromColor(Theme.of(context).accentColor);
  // This will darken the Theme's accentColor by a factor of '0.5' percent
  final darkAccentColor = accentColor.withLightness((accentColor.lightness - 0.5).clamp(0.0, 1.0)).toColor();

  return RaisedButton(
    onPressed: () => {},
    textColor: darkAccentColor,
    padding: const EdgeInsets.all(0.0),
    child: Row(
      children: <Widget>[
        Expanded(
          child: Container(
            decoration: BoxDecoration(
              color: Theme.of(context).accentColor,
            ), // BoxDecoration
            padding: const EdgeInsets.all(10.0),
            child: Center(
              child: Text(
                'Submit',
                style: TextStyle(fontSize: 18)
              ), // Text
            ), // Center
          ), // Container
        ), // Expanded
      ],
    ), // Row
  ); // RaisedButton
}

Now the app should look like this.

To be continued...

Flutter: Building Photo App

Colton Ehrman — Sat, 28 Mar 2020 20:41:40 +0000

- Course by Stephen Grider

- Project Repo

The course goes into great detail over every piece of code that is written in the App. With this walkthrough, I intend to only highlight the building process, and will not go into much detail. That part is best left to the instructor of the course. I'd like to thank him for the amazing material he releases to his students!

Setting up Initial Project

Let's set up the initial code project after running flutter create [app_name]. We will clean up the default main.dart file and add some new folders, files to help keep things organized in the project.

To start off, we will need a Stateful App, that contains a simple Scaffold with the appBar, body, and floatingActionButton all set. We will also add some dummy state data.

New File Structure

lib/
  main.dart       # The main file with the 'main' function
  src/
   models/        # Will store our Dart Class data structures
   App.dart       # Our App starting point

lib/main.dart

import 'package:flutter/material.dart';
import './src/App.dart';

void main() => runApp(App());

lib/src/App.dart

import 'package:flutter/material.dart';

class App extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => AppState();
}

class AppState extends State<App> {
  int _imageCounter = 0;

  void _addImage() {
    setState(() {
      ++_imageCounter;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Let\'s See Images!'),
        ),
        body: Center(
          child: Text('Image - $_imageCounter'),
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: _addImage,
        ),
      ),
    );
  }
}

Complete code for this section on repo

As you can see we wrap our main Widget in a MaterialApp which then has a Scaffold to structure/layout the rest of the Widgets. We have an AppBar to display the App's title at the top. Some Text in the Center of the screen to show you the App's current state. Then a FloatingActionButton that will trigger a setState when pressed.

The next step will be to implement code that interacts with the image API we will be using - https://jsonplaceholder.typicode.com/photos.

We will be using the http package to make sending the requests to the API easier to work with. Don't forget to add the package to the projects pubspec.yaml file.

Before we implement the code to interact with the API, let's set up our data model to consume the API.

New File

lib/
  src/
   models/
    ImageModel.dart # New file

lib/src/models/ImageModel.dart

class ImageModel {
  int id;
  String title;
  String url;

  ImageModel({ this.id, this.title, this.url });

  ImageModel.fromJSON(Map<String, dynamic> encodedJSON) {
    id = encodedJSON['id'];
    title = encodedJSON['title'];
    url = encodedJSON['url'];  
  }
}

This model will be used to consume the API that we will be using. We set up two constructors, one that can be passed the data directly, and another that will accept JSON data.

Now we are ready to fetch the API for some JSON data.

To save on space and not clutter this article I will only be presenting updates to files that have already been created, instead of showing the whole file

Updated File

lib/
  src/
    App.dart # Updated file

Updates to lib/src/App.dart

// for decoding raw json data `json.decode()`
import 'dart:convert';                   // new import
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http; // new import
import './models/ImageModel.dart';       // new import

class AppState extends State<App> {
  // fetches the image JSON data from the API
  // will return the raw json decoded using `json.decode`
  dynamic _fetchImage() async {
    final imageAPI = 'https://jsonplaceholder.typicode.com/photos/$_imageCounter';
    final res = await http.get(imageAPI);
    return json.decode(res.body);
  }

  // handler for when `FloatingActionButton` is pressed
  void _addImage() async {
    final json = await _fetchImage();           // fetch the data from API
    final newImage = ImageModel.fromJSON(json); // consume API

    setState(() {
      ++_imageCounter;
    });
  }
}

Complete code for this section on repo

Now that we have consumed the photo API, we need to create a Widget to display the data we receive.

Let's create an ImageList Widget to hold all the data we fetch and display something on the App with it.

New File

lib/
  src/
   widgets/ # New folder
    ImageList.dart # New file

lib/src/widgets/ImageList.dart

import 'package:flutter/material.dart';
import '../models/ImageModel.dart';

class ImageList extends StatelessWidget {
  final List<ImageModel> _images;

  ImageList(this._images);

  Widget _renderImages() {
    if (_images.length == 0)
      return Text('No Images!');
    return ListView.builder(
      itemCount: _images.length,
      itemBuilder: (BuildContext context, int index) {
        return Text(_images[index].title);
      }
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: _renderImages(),
      ),
    );
  }
}

We are using the ListView.builder constructor to build a dynamic scrollable list for the images. We still do not have a proper Image UI in place. But, now you visually see the API being consumed by the application upon user interaction.

Next, we will update the App.dart file to use our new custom Widget.

Updated File

lib/
  src/
    App.dart # Updated File

Updates to lib/src/App.dart

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import './models/ImageModel.dart';
import './widgets/ImageList.dart'; // new import

class AppState extends State<App> {
  dynamic _fetchImage() async {
    // moved the imageCounter incrememting to here to prevent
    // consecutive calls overlapping before the Future resolves
    // and making app fetch the same image more than once
    final imageAPI = 'https://jsonplaceholder.typicode.com/photos/${_imageCounter++}';
    final res = await http.get(imageAPI);
    return json.decode(res.body);
  }

  void _addImage() async {
    final json = await _fetchImage();
    final newImage = ImageModel.fromJSON(json);
    // modified setState
    setState(() => _images.add(newImage));
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Let\'s See Images!'),
        ),
        body: Center(
          // updated child to be our custom Widget
          child: ImageList(_images),
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: _addImage,
        ),
      ),
    );
  }
}

We have updated our App to include the new custom Widget we built, and also fixed a small bug that caused the _fetchImage handler to be called consecutively and fetch the same image more than once. See if you can figure out what was causing the bug, and why the new code fixes it.

To be continued...

Follow my journey of learning flutter!

Learning Journey - Flutter

Colton Ehrman ・ Mar 27 ・ 7 min read

#learning #flutter #dart

Learning Journey - Flutter

Colton Ehrman — Fri, 27 Mar 2020 01:50:13 +0000

I've been wanting to start documenting what I am learning and write down more content lately. This seems like the perfect opportunity to do so!

My friend introduced me to Flutter after showing me an app that he put together in several months. After checking out how slick the app was, I was intrigued. I had already made a couple of apps using Swift, and React Native, but nothing that looked as good as this one. (of course maybe he's just better at making apps than I am)

Several weeks have passed, I had looked into a couple of articles about Flutter and skimmed through the official docs but hadn't really decided to take the dive to start learning it. After having begged me to start learning flutter and proposing to work on a project together with me involving flutter and machine learning, my friend's persistence finally paid off.

A couple of days ago, I went ahead and bought two courses on Udemy, one by Stephen Grider and another by Maximilian Schwarzmüller. My friend recommended that I get a course by Dr. Angela Yu, but my stubbornness chose to pick something else.

Summary Of The Courses I Got

by Stephen Grider
In my opinion, from past experience with his courses, Stephen is really good at explaining how something works. Instead of just teaching you how to do something, he teaches you why it works and goes deeper into the topic to give you a better understanding.

What I Learned So Far

Dart Sections

Background
- What is Dart & Flutter
- Dart Overview
- Online Dart Editor
First Program
Function Syntax
Variable Syntax
Initializing Variables
String Interpolation
- Weird Example
Classes
- Creating A Class
- Class Constructors
- Special Constructor
Objects
- Creating An Object

Flutter Sections

Widgets
- Common Widgets
- ListView

Dart

Background

What is Dart & Flutter?

Dart is an Object-Oriented language, with syntax similar to JavaScript, and can optionally be transpiled into JavaScript code. Dart by itself, is just a programming language. Flutter is the framework that is used by Dart in order to build applications that run on Android and iOS.
Dart + Flutter = Cross-Platform App

Dart Overview

Object-Oriented language
Statically typed language
C-Style syntax
Multiple Runtime Environments
- Mobile Devices - Compiled to Machine Code
- Browser - Transpiled to JavaScript
- Command Line - Dart VM

Online Dart Compiler/Playground

DartPad

First Dart Program

// Function declaration
String myName() {
  return 'Colton Ehrman';
}

// Main function where program starts execution
void main() {
  // variable initialization
  String name = myName();
  // print something out
  print('My name is $name');
}

Function Syntax

// Function Declaration / Definition
[return Type] [function name]([parameters]) { // [parameters] is optional
  [code] // [code] is any number expressions inside the curly braces
}

// Examples
String myName() {
  return 'Colton Ehrman';
}
// [return Type] is String
// [function name] is myName
// [parameters] is not provided - optional

void printName(String name) {
  print('My name is $name');
}
// [return Type] is void
// [function name] is printName
// [parameters] is a single variable
//   String name

Variable Syntax

When using var as the [Type] in Dart, the type is inferred. Although types are mandatory, type annotations are optional because of type inference. - Dart Type System

// Learn more on Dart Types
// https://dart.dev/guides/language/sound-dart

// Variable Declaration
[Type] [variable name];

// Examples
String name;
// [Type] is String
// [variable name] is name

var anotherName;
// [Type] is var
// [variable name] is anotherName

Initializing Variables

When initializing a variable, you must match the [Type] of the variable with the [Type] of the value you are assigning to the variable. In cases where you do not explicitly define the [Type] of the variable, Dart will use Type inference to determine the type. Once the [Type] of a variable is set, you cannot assign a value of a different [Type] to that variable

String name = 'Colton Ehrman';
// variable [name] of [Type] String is being assigned
// a value of 'Colton Ehrman' which is [Type] String

name = 'Colton J. Ehrman';
// variable [name] is being re-assigned
// a new value of 'Colton J. Ehrman' which is [Type] String

// Error!
name = 123;
// invalid assignment of [Type] int to
// variable [name] with [Type] String

String Interpolation

How Dart variables and/or expressions are interpolated - insert something of a different nature into something else - into Strings.

Strings in Dart are surrounded by either double quotes "[String]" or single quotes '[String]' (single quotes seem to be the most common convention).

To interpolate something into a String, you prefix it with a dollar sign $. If you are interpolating an expression, you will wrap the expression inside of curly braces which follow the dollar sign ${[expression]}.
You may always use the curly brace expression, but conventionally it is only used when required.

String firstName = 'Colton';
String lastName = 'Ehrman';
String fullName = '$firstName $lastName'; // interpolated value
// fullName will be the String 'Colton Ehrman'

int yearBorn = 1995;
int currentYear = 2020;
String ageText = 'I am ${currentYear - yearBorn} years old!';
// interpolating an expression inside of a String
// ageText will be 'I am 25 years old!'

Weird interpolation example's to watch out for

String firstName = 'Colton';

// trying to interpolate Object property into string
String weirdResult = 'My name is $firstName.length characters.';
// weirdResult will be 'My name is Colton.length characters.'

String properResult = 'My name is ${firstName.length} characters.';
// properResult == 'My name is 6 characters long.'

Without the curly braces in the interpolation, Dart will only interpolate up to a valid variable name, anything else that follows will be treated as a String.

Creating a Class

// class definition
class [class Name] {
  // body of class
  // the class can consist of these things
  // the order does not matter
  [constructors]
  [properties]
  [methods]
}

// Example
class Person {
  String firstName; // property
  String lastName;  // property

  // method
  String fullName() {
    return '$firstName $lastName';
  }
}

In the example, we are defining a class named Person, which consists of two properties, firstName and lastName, and a single method named fullName.

Creating an Object

With our previous Class Person, we will create some Objects.

// declare variable of [Type] Person
Person me;

// assign new instance of Person to variable
me = new Person();

// assign values to object properties
me.firstName = 'Colton';
me.lastName = 'Ehrman';

// calling object methods
String myFullName = me.fullName();

// Error!
me.eyeColor = 'brown';
// the Person class does not have a property of 'eyeColor'
// so this will cause an error in Dart

You can create new instances of a Class by calling it like a function with the new keyword in front of it (new [Class name]() | new Person()).
The new keyword is actually optional and you can create an instance of a Class without it.

To access properties and methods of an object you use dot-notation ([object].[property|method]).

Class Constructors

class Person {
  // constructor
  // must named the same name as Class name
  // can have any number of parameters
  Person(String firstName, String lastName) {
    this.firstName = firstName; // assigning property
    this.lastName = lastName;   // assigning property
  }

  String firstName;
  String lastName;
}

A Class's constructor must be named the same as the Class's name. If the constructor takes parameters that have the same name as properties of the class, you must differentiate them by using the this keyword in front of the properties of the Class.

this keyword is not required when using properties/methods of a Class, unless in a context where the reference would be ambiguous.

With a constructor now, when you instantiate Objects of a Class, the appropriate constructor will be called.

Person me;

// will call the constructor that we defined earlier
me = Person('Colton', 'Ehrman'); // the 'new' keyword is not required
// 'me' Object will be created with
// 'firstName' and 'lastName' properties already set

Special Constructor

In Dart, you can easily create common constructors, like the one we made earlier, using a special syntax.

Let's take the previous constructor and simplify it using the new syntax.

class Person {
  // special constructor
  // parameters must be prefixed with 'this.'
  // parameters must match class properties
  Person(this.firstName, this.lastName);

  String firstName;
  String lastName;
}

With this new syntax, Dart will automagically understand what you want and do it for you. It is the same as the previous constructor we made.

Just remember: each parameter must be prefixed with this. AND match a property that exists within the Class

Flutter

Widgets

Widgets are the building blocks of flutter. Practically everything you do will be in the form of a Widget. The flutter framework provides tons of built-in Widgets to get started with. You will use these along with building your own custom Widgets.

Common Widgets

As you start building with the Flutter framework, you will become accustomed to common Widgets that you will use.

Such as

These are just a few of the most common Widgets, there are many more that you will see as well.

ListView

ListView is a common Widget used when building a list of Widgets in your App, that the user can scroll through. Think, social media feeds, probably the most common ListView we are familiar with.

You typically will be creating a custom Widget that utilizes the ListView.

There are two common constructors that you can use when building a ListView. One is the build all at once constructor (ListView()) and the other building on-demand constructor (ListView.builder()).

You will want to decide which one best suits your needs. If you know the list is going to contain a lot of elements and potentially take a while to build all at once, you probably want to use the ListView.builder(). Otherwise, the main constructor should do the trick.

Just keep in mind what kind of list you are trying to build and how the ListView will affect the performance of your app.

To Be Continued...

Guidance: Plan for Life

Colton Ehrman — Thu, 26 Mar 2020 03:17:13 +0000

This will guide you towards setting up an eternal (lasting or existing forever; without end or beginning) plan for your life.

Tools:

Todist

Sections

What To-Do NOW?
Create A Blueprint
Create Weekly To-Do List
Create Today's To-Do List

What to do NOW?

I am adding this section based on the fact that I run into this problem a lot of times. Where I am working on something and asking myself, "Should I be working on this right now, or maybe something else?", or when I am questioning what I should do at this moment (usually after I finished doing something pretty productive).

It seems that this may be my biggest problem and most likely the reason that pushed me into writing this whole article and doing what I am doing today.

So, let me think this out for a minute. I have trouble coming up with what "direction" to go in. My mind is cluttered with all these ideas and possibilities of what to do next. My first step to solving this was to write it all down with the idea of getting it out of my head and onto something that I can plainly visualize and hopefully better sort/organize.

I feel that this is a great first step in the right direction. Now I need to focus on untangling this mess that I just threw up, and figure out what is worth keeping and what to throw away.

Being somewhat of a hoarder (along the lines of, "I don't know if I will need this later, so I will keep it for now") I will probably save the task of weeding through it for later. Let's just focus on finding the right direction for now.

I have everything (mostly) that I am currently thinking out of my head and down on something I can look at and visualize. Now, I am going to pick the first thing that excites me the most, the thing that I can see myself doing for a long period of time and not worrying about getting tired of and dropping all the sudden. Because another problem I have is sticking to a specific goal instead of juggling a bunch of things around and usually dropping them all one-by-one.

Now that I have finally picked one thing, I am going to focus on this singular idea for the most part of my days. Starting NOW, I will use this idea as the sort of blueprint to start up my day. How can I break down this idea into specific tasks and short-term goals? This is the question I will ask myself.

To better give some practical advice for this article, I will show you exactly what I am using to follow along with this "junk-of-information".

I picked the idea of learning flutter out of the other ideas I had spit out from my head, as my focus.

If you pick something that is making you think "I don't know if I will be able to stick with this for very long, or has you feeling at unease", then you probably didn't pick the right thing. Although I will say, the thing I picked I am feeling a little anxious about, but it is not a concern for me at this moment since I am doing this all as an experiment and learning process

Now, let me take this idea, and start devising specific tasks and goals that revolve around it for my everyday to-do lists.

First, I am going to put together a basic to-do list for my day tomorrow, then I will be able to insert my specific tasks into my day.

Here is my basic list, with typical tasks that I do every day. I put this together using the blueprint section.

This gives me something to start with and an idea of how my day will look so far. Now I can begin incorporating the other tasks into this list.

My over-arching focus is learning flutter, so I am going to come up with things to do that embrace this idea. To start, I want to reflect on my current status, such as what I have at my disposal.

Luckily, I recently purchased two courses that teach flutter. Also, I happen to be working on a couple of projects with some other people which involve me building a flutter app.

So, at this point it appears that I have the resources necessary to begin putting together specific tasks related to learning flutter. Let me go ahead and add some specific tasks into my list NOW.

Here are the two general tasks I came up with.

I decided to pick the Udemy course as my focus right now since it doesn't require other people's involvement and I can work on it at my own pace.

Also, I know where I am currently at in the course is building a flutter app, so I wanted to add a specific task for that as well. Even though these two tasks are so related, they help define my actions for the day, which is what I am trying to do.

This is just the start, I now need to break these tasks up into even more specific actions that I can take.

Here is what I came up with

Not going to lie, this part was difficult for me, and I am still not fully satisfied with it. Nonetheless, it is a starting point and will do for now.

I have broken up the general tasks into more specific actions. Tomorrow, I will be able to go through my task list with little to no thinking involved, just taking action.

Also, I have added some comments to each task, forcing myself to explain why I am doing this, and the reasoning involved (just in case I need a reminder).

I feel satisfied with my current progression at this point, and believe my process will only get better over time and practice. I foresee myself running into some issues tomorrow, with some specific tasks I have put in the list, but plan on tackling that when the time comes.

For now, I will focus on the end goal. Whenever I encounter a problem, I plan on documenting it and going over a possible solution.

To be continued...

Create A Blueprint

Put together a general to-do list blueprint with things that you need to do repeatedly

This one is pretty obvious, but here are some ideas and tips to help you - this blueprint can apply to daily to-dos, weekly, monthly, etc.

How a blueprint list may look

What is something you always end up needing to do? Wake up, shower, eat, sleep, pay bills, etc.
Try to add tasks that you want to start doing into your blueprint. This will force you to build better habits
Set times and reminders for tasks to get into a routine.
Play around with different times to see what works best for you. Maybe you study better around bedtime instead of the morning
No task is too small to add to the list. Pretend you are a computer and you are writing out a daily algorithm for your body to follow and make it through the day, every second counts

Create Weekly To-Do List

Let's create a weekly to-do list.

I would recommend setting up a blueprint that you can use.

Ask yourself - What is something I end up doing every week?
Are you working on something at the moment? Break up that project into specific daily tasks, which can then be more detailed the day of or before. The idea is to start breaking up the project at a high level
Have something you've been meaning to get done? Look through your current daily to-dos, and pick one that seems pretty open to add that task to
When making up a weekly to-do, it is also a good idea to start looking at upcoming events/plans and organizing them better for your schedule.

Create Today's To-Do List

Let's create today's to-do list, or preferably tomorrow's if you want to stay ahead of the game!

I would recommend setting up a daily to-do list blueprint that you can use.

Ask yourself - What do I need to get done this day?
Are you working on something at the moment? Start breaking up that project into small tasks, don't worry about overloading your day, just write it down so it can get done
What have you been thinking about lately? I really want to clean my room. I wish my truck was clean. Ughh, when will I finally make time to read that book
Is there anything you wish was better organized in your life? Clean up and organize your cluttered phone screen of apps. Go through your digital files and clean out / organize them
Are there any activities/habits you should remove from your life? Identify and replace those with literally anything that is better for you

Goals:

Stop asking yourself what to do every day
Have a concrete guideline of what to do now
Stop questioning what's next or looking ahead
Focus on the important things in life
Declutter your life
Attain (succeed in achieving something that one desires and has worked for) a clear mind