Flutter is an open-source framework by Google for building natively compiled, multi-platform applications. The SDK is written in Dart which prides itself as being a flexible, general-purpose programming language which supports both AOT and JIT compilation targets.

On the other hand, Riverpod is a state management library for Flutter that provides a simple, composable way of managing application state. It uses dependency injection to enable sharing state across the app and offers an intuitive API for managing state.

Get started

To get set up and prepped for the course:

1. Get the source code on GitHub. It contains the starting base that we build upon in the course

2. Create a Supabase account or spin up a Docker instance. This is a necessary first step to create our Supabase project

3. Install the Flutter SDK. This is what we’re building our app with.

Package Dependencies

There are several dependencies that are added to the project, though the important ones are:

supabase_flutter

This contains the client library for interacting with Supabase. Creating a Supabase account and project will expose a Project url as well as an API key. These will enable you to initialise Supabase by doing the following:

import 'package:supabase_flutter/supabase_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Supabase.initialize(
    url: 'SUPABASE_URL',
    anonKey: 'SUPABASE_ANON_KEY',
  );

  runApp(MyApp());
}

Initialising Supabase successfully gives you access to the SupabaseClient objects by doing the following:

final supabase = Supabase.instance.client;

flutter_riverpod

This allows using the riverpod state management solution in a Flutter project. We will be creating several Providers and Notifier instances via Code Generation, available via Riverpod 2+.

Here is a snippet of how creating a Provider that exposes a Repository client looks like:

// file: memory_repository.dart

import 'package:riverpod_annotation/riverpod_annotation.dart';
import 'package:supabase_flutter/supabase_flutter.dart';

part 'memory_repository.g.dart';

@riverpod
MemoryRepository memoryRepository(MemoryRepositoryRef _) => MemoryRepository();

class MemoryRepository {
  final _client = Supabase.instance.client;

  Future getMemories() async {
    return _client.from('memories').select('id, title, image_id')
      .order('created_at');
  }
}

You’ll then be able to generate the relevant AutoDisposeProvider<MemoryRepository> object by running the following:

$ flutter pub run build_runner build

When listening to authentication state changes, the StreamProvider<T> object is quite effective for sharing the Supabase authentication state:

// file: auth_user.dart

import 'package:riverpod_annotation/riverpod_annotation.dart';
import 'package:supabase_flutter/supabase_flutter.dart';

part 'auth_user.g.dart';

@riverpod
Stream<User?> authUser(AuthUserRef ref) async* {
  final authStream = Supabase.instance.client.auth.onAuthStateChange;

  await for (final authState in authStream) {
    yield authState.session?.user;
  }
}

Watch full minicourse

Get the source code

We begin by setting up a Flutter project from scratch and building the general look and feel of our messaging UI. We then create a Firebase project while setting up and configuring our Android and Web applications. We will set up Firebase Authentication with the google_sign_in package and Cloud Firestore for storing our chat messages. We will learn how to set up the correct security rules to ensure only authenticated users are allowed to write data to our collection.

Watch full course

and the finale…

Set up Flutter project

Before creating a Flutter project we need to enable Flutter Web support since we will also be running this app in the Web browser. Run the following commands to enable Flutter Web support:

$ flutter channel beta # checkout the beta channel
$ flutter upgrade
$ flutter config --enable-web

With Flutter Web enabled you can proceed to create your Flutter project:

$ flutter create my_messaging_app

After that process is complete open the directory in your editor of choice, whether Visual Studio Code or Android Studio as the recommended editors for Flutter development.

Ensure you have the relevant extensions installed for your editors. In the case of Visual Studio Code you need the Dart Code extensions. For Android Studio search for “Flutter” in the plugins repository under Configure > Plugins.

Run the Flutter project

Launch any of the device simulators using the steps in Visual Studio Code below. This assumes you have the listed simulators already set up using AVD Manager in Android Studio or any other means. Make sure that the simulator you select has Play Store support enabled.

You can run a Flutter project by typing the flutter run command in the Terminal and hitting Enter. Alternatively you can use the editor controls to run your Flutter app.

Build UI for Firebase Authentication

Open lib/main.dart and refactor the MyApp StatelessWidget like so:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "The Chat Crew", // <== Change this line
      debugShowCheckedModeBanner: false, // <== Add this line
      theme: ThemeData(
        primarySwatch: Colors.purple, // <== Change this line
      ),
      home: MyHomePage(title: "The Chat Crew"), // <== Change this line
    );
  }
}

Refactor the _MyHomePageState class by removing the _incrementCounter() method and _counter field.

class _MyHomePageState extends State<MyHomePage> {
  // int _counter = 0;

  // void _incrementCounter() {
  //  setState(() {
  //    _counter++;
  //  });
  // }

  @override
  Widget build(BuildContext context) { ... }
}

In the build() method remove the floatingActionButton: section of the Scaffold() widget and the two Text() widgets rendered in the Column() children. In fact you should have the code below once you’ve taken out the unnecessary bits:

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        centerTitle: true, // <== Added this line
      ),
      backgroundColor: Color(0xffdee2d6), // <== Added this line
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[],
      ),
    );
  }
}

The section below the app bar of the app consists of a message wall to display chat messages and the bottom area which will show either the sign in button or the message form.

The message wall will be rendered in an Expanded() widget since that takes up most of the screen real estate.

body: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Expanded(
      child: Container(),
    ),
  ],
),

