DEV Community: Jermaine

Supabase & Riverpod Minicourse | Build A Realtime Photo Sharing App

Jermaine — Tue, 25 Apr 2023 07:13:54 +0000

In this free minicourse, we will build a realtime photo sharing app with Supabase, Flutter and Riverpod. Supabase is an open-source Firebase alternative that offers a set of tools to create scalable and secure web and mobile applications.

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.

Watch the minicourse

Get Started

To get set up and prepped for the course:

Get the source code on GitHub. It contains the starting base that we build upon in the course
Create a Supabase account or spin up a Docker instance. This is a necessary first step to create our Supabase project
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 object 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 below 🚀

Sharing is caring

If you enjoyed reading this post, please share this through your social media channels. Also check out and subscribe to my YouTube channel (hit the bell icon too) for full-stack development tutorials on Dart and Flutter.

Subscribe to the newsletter for my free Get started with Dart eBook and to be notified when new content is released.

Like, share and follow me for more content on Dart.

Originally published at https://creativebracket.com

Firebase Authentication and Flutter Full Course 2020 | Watch on YouTube

Jermaine — Fri, 20 Nov 2020 14:02:21 +0000

Firebase is a platform that provides the infrastructure needed to build apps fast. In the previous mini-course we built a mobile and web app with Flutter and MongoDB. In this full course we will build a messaging app with Firebase Authentication and Flutter.

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.

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> {
  // Remove commented out lines
  // 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:

import 'package:flutter_signin_button/flutter_signin_button.dart';
 .. 
body: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Expanded(
      child: Container(),
    ),
// Add the widget below
    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.

Sharing is caring 🤗

If you enjoyed reading this post, please share this through your social media channels. Also check out and subscribe to my YouTube channel (hit the bell icon too) for full-stack development tutorials on Dart and Flutter.

Subscribe to the newsletter for my free 35-page Get started with Dart eBook and to be notified when new content is released.

Like, share and follow me for more content on Dart.

Originally published at https://creativebracket.com

Fullstack Flutter and MongoDB Cloud Mini-Course | FREE TO WATCH!!!

Jermaine — Tue, 06 Oct 2020 10:33:46 +0000

After numerous requests to produce a Flutter and MongoDB combo, I've devoted the time to produce a fullstack Flutter and MongoDb Cloud mini-course. We will build a contacts list application that manages contacts in MongoDB Cloud Atlas database. We will also implement a Dart backend server for talking to MongoDB datastore. This app will be built for both Flutter mobile and web platforms.

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:

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.
dio - a powerful HTTP client for Dart. We use this to make requests to our Dart backend server.
faker - a library that generates various fake data. We use this to generate the contact names of our Fullstack Flutter app.
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:

Learn more from the full mini-course.

→Watch the Fullstack Flutter MongoDB Cloud Mini-Course
→Get the source code

Sharing is caring 🤗

If you enjoyed reading this post, please share this through the social buttons on this page. Subscribe to the YouTube channel for tutorials demonstrating how to build full-stack applications with Dart and Flutter.

Subscribe to the newsletter to access our free 35-page Get started with Dart eBook and to be notified when new content is released.

Like, share and follow me for more content on Dart and Flutter.

Originally published at creativebracket.com

Google Cloud Platform and Flutter Mini-Course released! | FREE TO WATCH

Jermaine — Fri, 25 Sep 2020 12:36:41 +0000

Becoming a full-stack developer requires a hand in all layers of the application development stack. This includes Frontend, Backend, Database and Infrastructure.

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 the Google Cloud Platform and Flutter 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 😉

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 video 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 full mini-course

Sharing is caring 🤗

Subscribe to the newsletter to access our free 35-page Get started with Dart eBook and to be notified when new content is released.

Like, share and follow me for more content on Dart and Flutter.

Originally published at creativebracket.com

Flutter for React developers video series

Jermaine — Mon, 02 Mar 2020 00:07:09 +0000

Picking the right tools for development is important when building a good app. The common mantra "write once, deploy everywhere" has proven to be effective from solutions like Phonegap or Ionic or NativeScript.

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 Sharing is caring

If you enjoyed reading this post, subscribe to the YouTube channel (hit the bell icon too) for more videos on Dart.

Watch my Free Get started with Dart course on Egghead.io and join my email newsletter to download my Free 35-page eBook titled Get started with Dart and to be notified when new content is released.

Like, share and follow me for more content on Dart.

Originally published at https://creativebracket.com.

What kind of apps would you like to see written in Dart?

Jermaine — Mon, 03 Feb 2020 18:38:10 +0000

I was going to add some introductory content about Dart being #1 fastest growing language according to Github's 2019 Annual Report, but I'd rather get to the point.

So please...your thoughts on the question :)