To display the Sign in button, install the flutter_signin_button package:

$ pub global activate crawl # install the crawl cli
$ crawl add flutter_signin_button

Import flutter_signin_button and display after the Expanded() widget:

import 'package:flutter_signin_button/flutter_signin_button.dart';

..

body: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Expanded(
      child: Container(),
    ),
    Container(
      padding: const EdgeInsets.all(5),
      child: SignInButton(
        Buttons.Google,
        padding: const EdgeInsets.all(5),
        onPressed: () {},
      ),
    ),
  ],
),

Stop the whole app and start again in order to load the image assets required to display the Google logo on the sign in button.

Watch the full course for details on completing the sign in and sign out flows.

Watch full mini course

Get the source code

Getting started

You will need a MongoDB Cloud Account to create a Project and Cluster. This will give us an environment with MongoDB installed and a user to connect to that MongoDB instance.

The contents of the mini-course are as follows:

• 00:00 Intro

• 00:07 App Demo

• 02:08 Setup MongoDB Cloud Atlas Project and Cluster

• 03:18 Connect to MongoDB Cluster via Terminal

• 04:32 Examine codebase and dependencies

• 05:13 Connect to MongoDB from codebase

• 06:14 Create server and initial route

• 07:30 Add POST and DELETE endpoints

• 09:59 Implement initial contacts screen

• 11:44 Implements “No contacts” view

• 13:41 Implement contact addition functionality

• 14:59 Style ListTile widget

• 16:22 Refactor NoContacts widget

• 17:01 Create ContactListing widget

• 18:20 Using the Faker package

• 18:53 Adding contact deletion functionality

• 20:07 Implements ContactsApi class

• 23:26 Create Contact PODO

• 28:21 Implement contact creation method on api class

• 29:51 Running app on Flutter Web

• 37:04 Outro

Clone and check out the starter branch on the Github repo. This will provide the correct setup to follow along in the Fullstack Flutter and MongoDB Cloud mini-course.

The Dart packages included in this mini-course are:

1. sevr – a Dart library inspired by ExpressJS for writing HTTP servers. We use this to write a server that communicates with our MongoDB Cloud Cluster.

2. dio – a powerful HTTP client for Dart. We use this to make requests to our Dart backend server.

3. faker – a library that generates various fake data. We use this to generate the contact names of our Fullstack Flutter app.

4. mongo_dart – a library for communicating with MongoDB databases. This allows us to talk to MongoDb Cloud Atlas.

Implementing the server

In server/lib/server.dart initiate a connection to MongoDB Cloud Atlas:

import 'package:mongo_dart/mongo_dart.dart';
import 'package:sevr/sevr.dart';

void start() async {
  // Log into database
  final db = await Db.create(
      'mongodb+srv://<user>:<password>@cluster0.xpkap.mongodb.net/<dbname>?retryWrites=true&w=majority');
  await db.open(); // Initiate the connection
  final coll = db.collection('contacts'); // Define a handle to the contacts collection
}

The database connection string can be found by clicking the “CONNECT” button on your cluster and then selecting “Connect your application” as the connection method.

Opening a connection to our MongoDB Cloud Cluster means we can create a server that acts as a gateway to our database:

void start() async {
  // Log into database
  ..
  // Create server
  const port = 8081;
  final serv = Sevr();
}

Our HTTP server is contained within the sevr variable which allows us to go ahead and define our first route:

void start() async {
  // Log into database
  ..
  // Create server
  const port = 8081;
  final serv = Sevr();

  // Define routes
  serv.get('/', [
    (ServRequest req, ServResponse res) async {
      final contacts = await coll.find().toList();
      return res.status(200).json({'contacts': contacts});
    }
  ]);
}

Our first route describes a path and the data to be returned for any client that makes a request to it, in this case being a GET request to the root route of our server. We are returning the list of contacts in our MongoDb collection.

To activate our server and routes we need to listen to incoming connections:

void start() async {
  // Log into database
  ..
  // Create server
  ..
  // Define routes
  ..
  // Listen for connections
  serv.listen(port, callback: () {
    print('Server listening on port: $port');
  });
}

Running this in the terminal will give you the output below:

Watch full mini course

Get the source code

Google Cloud Platform is a suite of cloud computing services used by Google and external business for running various kinds of software. This platform contains relevant services allowing us to be effective in building full-stack applications.

In this mini course we will build an Image Upload Mobile App using a couple of Dart packages primarily gcloud and googleapis_auth. These packages provide a set of helper classes for connecting to Google Cloud Platform services.

We will be using the Flutter SDK to build our mobile app since it provides a great set of features and tools for building cross-platform mobile applications. It also makes sense to be using Flutter as it’s also written in Dart :)

Watch full Mini course

Get the source code

Getting started

We need to set up a Google Cloud Platform account. It’s free to set up and they’re currently offering $300 credit for 90 days. This will allow you enough time to use the Cloud Storage service for uploading images to.

The contents of the mini course below are as follows:

• 00:00 Intro

• 00:19 App demo

• 00:57 Create a Google Cloud Project

• 01:32 Create a Cloud Storage bucket

• 02:11 Setup dependencies

• 02:43 Implement image picker

• 06:31 Create your IAM Service Account

• 07:51 Implement CloudApi Service class

• 09:34 Load IAM credentials into CloudApi Service

• 11:01 Make request to Google Cloud Storage

• 12:10 Set correct content type for image

• 14:31 Set custom metadata on image

• 15:08 Implement loading and uploaded state

• 16:59 Set bucket access permissions

• 17:46 Outro

Once you’ve set up a Google Cloud Platform account, create a Flutter project by running the following command:

$ flutter create new_project

Add the following packages under the dependencies key of your pubspec.yaml file:

dependencies: 
  gcloud: ^0.7.3
  googleapis_auth: ^0.2.12
  image_picker: ^0.6.7+10
  mime: ^0.9.7

Then run pub get to update your packages. Once you are setup, see the course for the full demonstration.

Watch on YouTube

Get the source code

1. Lookup package details on pub.dev

2. Hit the Installing tab and copy the latest version

3. Open my pubspec.yaml file in the Dart project

4. Add the package and version to dependencies or dev_dependencies list

5. Save file.

6. Run pub get to update my packages

Having programmed in Nodejs I was aware of the npm tool which provided the init and install commands to automate the creation and maintenance of packages.

After searching around I came across the Pubspec Assist extension for VS Code that enabled me to search and install a package through the UI. It works in most cases but I wasn’t content that I had to be in the editor in order to use it! So instead of complaining I decided I’ll write my own.

Introducing Crawl

Crawl helps you manage Dart packages in your pubspec.yaml files. It borrows inspiration from the npm tool and will be familiar if you have used it.

The only pre-requisite is the Dart runtime and you can install Crawl by running pub global activate crawl. This will enable the crawl executable in your terminal.

To launch the usage screen simply run crawl in your terminal:

To create a new pubspec.yaml file enter crawl init in your terminal and follow the interactive prompt:

To add a new package run the following command:

$ crawl install -p <package-name> # eg: `crawl install -p shelf`
$ crawl install -p <package-name> -v <version> # eg: `crawl install -p shelf -v 0.7.9`

To remove a package run the following command:

$ crawl uninstall <package-name>

This package is still early days, but currently you are able to:

1. Create a pubspec.yaml file

2. Add to dependencies including specifying a particular version

3. Add to dev_dependencies including specifying a particular version

4. Run pub get automatically to update project dependencies

5. Uninstall package

6. List unused dependencies in project

7. Lookup package information on Pub repository

Try it out and let me know what you think ? Although the Dart team will be introducing a pub add and pub remove command in the next release, this tool provides other commands that will be useful in your projects.

Get the package

Flutter is a contender by Google designed to enable developers to build cross-platform applications. These applications will run on the web, mobile and desktop. It’s also written in Dart, which makes it easy to pick up in a couple of hours.

Flutter is mainly inspired by React with some noteworthy improvements. For example apps written for mobile are compiled ahead-of-time to machine code, so that means that the underlying language the app was written in does not enter production. This carries the benefit of not having to ship with the Dart VM, thus, drastically reducing app size and increasing performance.

Part 1

Part 2

Thanks for watching!

Part 1

We will bootstrap an Angel project, define our routes and configure our Angel server. We will build the html templates for our Articles screen.

Part 2

We will learn about services and model classes, utilising code generation tooling to generate classes that serialize our data for persistence layer. We will create a MongoService responsible for facilitating communication with our MongoDb database.

Part 3

We will learn how to preview articles saved to the database, as well as implement validation of our input with error handling to ensure that we aren’t submitting invalid data.

Part 4

We will add edit and delete features to our articles.

Part 5

We will look at search and navigation toggling.

Thanks for watching!

Get the source code

Watch video tutorial

Set up the project

Create a project folder and bootstrap a console-based project using Stagehand:

$ stagehand console-full

Open the pubspec.yaml file and add a dependency for the mime package:

dependencies:
  mime: ^0.9.6+3

Update your dependencies by running pub get in your terminal.

Below is the solution from the video tutorial:

// main.dart

import 'dart:io';

import 'package:mime/mime.dart';

main() async {
  var server = await HttpServer.bind('localhost', 8085);

  server.listen((request) async {
    if (request.uri.path != '/fileupload') {
      request.response
        ..headers.contentType = ContentType.html
        ..write('''
          <html>
          <head>
            <title>Image Upload Server</title>
          </head>
          <body>
            <form method="post" action="/fileupload" enctype="multipart/form-data">
              <input type="file" name="fileupload" /><br /><br />
              <button type="submit">Upload to server</button>
            </form>
          </body>
          </html>
        ''');
    } else {
      // accessing /fileupload endpoint
      List<int> dataBytes = [];

      await for (var data in request) {
        dataBytes.addAll(data);
      }

      String boundary = request.headers.contentType.parameters['boundary'];
      final transformer = MimeMultipartTransformer(boundary);
      final uploadDirectory = './upload';

      final bodyStream = Stream.fromIterable([dataBytes]);
      final parts = await transformer.bind(bodyStream).toList();

      for (var part in parts) {
        print(part.headers);
        final contentDisposition = part.headers['content-disposition'];
        final filename = RegExp(r'filename="([^"]*)"')
            .firstMatch(contentDisposition)
            .group(1);
        final content = await part.toList();

        if (!Directory(uploadDirectory).existsSync()) {
          await Directory(uploadDirectory).create();
        }

        await File('$uploadDirectory/$filename').writeAsBytes(content[0]);
      }
    }

    await request.response.close();
  });
}

Get the source code

In this part we will look at the login and logout journeys for our registered user. At the end of this article you will be comfortable understanding and writing basic user authentication systems.