User Registration and Authentication with Dart video series

Jermaine — Mon, 03 Feb 2020 09:03:40 +0000

In this two-part series we will learn how to build a User Authentication system for use in your next application. User authentication allows access to specific resources on a system by verifying that a user has valid access to that resource.

Watch Part 1 and 2 below. You can also follow the written tutorial.

Part 1

Part 2

Sharing is caring

If you enjoyed reading this post, subscribe to the YouTube channel (hit the bell icon too) for more videos on Dart.

Watch my Free Get started with Dart course on Egghead.io and join my email newsletter to download my Free 35-page eBook titled Get started with Dart and to be notified when new content is released.

Like, share and follow me for more content on Dart.

Originally published at https://creativebracket.com.

Angel Dart Framework Tutorial series

Jermaine — Sun, 26 Jan 2020 16:59:42 +0000

In this video series we will look at the Angel Framework for backend Dart development, written by Tobe Osakwe, a Computer Science student. Angel comes batteries-included with dozens of plugins, enabling a "plug-and-play" approach to developing production quality applications. We will build a CMS for managing blog articles with validation and search functionality.

Get the source code

Part 2

Part 3

Part 4

Part 5 Sharing is caring

If you enjoyed reading this post, subscribe to the YouTube channel (hit the bell icon too) for more videos on Dart.

Watch my Free Get started with Dart course on Egghead.io and join my email newsletter to download my Free 35-page eBook titled Get started with Dart and to be notified when new content is released.

Like, share and follow me for more content on Dart.

Originally published at https://creativebracket.com.

Conquering Code Generation in Dart – Part 1: Write your first builder

Jermaine — Sun, 06 Oct 2019 20:09:31 +0000

Code Generation describes the process of automatically generating code that one would otherwise write by hand. In this new series we will be exploring the tooling made available for Code Generation for Dart projects.

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.

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 the build.yaml configuration, the build_config package is used to parse the 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 # <-- Add this line
  path: ^1.6.0

dev_dependencies: 
  build_config: ^0.4.1+1 # <-- And this line
  build_runner: ^1.6.6 # <-- And this line 
  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 some targets 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

Continue the full tutorial in the video above.

Get the source code

Sharing is caring

If you enjoyed reading this post, please share this through the various social buttons hovering on the left/top side of the screen. Also, check out and subscribe to my YouTube channel (hit the bell icon too) for videos on Dart.

Watch my Free Get started with Dart course on Egghead.io and Subscribe to my email newsletter to download my Free 35-page eBook titled Get started with Dart and to be notified when new content is released.

Like, share and follow me for more content on Dart.

Originally published at https://creativebracket.com.

Understanding Reflection and Annotations in Dart

Jermaine — Mon, 01 Jul 2019 06:07:36 +0000

Originally posted at creativebracket.com

In this video, we will explore the topic of Reflection and how that can be used to write cleaner software. Reflection allow us to examine and modify the structure and behaviour of a program at runtime. We will be working with the dart:mirrors library which contains helper classes and functions for achieving this. We will end by looking at a common use case with Annotations.

Basic example with Reflection

Create a main.dart file and start by importing the dart:mirrors library. 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:

reflect(): Reflects on an instance of a class
reflectClass(): Reflects on a class declaration
reflectType(): Reflects on the type passed in as the argument