Watch on YouTube

1. Create the login route

In bin/main.dart we have a couple of if statements checking the route and action of the request and responding accordingly to it.

Let’s add another condition within the request listener block for a GET to /login:

...
server.listen((HttpRequest request) async {
  // ...
  // ...

  // Check a `GET` on `/login`
  if (method == 'GET' && path == '/login') {
    response.write(renderHtml('''
      <h1>Login</h1>
      <form action="/login" method="post">
        <input type="text" name="username" placeholder="Enter your username" />
        <input type="password" name="password" placeholder="Enter your password" />
        <button>Go to the dashboard</button>
      </form>
    ''', 'Login to your Account'));
  }

  await response.close();

});

Running dart bin/main.dart and visiting http://localhost:8089/login should display the screen below:

Submitting the form will attempt to post the results to the backend which will result in am empty response. We need the logic to receive whatever we have entered into the form and use that to give the user access.

2. Listen for the posted credentials and attempt to log in the user

Here’s what we need to do:

1. Define a conditional statement to check for POST request to /login

2. Parse the POST request payload which is sent as application/x-www-form-urlencoded content type

3. Find the user in the database with the matching username. If the user exists we will receive an object with the username, hashed password and salt.

4. Take the salt from the retrieved user and pass that into our hashPassword function (this was created in Part 1) along with the password the user has provided for logging in

5. Attempt to match the generated hash in step 3 with the hashed password already stored in the database. If they match then log the user in. If not respond with an error message.

6. Create a randomised string value to represent the logged in user. This will be stored in a separate MongoDB collection to represent the logged in user.

7. Redirect the user to the /dashboard route

Here’s the logic covering the first two steps:

server.listen((HttpRequest request) {
  // ...
  // ...

  // 1. Check for `POST` on `/login`
  if (method == 'POST' && path == '/login') {
    // 2. Parse the payload
    var content = await request.transform(Utf8Decoder()).join();
    var params = Uri.splitQueryString(content);
    var user = params['username'];
    var password = params['password'];

    // TODO: 3. Find the user in the database with matching details

    // TODO: 4. Take salt and hash provided password

    // TODO: 5. Compare hash and login user. Or respond with error

    // TODO: 6. Create a string-based token to represent the logged in user

    // TODO: 7. Redirect the user to the /dashboard route

  }

  await response.close();
});

We are using the same logic to parse the payload like we did in Part 1 during the registration journey. Perhaps we should create a function that takes the request as input, run the parsing logic and return the credentials. I would challenge you to look at how you can do that. If you can’t inform me by posting a comment below.

Here’s the logic for step 3:

server.listen((HttpRequest request) {
  // ...
  // ...

  // 1. Check for `POST` on `/login`
  if (method == 'POST' && path == '/login') {
    // 2. Parse the payload
    var content = await request.transform(Utf8Decoder()).join();
    var params = Uri.splitQueryString(content);
    var user = params['username'];
    var password = params['password'];

    // 3. Find the user in the database with matching details
    var user = await store.findOne(where.eq('username', username));
    if (user == null) {
      response..statusCode = HttpStatus.notAuthorised
              ..write('Incorrect user and/or password');
    }
  }
  // ...
});

Watch video for complete steps on YouTube

This has been one of the least covered and understood topics due to the lack of documentation on it. We will conquer this tooling beast and grow your confidence in its usage.

Watch Part 1 on YouTube

Get the source code

How to get started

Code Generation is available through a package called build. This package exposes a set of interfaces for creating what are known as Builders. A Builder is where you define the business logic to instruct the build process on how to generate code.

Although we encapsulate our logic inside a Builder class, we need a way to run this builder, and that’s where build_runner comes in. It runs the build process based on configuration defined inside a build.yaml file. In order for it to understand this build.yaml configuration, the build_config package is used to parse the instructions defined therein. Therefore the build_runner package uses build_config behind the scenes.

To create the files for the project, use the stagehand tool to scaffold a console application:

$ mkdir code_generators && cd code_generators
$ stagehand console-full

Open the pubspec.yaml file and update dependencies and dev_dependencies:

...
dependencies:
  build: ^1.1.6
  path: ^1.6.0
  markdown: ^2.0.3

dev_dependencies:
  build_config: ^0.4.1+1
  build_runner: ^1.6.6
  pedantic: ^1.7.0
  test: ^1.5.0

Update all your dependencies by running pub get.

Configuring the build.yaml file

The build.yaml file contains configuration for targets, builders, and post process builders. The builders configuration allows you to register the builders you have implemented, as well as the top-level function to invoke in order to run the build process for the builder in question. You would also set the build_extensions key with the same value as was set in the buildExtensions member of your Builder class the configuration relates to. The targets config allows you to configure your builder to run on a subset of files in your project, as well as specify if they are enabled or not.

Here’s a typical example registering our CopyBuilder and configuring a target for it:

targets:
  $default:
    builders:
      code_generators|copyBuilder:
        generate_for:
         - lib/*
        enabled: True

builders:
  copyBuilder:
    import: 'package:code_generators/code_generators.dart'
    builder_factories: ['copyBuilder']
    build_extensions:
      .txt:
        - .copy.txt
    build_to: source
    auto_apply: dependents

Learn more about configuring the build.yaml file

Watch Part 2 on YouTube

Watch Part 3 on YouTube

Get the source code

Further reading

• Dart source_gen package

• Dart build packages repository

Full video tutorial

Basic example with Reflection

Create a main.dart file and start by importing our dart:mirrors dependency. Before we implement our reflection logic, let’s also define a class with a method we wish to invoke:

import 'dart:mirrors';

main() {
  // TODO: Implement Reflection logic
}

// Our example class to reflect on
class Endpoint {
  handle() => print('Request received');
}

To reflect on types and objects we have three methods to work with:

1. reflect(): Reflects on an instance of a class

2. reflectClass(): Reflects on a class declaration

3. reflectType() Reflects on the type passed in as the argument

In our use case we will use reflect(). Let’s instantiate Endpoint and invoke the handle method via reflection:

main() {
  var reflectedClass = reflect(Endpoint());

  // Invoke the handle() method
  reflectedClass.invoke(Symbol('handle'), []);
}

And then let’s run this file:

$ dart /path/to/main.dart

Reflecting an instance provides us with an InstanceMirror that exposes the invoke() method. The members of our instance are depicted as Symbol types. The example above invokes the handle method by passing its Symbolic name along with an array of positional arguments if any are specified.

To pass arguments across, let’s modify the signature of the handle() method:

handle(String a) => print('Request received $a');

And pass this to the invocation:

reflectedClass.invoke(Symbol('handle'), ['argument 1']);
// => Request received argument 1

You can also use the literal form of the handle() symbol:

reflectedClass.invoke(#handle, ['argument 1']);

You can use the Symbol('methodName') approach if the method name is received as a value from an operation or provided as user input. Ideally when you don’t know beforehand the method to invoke.

Watch full video tutorial

Get the source code

Further reading

• dart:mirrors library documentation

• Dart and MongoDB Tutorial #1: Using the mongo_dart package

Here’s what we will be building:

Prefer a video?

Watch on YouTube

Pre-requisites

You need Dart and MongoDB installed. Follow the links or check this post out to learn how to set up a MongoDB database. Create a new database called prod with a users collection.

Afterwards let’s set up a project using Stagehand by following the steps below:

1. Install Stagehand by running pub global activate stagehand

2. Create your working directory and cd into it: mkdir user_auth && cd user_auth

3. Run the stagehand command to generate the required files and folders: stagehand console-full

Before you update your dependencies, add these packages to the project pubspec.yaml file by replacing the dependencies section:

dependencies:
  crypto: ^2.0.6
  mongo_dart: ^0.3.5
  uuid: ^2.0.1

And then run pub get.

1. Create the server and establish database connection

In bin/main.dart import the dependencies we’ve just installed as well as the inbuilt dart:io library.

import 'dart:io';

import 'package:mongo_dart/mongo_dart.dart';

main() async {  // Mark with `async`
  // TODO: Connect to our Mongo database
  // TODO: Create our server connection
}

Let’s write the logic within the main() block to initiate a Mongo connection and define a handle for our “users” collection:

main() async {
  // Connect to our Mongo database
  Db db = Db('mongodb://localhost:27017/prod');
  await db.open();
  DbCollection users = db.collection('users');
  print('Connected to database!');

  // TODO: Create our server connection
}

Run this file using this command: dart bin/main.dart. If all goes well you should now see the image below:

And let’s write our server for handling requests and authenticating our user:

main() async {
  // Connect to our Mongo database
  ...
  ...

  // Create our server connection
  const port = 8089;
  var server = await HttpServer.bind('localhost', port);

  server.listen((HttpRequest request) {
    // TODO: Handle request
  });
}

Should you run that file and curl http://localhost:8089 you will get no response. Let’s change that in the next section.

2. Return our first response and build the other routes

Let’s update the request listener function, returning our first response to the client:

server.listen((HttpRequest request) {
  request.response
    ..headers.contentType = ContentType.html
    ..write('''
    <html>
      <head>
        <title>User Registration and Login Example</title>
      </head>
      <body>
        <h1>Welcome</h1>
        <p>
          <a href="/login">Login</a> or <a href="/register">Register</a>
        </p>
      </body>
    </html>
    ''')
    ..close();
});

Accessing http://localhost:8089 in your browser should show this:

Since we are going to be creating several routes that will serve HTML responses, let us create a helper function that will render the main tags with some interpolated variables. This will save us some extra lines of code.

Outside the main function let’s define a top-level function called renderHtml():

void main() {
  ...
}

// Render the common html with interpolated strings
renderHtml(String content, [String title = ':)']) => '''
  <html>
  <head>
    <title>$title</title>
  </head>
  <body>
    $content
  </body>
  </html>
''';

This will return our main HTML page tags, replacing $content and $title(if defined) variables with the provided values. Now let’s refactor our string passed to response.write() with this function:

request.response
  ..headers.contentType = ContentType.html
  ..write(renderHtml(
    '''
    <h1>Welcome</h1>
      <p>
        <a href="/login">Login</a> or <a href="/register">Register</a>
      </p>
    ''',
    'User Registration and Login Example',
  ))
  ..close();

Save and restart the server. Confirm you are still able to access http://localhost:8089.

To complete the registration journey, we will create a /register route to handle the user registration flow.

Amend our first response to show only if a GET request is made to the root / of our app:

server.listen((HttpRequest request) async { // Using `async/await`
  var path = request.uri.path;
  var res = request.response;

  res.headers.contentType = ContentType.html;
  res.headers.set('Cache-Control', 'no-cache');

  if (request.method == 'GET' && path == '/') {
    res.write(renderHtml(
      '''
      <h1>Welcome</h1>
        <p>
          <a href="/login">Login</a> or <a href="/register">Register</a>
        </p>
      ''',
      'User Registration and Login Example',
    ))
  }

  // TODO: Handle request to other routes

  // After all is done, just end the response
  await response.close();
});

Let’s now look at the request to the /register route. Replace the // TODO: block with this condition:

if (request.method == 'GET' && path = '/register') {
  res.write(renderHtml(
    '''
    <h1>Register</h1>
    <form action="/register" method="post">
      <input type="text" name="username" placeholder="Enter a username" />
      <input type="password" name="password" placeholder="Enter a password" />
      <button>Send</button>
    </form>
    ''', 'Create an account'
  ));
}

Restarting the server will render the screen below when we access http://localhost:8089/register:

3. Handle the submitted payload details and create user

Lastly, we need to handle the form results when it gets submitted to our server. Add another if block to check for POST requests to /register:

if (method == 'POST' && path == '/register') {
  // TODO: Retrieve registration details from payload

  // TODO: Generate a random 'salt'

  // TODO: Hash the password combining the generated salt

  // TODO: Store the username, salt and hashed password in the database
}

During submission of the registration details, the input attribute names and values are sent as a query string to our backend. This means that the encryption type is set to the default application/x-www-form-urlencoded.

We can retrieve the values from our payload using a StreamTransformer<T> to extract the streamed data in our payload. It’s simpler than it sounds.

Firstly we need to import dart:convert library as it contains the Utf8Decoder class for decoding our request payload as a utf-8 string:

import 'dart:io';
import 'dart:convert';

...

And continue by retrieving the registration details from the request payload:

if (method == 'POST' && path == '/register') {
  // Retrieve registration details from payload
  var content = await request.cast<List<int>>().transform(Utf8Decoder()).join();
  var params = Uri.splitQueryString(content);
  var user = params['username'];
  var password = params['password'];

  print(params);
}

params is a Map<K, V> object containing our details as such:

{
  "username" : "<the user you entered>", 
  "password": "<the password you entered>"
}

Restart and server, use the registration form and see your terminal output.

So passwords are never stored as is in the database due to security reasons. If you already know this then skip this paragraph. It is conventional to create a randomised string called a salt which will be combined with a hashing function to produce an output to be stored in the database. The hashed output and the salt will then be stored in the database. Upon logging in the password you provided will be used in combination with the salt we generated earlier to validate the hashed password.

Let’s implement the logic to generate a random salt. Import the dart:math library:

import 'dart:io';
import 'dart:convert';
import 'dart:math';

...

And then in the next // TODO: block:

// Generate a random 'salt'
var rand = Random.secure();
var saltBytes = List<int>.generate(32, (_) => _rand.nextInt(256));
var salt = base64.encode(saltBytes);

This generates an a list of 32 integers between 0 and 256. Afterwards we convert the list to a base64 string.

Let’s create a hashing function to consume this salt. Import the crypto package:

import 'dart:io';
import 'dart:convert';
import 'dart:math';

import 'package:mongo_dart/mongo_dart.dart';
import 'package:crypto/crypto.dart';

...

And define our hashing function outside the main() top-level function:

...

main() {
 ...
}

// Create a hash from the given password
hashPassword(String password, String salt) {
  var codec = Utf8Codec();
  var key = codec.encode(password);
  var saltBytes = codec.encode(salt);
  var hmacSha256 = Hmac(sha256, key);
  var digest = hmacSha256.convert(saltBytes);
  return digest.toString();
}

Let’s continue with our if block:

// Hash the password combining the generated salt
var hashedPassword = hashPassword(password, salt);

At this point we should have a username, salt and hashed password. We can now store this in the database using the users reference we created earlier:

// Store the username, salt and hashed password in the database
await users.save({
  'username': user,
  'hashedPasswd': hashedPassword,
  'salt': salt,
});

And then write to the response:

response.write('Created new user');

And here we go:

Take a look in your mongo database to see the new user:

$ mongo
...
...
> use prod
switched to db prod
> db.users.find()
{ "_id" : ObjectId("5cf05167a7c6c9fe65683e90"), "username" : "Marianne", "hashedPasswd" : "f7fdabbc886d7e7413e1756d52cbf473f49597e924c446cbdd12fb18b7965ae8", "salt" : "Zyjut6xtbVoDurIA6RWHoCpdtmEkyE7nSJ72CsbQl34=" }

This concludes our tutorial. In the next part we will implement login and persist the session.

Further reading

• Dart and MongoDB Tutorial #1: Using the mongo_dart package

• Quick Tip: Write a HTTP server in Dart

Classes are usually the common way of encapsulating related logic in your software. They are useful for modularising the logic you write and Dart amkes this a breeze. I hope to demonstrate this a lot more in future articles.

At the end of this video you will be comfortable writing classes to handle HTTP requests and return the appropriate responses. This is a common pattern used by frameworks like Aqueduct and Angel.

Get the source code

In this video we will learn how to write a RESTful api to talk to our MongoDB database with inbuilt Dart classes and the mongo_dart package. MongoDB is a well-known NoSQL database that stores its items as JSON documents (BSON to be exact).

At the end of this video, you will be comfortable writing a RESTful api to interface with a MongoDB database.

Get the source code

Prerequisites

Download and Install MongoDB to use the database. Alternatively use the official docker image.

Checkout the starter branch to follow along. You will learn much better this way. I know it’s convenient just watching, but doing so will be much more fulfilling.

In the root directory of the project update your dependencies:

$ pub get

Setup your database

Run Mongo server running using the startup commands on the documentation page for your Operating System.

Log in to MongoDB by entering mongo in the terminal. Create a database and collection:

> use test;
switched to db test
> db.createCollection('people');
{ "ok" : 1 }
> exit
bye

Upload the people.json file into the people collection we just created. This file is in the root project.

$ mongoimport --jsonArray -d test -c people --file people.json
... connected to: localhost
... imported 100 documents

To confirm all is good, log in to Mongo and check the collection:

$ mongo
...
> use test
switched to db test
> show collections
people
> db.people.find();
[{ "id": 1, "first_name": "Nolly", "last_name": "Montfort", "email": "nmontfort0@archive.org", "gender": "Male", "ip_address": "6.125.126.90" },
...
...
]

Good job! Let’s continue with the video.

Watch on YouTube

1. dio

Dio is a powerful library for making HTTP requests. It wraps Dart’s HttpClient class while extending it with support for features such as Interceptors, File Download, Request Cancellation, Timeout and several more. It can be configured globally and its super simple to use:

import 'package:dio/dio.dart';

void main() async {
  try {
    Response res = await Dio().get('https://news.ycombinator.com');
    print(res);
  } catch(e) {
    print(e);
  }
}

2. BulmaCSS

Bulma is a free, open source CSS framework based on Flexbox and used by more than 150,000 developers, including myself. It provides helper classes for styling various UI elements while adopting a mobile-first responsive design approach. In fact I’ve worked with Bulma in this tutorial series.

3. RxDart

RxDart is a reactive functional programming library based on the ReactiveX JS counterpart. It’s one of the go-to solutions for state management in Flutter mobile apps, although it also works on server and web. RxDart builds on top of Dart’s pretty decent Streams API with extra functionality.

4. Water.css

Water.css is a just-add-css collection of styles to make simple websites just a little nicer. It can easily be activated by sticking the CSS file in your <head> section:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.css">

5. html

html is a pure Dart HTML5 parser. It’s a port of html5lib from Python. It’s got a straight-forward API and a useful application when writing web scrapers.

6. animate.css

Animate.css provides just-add-water CSS animations, simples! It’s got effects for bounce, pulse, shake and several more.

7. markdown

markdown is a portable Markdown library written in Dart. It can parse Markdown into HTML on both web and server. Points for whoever can combine this with the html library. Try it out at https://dartlang.github.io/markdown.

8. DynCSS

DynCSS parses your css for -dyn-(attribute) rules and then evaluates then via JS on browser events like scroll and resize. The result is applied to the CSS attribute you have specific in the (attribute) sufix. For the most part you only need to set CSS property/value pairs, but there also a JS API for custom functions, which can be accessed from Dart ??. Here’s of demo of this at work.

9. pdf

pdf creates PDF files for web and Flutter projects. It can create full multi-page documents with graphics, images and text using TrueType fonts. The library provides a low-level PDF creation utility that takes care of the bits generation and a Widget system similar to Flutter’s, for easy high-level PDF creation.

Example code:

final pdf = Document()
  ..addPage(Page(
      pageFormat: PdfPageFormat.a4,
      build: (Context context) {
        return Center(
          child: Text("Hello World"),
        ); // Center
      })); // Page

10. Hover.css

Hover.css provides a collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. It can be applied to your own elements and modified too. Available in CSS, SASS and LESS.

And that concludes the list. Thanks for reading.

Subscribe to my YouTube channel for videos on Dart.

A question was posed by Matthew Harris on the AngularDart group of Gitter.im, regarding how to load a WebAssembly file in Dart. It went as follows:

Hey! Does anyone know how to or can link to a blog on: how to include a wasm file in dart (for web). Right now, i’m messing with JS() interop, but since wasm needs to be loaded and built first, i wondered if that’s been ported over to dart yet?

Matthew Harris – April 27 at 22:18

Since there is no official Dart documentation on the WebAssembly API, the only other option is to use the js interop package to interface with it. To demonstrate this, I will base the solution on the introductory tutorial on the MDN website. So let’s begin!

Get the source code

1. Setup a Dart web project

Use the stagehand tool for this:

$ pub global activate stagehand # Install if you haven't
$ mkdir wa-dart && cd wa-dart # Create your working directory
$ stagehand web-simple # Then run `pub get` to update dependencies

Install the js package by updating the dependencies section of your pubspec.yaml file:

dependencies:
  js: ^0.6.1+1

Run pub get to install.

2. Prepare the .wasm file

Go to the web folder of the generated project and create a simple.wasm file, holding the contents below:

;; web/simple.wasm

(module
  (type $t0 (func (param i32)))
  (type $t1 (func))
  (import "imports" "imported_func" (func $imports.imported_func (type $t0)))
  (func $exported_func (type $t1)
    i32.const 42
    call $imports.imported_func)
  (export "exported_func" (func $exported_func)))

This snippet here defines a method named exported_func(). This method expects to receive a method we will pass to it named imported_func(). It’s not compulsory to understand this file’s output entirely since you won’t be creating these from scratch anyway. You would write these in a language like C++ or Rust and compile that to the snippet you see above.

3. Load the WebAssembly file using the Future API

In the “Loading our wasm file without streaming” example on MDN, the fetch() method was used to load the .wasm file as an ArrayBuffer and passed as the input to the WebAssembly.initiate() method.

In web/main.dart let’s perform a HTTP request to retrieve our .wasm file as an ArrayBuffer:

import 'dart:html';

void main() async {
  var request = await HttpRequest.request(
    './simple.wasm',
    responseType: 'arraybuffer',
    mimeType: 'application/wasm',
  );

  // TODO: Initiate WA with response
}

The responseType and mimeType named arguments are set to the appropriate values to get the expected ArrayBufferresponse.

4. Initiate the WebAssembly instructions

Let’s create an interop file to interface with the WebAssembly API. Create a web/wa_interop.dart file with these contents:

@JS('WebAssembly')
library wa_interop;

import 'package:js/js.dart'; // contains the `@JS()` annotation
import 'package:js/js_util.dart'; // contains needed util methods

The first line sets the context for the JS interop by setting the 'WebAssembly' argument for the @JS() annotation. A library name is required for every interop file created. Look at the further reading materials below for a much detailed article on JS interop. For now let’s resume.

Add the interop logic for the initiate() method:

@JS()
external instantiate(dynamic bytes, dynamic importObj);

The first parameter of our initiate() method is the list of bytes from the .wasm file while the second is an object containing configuration information that is passed into the loaded .wasm file. The example on MDN looks like this:

{
  imports: {
    imported_func: (args) => window.console.log(args),
  }
}

The snippet contains the imported_func method expected by the WebAssembly file.

Return to web/main.dart replace the // TODO: Initiate WA with response line with the call to initiate():

var wa = await instantiate(
  request.response,
  {
    'imports': {
      'imported_func': (args) => window.console.log(args),
    }
  }
);

window.console.log(results);

The second argument contains the configuration object we passed through. In this case we have passed in a Map<String, dynamic> type. This however won’t run the way we expect it to, but we’ll fix that soon.

Open the terminal and run our local server:

$ webdev serve --hot-reload

Visiting http://localhost:8080 in the browser will throw this error in the console:

This is simply because Dart Map<String, dynamic> types are opaque in JavaScript. They don’t translate to native JS objects!

To resolve this we’ll use some utility methods to build a native JS object from our Map. These are newObject() which creates a native JavaScript object, and setProperty() which allow us to set a property with a value, providing the JS object in which to perform this mutation.

In web/wa_interop.dart let’s define this top-level function that’ll use those methods:

jsObj(Map<String, dynamic> dartMap) {
  var jsObject = newObject(); // Define our JS object

  dartMap.forEach((name, value) {
    setProperty(jsObject, name, value); // Add the name/value pairs from our `dartMap` variable
  });

  return jsObject; // Return the native JS object
}

Return to web/main.dart and wrap the configuration object as such:

jsObj({
  'imports': jsObj({
    'imported_func': (args) => window.console.log(args),
  })
});

This should log out a resolved Promise object. Since the Promise has been resolved, we cannot await for it this time. We have to use .then() to process the results.

wa.then((results) {
  window.console.log(results);
  // TODO: Extract `exported_func` from compiled .wasm file
});

Logging out results displays the following output:

What we care about is the exported_func prop from the .wasm file. To invoke this method let’s use the getProperty() method to retrieve our export:

wa.then((results) {
  var exportsObj = getProperty(results.instance, 'exports');
  Function exportedFn = getProperty(exportsObj, 'exported_func');
  exportedFn(); // Logs `42` to the console
});

This should now log 42 to the console. If that’s the case then we’re done!

Bundling for production

When building for production, use the --no-release flag. This uses the dartdevc tool to compile instead of dart2js. In other words this supports modern browsers running ES6.

EDIT: After further investigation, you can bundle to a working ES5 output. In web/wa_interop.dart, add an interop class for the JavaScript Promise API:

@JS()
class Promise {
  external then(Function callback);
}

In web/main.dart set the return type of the instantiate call:

Promise wa = await instantiate( // Replaced `var` with `Promise`
  ...

We need to wrap the functions we are passing using the allowInterop() top-level method from the js package utility:

'imported_func': allowInterop((args) => window.console.log(args)),

The last thing we need to do is to adjust the callback implementation for the instantiate promise result:

wa.then(allowInterop((result) {
  var instance = getProperty(result, 'instance');
  var exportsObj = getProperty(instance, 'exports');
  Function exportedFn = getProperty(exportsObj, 'exported_func');

  exportedFn();
}));

Alright. So that’s it for enabling support in the ES5 output.

Get the source code

Further reading

• js package on Pub

• How to use JavaScript libraries in your Dart applications

• Using the WebAssembly JavaScript API

Further reading

1. AngularDart Guide

2. Firebase Realtime Database Guide

3. Get started with Dart Egghead.io course

We will create a new project in our Firebase console and use the Firebase Dart package to interact with our online database. We will continue to use the Bootstrap UI library to build our user interface.

Watch on YouTube

Get the source code

Further reading

1. AngularDart Guide

2. Firebase Realtime Database Guide

3. Get started with Dart Egghead.io course

In this part you will learn how to implement validation for the form, utilising the NgForm directive and its NgControl counterpart. We will continue to use the Bootstrap UI library to build our user interface.

Watch on YouTube

Get the source code

Further reading

1. AngularDart Guide

2. Auto-Generate the scaffolding for your next project

3. Get started with Dart Egghead.io course