In our 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 use the literal form of the handle() method:

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 the video above for the full tutorial.

→ Get the source code

One last thing...

I'm glad to announce that I've hit over 7000 followers on dev.to. Thanks a lot for all the growing interest, support and the feedback I've received!

In light of that I'm launching the Official Merch Store today. It's a great opportunity to be a part of the movement and keep the flames🔥 lit. That would drive the production of high-quality content covering topics further than "hello world" apps.

I've also hit over 800 subscribers on the YouTube channel. Hit that subscribe and bell notification if you haven't already. I plan on doing a series on code generation among other things quite soon.

Lastly, there are more tutorials on my blog at creativebracket.com. Do check 'em out.

Like, share and follow me for more content on Dart. Thanks.

10 interesting Dart and CSS libraries for May 2019

Jermaine — Sat, 04 May 2019 10:34:43 +0000

Dart has hit another win lately, having been listed at #12 of the most loved languages according to the StackOverflow 2019 Annual Developer Survey. In light of that I have taken a look and hand-picked 10 of the most interesting Dart packages you can start working with along side CSS libraries you should shortlist for your next web project.

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.

Sharing is caring

If you enjoyed reading this post, please share this through the various social buttons on this page. Also, check out and subscribe to my YouTube channel (hit the bell icon too) for videos on Dart with Angular, Vue, React, HTTP, RESTful APIs, MongoDB and many more.

Visit creativebracket.com for more in-depth Dart tutorials.

Build a chat application in Dart (Part 3)

Jermaine — Wed, 10 Apr 2019 10:09:21 +0000

In Part 2 we refactored our solution by splitting the Sign in and Chat room logic into View classes, building a Router object to transition between the screens. We will complete the full flow here by implementing our WebSocket connection and managing each of the chatters in our Chat room. At the end of this tutorial we will have a functioning chat application.

1. Create a WebSocket object

In order for messages to be relayed from one user and broadcasted to the others, we need to establish a persistent, bi-directional connection to our server. This will allow messages to be sent back and forth between the server and client using an event-based architecture. This is made possible via the WebSocket protocol, which the dart:io and dart:html library provides classes for. So no external packages needed!

Let's begin on the client by writing a class to be responsible for instantiating a WebSocket object and implementing various event listeners on them. This class will represent a user's connection to our Chat room server.

Build a Chat room subject

Create a chat_room_subject.dart file inside the directory lib/src and implement the class for our ChatRoomSubject:

// lib/src/chat_room_subject.dart

import 'dart:html';

class ChatRoomSubject {
  ChatRoomSubject(String username) {}

  final WebSocket socket;
}

Because we've marked our socket instance variable as final, it requires that we assign a value to it in the initialize phase, that is, before the {} part of our constructor is run. Let's therefore create our WebSocket instance and pass the URL to our server:

ChatRoomSubject(String username)
  : socket = WebSocket('ws://localhost:9780/ws?username=$username') {}

When our WebSocket class is instantiated, a connection will be established to the URL passed in as it's String argument. We've also passed in the username value as part of the query string of the WebSocket URL.

We are now able to listen for several events on our WebSocket namely open, message, error and close.

// ..
class ChatRoomSubject {
  // ..
  // ..
  _initListeners() {
    socket.onOpen.listen((evt) {
      print('Socket is open');
    });

    // Please note: "message" event will be implemented elsewhere

    socket.onError.listen((evt) {
      print('Problems with socket. ${evt}');
    });

    socket.onClose.listen((evt) {
      print('Socket is closed');
    });
  }
}

And we need to invoke the _initListeners() method:

ChatRoomSubject(String username)
  : socket = WebSocket('ws://localhost:9780/ws?username=$username') {
  _initListeners(); // <-- Added this line
}

We need to be able to send messages to our Chat room server and close a WebSocket connection, effectively leaving the Chat room. Add these methods to our ChatRoomSubject class before _initListeners():

send(String data) => socket.send(data);
close() => socket.close();

Integrate `ChatRoomSubject` into the `ChatRoomView` class

Import the dart file we've just created from web/views/chat_room.dart directly after our // Absolute imports (dart_bulma_chat_app is a reference to the name value field inside your pubspec.yaml file, which points to the lib/ directory):

// web/views/chat_room.dart

// Absolute imports
import 'dart:html';
import 'dart:convert';

// Package imports
import 'package:dart_bulma_chat_app/src/chat_room_subject.dart'; // <-- Added this line

And then we will instantiate this class as follows:

// ..
// ..
class ChatRoomView implements View {
  ChatRoomView(this.params)
      : _contents = DocumentFragment(),
        _subject = ChatRoomSubject(params['username']) // <-- Added this line
  {
    onEnter();
  }

  /// Properties
  final ChatRoomSubject _subject;
  // ..
  // ..
}

If you look at the _initListeners() method in ChatRoomSubject you should notice that we didn't implement the listener for the WebSocket "message" event. We will do that in ChatRoomView since we have access to the WebSocket instance:

// ..
// ..
class ChatRoomView implements View {
  // ..
  // ..
  void _addEventListeners() {
    // ..
    // ..
    _subject.socket.onMessage.listen(_subjectMessageHandler);
  }

  void _subjectMessageHandler(evt) {
    chatRoomLog.appendHtml(evt.data + '<br />');
  }
}

Lastly, let's amend _sendBtnClickHandler(e) to send messages from the input field to the Chat server, empty the message input field value and reset it's focus:

void _sendBtnClickHandler(e) {
  _subject.send(messageField.value);

  // Resets value and re-focuses on input field
  messageField
    ..value = ''
    ..focus();
}

2. Upgrade incoming requests to WebSocket connections

To get a basic example working, let's write some server-side logic to maintain our chat room session.

Create lib/src/chat_room_session.dart and implement the class for our ChatRoomSession:

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

class Chatter {
  Chatter({this.session, this.socket, this.name});
  HttpSession session;
  WebSocket socket;
  String name;
}

class ChatRoomSession {
  final List<Chatter> _chatters = [];

  // TODO: Implement addChatter method
  // TODO: Implement removeChatter method
  // TODO: Implement notifyChatters method
}

Here we have two different classes. The Chatter class represents each participant. This participant contains its current session, WebSocket connection and name. The ChatRoomSession class manages our list of participants, including facilitating communication between them.

Here's the implementation of the addChatter() method. This upgrades the incoming request to a WebSocket connection, builds a Chatter object, creates event listeners and adds it to the _chatters list:

class ChatRoomSession {
  final List<Chatter> _chatters = [];

  addChatter(HttpRequest request, String username) async {
    // Upgrade request to `WebSocket` connection and add to `Chatter` object
    WebSocket ws = await WebSocketTransformer.upgrade(request);
    Chatter chatter = Chatter(
      session: request.session,
      socket: ws,
      name: username,
    );

    // Listen for incoming messages, handle errors and close events
    chatter.socket.listen(
      (data) => _handleMessage(chatter, data),
      onError: (err) => print('Error with socket ${err.message}'),
      onDone: () => _removeChatter(chatter),
    );

    _chatters.add(chatter);

    print('[ADDED CHATTER]: ${chatter.name}');
  }

  // TODO: Implement _handleMessage method
  _handleMessage(Chatter chatter, String data) {}
}

When messages are sent to the server via the connection, we handle this by invoking _handleMessage() while passing it the Chatter object and data as arguments.

Let's cross out that // TODO: by implementing _handleMessage():

_handleMessage(Chatter chatter, String data) {
  chatter.socket.add('You said: $data');
  _notifyChatters(chatter, data);
}

And let's implement _notifyChatters():

_notifyChatters(Chatter exclude, [String message]) {
  _chatters
    .where((chatter) => chatter.name != exclude.name)
    .toList()
    .forEach((chatter) => chatter.socket.add(message));
}

And also removing the Chatter object when a participant leaves:

_removeChatter(Chatter chatter) {
  print('[REMOVING CHATTER]: ${chatter.name}');
  _chatters.removeWhere((c) => c.name == chatter.name);
  _notifyChatters(chatter, '${chatter.name} has left the chat.');
}

Instantiate our `ChatRoomSession` class

Go to bin/server.dart and create our instance:

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

import 'package:dart_bulma_chat_app/src/chat_room_session.dart'; // <-- Added this line

main() async {
  // TODO: Get port from environment variable
  var port = 9780;
  var server = await HttpServer.bind(InternetAddress.loopbackIPv4, port);
  var chatRoomSession = ChatRoomSession(); // <-- Added this line
  // ..
  // ..
}

Scroll down to the case '/ws': section and call the addChatter() method, passing it the request and username:

// ..
// .. 
  case '/ws':
    String username = request.uri.queryParameters['username'];
    chatRoomSession.addChatter(request, username);
    break;
// ..
// ..

So we retrieve the username from the query parameters when we passed ?username=$username into the URL we defined for our WebSocket instance inside ChatRoomSubject.

Let us test what we have now. Open a terminal session and instantiate the server:

dart bin/server.dart

And run the web app on another terminal session:

webdev serve --live-reload

Following this fully should give you the image result below:

If you’ve got this far then great job!!!

3. Implement some helper functions

We need a way of categorising the types of messages sent to our Chat server and respond to it accordingly. When a participant joins the chat, it would be great to send a notification welcoming this new participant and notifying the other participants on the new chatter. We will create an enum type which will contain the particular types of messages this Chat app will have.

Follow the full tutorial which includes tidying up the look and feel of the chat messages and implementing the logout functionality.

→ Read the full tutorial on my blog

Sharing is caring 🤗

If you enjoyed reading this post, please share this through the various social channels. I'm looking for some Patrons to keep these detailed articles coming. Become a Patron today...it will really make my day. Alternatively, you could buy me a coffee instead.

Watch my Free Get started with Dart course on Egghead.io and Subscribe to my email newsletter to download my Free 35-page Get started with Dart eBook and to be notified when new content is released.

Like, share and follow me 😍 for more content on Dart.

DEV Community: Jermaine

Supabase & Riverpod Minicourse | Build A Realtime Photo Sharing App

Get Started

Package Dependencies

supabase_flutter

flutter_riverpod

Watch full minicourse below 🚀

Sharing is caring

Firebase Authentication and Flutter Full Course 2020 | Watch on YouTube

Set up Flutter project

Run the Flutter project

Build UI for Firebase Authentication

Sharing is caring 🤗

Fullstack Flutter and MongoDB Cloud Mini-Course | FREE TO WATCH!!!

Getting started

Implementing the server

Sharing is caring 🤗

Google Cloud Platform and Flutter Mini-Course released! | FREE TO WATCH

Getting started

Sharing is caring 🤗

Flutter for React developers video series

Part 1

Part 2

Sharing is caring

What kind of apps would you like to see written in Dart?

User Registration and Authentication with Dart video series

Part 1

Part 2

Sharing is caring

Angel Dart Framework Tutorial series

Part 2

Part 3

Part 4

Part 5

Sharing is caring

Conquering Code Generation in Dart – Part 1: Write your first builder

How to get started

Configuring the build.yaml file

Sharing is caring

Understanding Reflection and Annotations in Dart

Basic example with Reflection

Further reading

One last thing...

10 interesting Dart and CSS libraries for May 2019

1. dio

2. BulmaCSS

3. RxDart

4. Water.css

5. html

6. animate.css

7. markdown

8. DynCSS

9. pdf

10. Hover.css

Sharing is caring

Build a chat application in Dart (Part 3)

1. Create a WebSocket object

Build a Chat room subject

Integrate ChatRoomSubject into the ChatRoomView class

2. Upgrade incoming requests to WebSocket connections

Instantiate our ChatRoomSession class

3. Implement some helper functions

Sharing is caring 🤗

Configuring the `build.yaml` file

Integrate `ChatRoomSubject` into the `ChatRoomView` class

Instantiate our `ChatRoomSession` class