As application developers, we want all of our users to use the most recent version of our application.

But how can we make sure that users are aware of a new version of our application?

The answer to that question is quite simple: Why not inform them when a new version of the application is out?

You can do this in various ways:

• Use a push notification
• Let them know when the application is launched

We won’t be dealing with push notifications in this article. Instead we'll focus on showing how you can (using a package or two) show a dialog to your users informing them that a new version of the application is out and how to deal with the update.

Wait, Isn’t This Already Included?

You would think that this kind of functionality should already be included in the modern mobile OS systems. And you would be right – but only for Android.

iOS does not (currently) give developers the ability to see if there is a new version of the application and notify users about it. In Android, you have the In-App Update library that is part of the Google Play libraries.

Because of this, and because Flutter supports both platforms, I am going to go over two prominent packages that help you handle version updates to your application:

1. Upgrader
2. In App Update

Both can get you the desired result, but they vary widely in how they do it.

Before we start, it is crucial to understand that you must have a version of your application that was installed directly from the Google Play store. This is required since both packages rely on Google Play services and its ability to verify the owner of the application.

If you fail to do so, you will see the following error when trying to use one of the packages:

_Install Error(-10): The app is not owned by any user on this device. An app is “owned” if it has been acquired from Play. (https://developer.android.com/reference/com/google/android/play/core/install/model/InstallErrorCode#ERROR_APP_NOTOWNED)

How to Use The In App Update Package

Right off the bat you should know that this package will only work on Android. This is because it relies on the in app update library for its inner workings.

This package is basically a wrapper for the Android library. Below are its exposed API methods:

• Future<AppUpdateInfo> checkForUpdate(): Checks if there's an update available
• Future<AppUpdateResult> performImmediateUpdate(): Performs an immediate update (full-screen)
• Future<AppUpdateResult> startFlexibleUpdate(): Starts a flexible update (background download)
• Future<void> completeFlexibleUpdate(): Actually installs an available flexible update

✋ If you want to read more about the differences between an immediate update or a flexible update, head over here.

How to Set Up the Package

First, add the package to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  in_app_update: ^3.0.0

Then perform pub get.

Inside your application, where you intend to perform the logic to handle in app updates, add the following import:

import 'package:in_app_update/in_app_update.dart';

We will first need to add logic that checks if our application has an update. To do that, we will use the checkForUpdate method. Its return value is a Future which contains information about the availability and progress of an app update.

We can check if an update is available by using the updateAvailability property. If an update is available, it will have the value of UPDATE_AVAILABLE. So, your method may look like this:

InAppUpdate.checkForUpdate().then((updateInfo) {
  if (updateInfo.updateAvailability == UpdateAvailability.updateAvailable) {
      //Logic to perform an update 
  }
});

Next, we need to decide which kind of update we want to trigger – either a flexible or an immediate update.

Going for an immediate update should be reserved for an application update that is critical for your users. That may mean a version that fixes a critical bug or offers a new feature.

To start an immediate update, we can use the performImmediateUpdate method. This method returns a AppUpdateResult enum that lets you know if the update was successful or not.

Before calling this method we need to check if we are allowed to run an immediate update. We do that by accessing the immediateUpdateAllowed flag on the AppUpdateInfo object.

If we want to trigger a flexible update, we use the startFleixbleUpdate method. This runs in the background and similar to the immediate update method. It also returns an AppUpdateResult enum.

If in this scenario the update was successful, we need to call the completeFlexibleUpdate method to install the update to our application.

So, if we look at the code snippet above and add the logic for the different types of updates, it will look like this:

InAppUpdate.checkForUpdate().then((updateInfo) {
  if (updateInfo.updateAvailability == UpdateAvailability.updateAvailable) {
      if (updateInfo.immediateUpdateAllowed) {
          // Perform immediate update
          InAppUpdate.performImmediateUpdate().then((appUpdateResult) {
              if (appUpdateResult == AppUpdateResult.success) {
                //App Update successful
              }
          });
      } else if (updateInfo.flexibleUpdateAllowed) {
        //Perform flexible update
        InAppUpdate.startFlexibleUpdate().then((appUpdateResult) {
              if (appUpdateResult == AppUpdateResult.success) {
                //App Update successful
                InAppUpdate.completeFlexibleUpdate();
              }
          });
      }
  }
});

How to Use The Upgrader Package

As opposed to the first option, this one offers a solution for both iOS and Android. It relies on gathering data from the store and checking it against the current data from the application itself.

Instead of having an API to query the data, this package has widgets that perform the logic under the hood.

How to Set Up the Package

First, add the package to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  upgrader: ^5.0.0

Then perform pub get.

Inside your application, where you intend to perform the logic to handle in app updates, add the following import:

import 'package:upgrader/upgrader.dart';

The main difference between these two options is just a UI one, so pick the one that fits the most for you.

To integrate this package, you will need to wrap your body widget with either UpgradeAlert or UpgradeCard. Below is an example:

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
      return MaterialApp(
        title: applicationName,
        home: UpgradeAlert(                  /// <------------------
          child: MainPage(
              key: Key("YOUR_KEY"),
              title: applicationName
          ),
        )
      );
    }
}

If a new version of your application is available in the store, you will see this:

To test things out, make sure you add this:

await Upgrader.clearSavedSettings()

inside your main method in your main.dart file.

Just so you are aware, there are a ton of configurations that you can set for the Upgrader package. I highly recommend you go and check these out.

How to Test the Packages

Regardless of which package you choose to work with, you need to know that your logic functions properly.

But how can you do that without releasing an official version of your application? You can use the internal testing option in Google Play Console. By releasing a new version of your application to internal testers, it will not be a public one and will allow you to test out the upgrading functionality.

Here is what you need to do:

1. Log in to your Google Play Console account and head into the application you are working on to have the updating logic
2. Under Setup → Internal App Sharing, go to Manage Testers and make sure to allow testers to download and install the shared application. You can either choose to do so via link or by email.

3. Then, go to Testing → Internal Testing and click on the Create new release button (top right).

4. Once you have performed a release, you can head back to the main Internal Testing page and click on the Testers tab. There you will see a list containing tester emails (empty right now). Click on the blue arrow icon.

5. In this screen you can add yourself to be an internal tester (in the Add email addresses).

6. When you are done, you can head back to the Internal Testing window. Scroll down to the bottom and you will see the How testers join your test and you will see a Copy link button.

You can now click the button and send yourself the link so you will be able to download the new version of your application.

If you fail to do one of the above steps, the link generated will lead to a not found (Error 404) page:

If you did everything successfully, you will see the following when you click on the generated link:

If you see this error:

_Install Error(-6): The download/install is not allowed, due to the current device state (e.g. low battery, low disk space, …). (https://developer.android.com/reference/com/google/android/play/core/install/model/InstallErrorCode#ERROR_INSTALL_NOTALLOWED)

It might mean you are running your application on an emulated device and you need to have Google Play Store installed on it and be logged in.

Wrapping Up

I wrote this article because I had to go through the same process when integrating the in app update package with my own application.

You are welcome to check it out at the Google Play Store:

And see the entire source code here:

Thank you for reading!

In a real-time chat application, the recipient can view the sender’s message almost immediately. This can either be in a one-on-one conversation between two parties or a group conversation.

And that's what we're going to build in this tutorial. For this application, we will be using Nuxt, the intuitive Vue framework.

Now that we know what we’re going to be building and the technology we’ll be using, let’s go over the chat API we’ll be using.

For this article, we’ll be going with Robin because of its minimal UI and how easy it is to integrate into our app. With that out of the way, let’s get started.

Step 1 – Create the Nuxt App

First, we need to create the Nuxt app with any of the following commands:

yarn create nuxt-app nuxt-chat-app
// OR
npx create-nuxt-app nuxt-chat-app
// OR
npm init nuxt-app nuxt-chat-app

Step 2 – Create a Robin Account

Now that our app is ready, we need to have a Robin account before we can use it. Head over to Robin’s signup page to create a 30-day free trial account.

Robin notifies you 7 days after you've created the account and you can remove your card before the billing date.

After filling out the signup form, you’ll be redirected to a billing page to fill in your card information. On the next page where it redirects you, Robin requests the name of the app you want to create and its authentication type. Feel free to use any name of your choice and either of the auth options.

Step 3 – Get Your Robin Credentials

Now that we have created an app on our Robin dashboard, there is something you should take note of. There are a couple of credentials you need when using Robin in your Nuxt app:

• API key,
• User token,
• User name,
• Users, and
• Keys

Let’s go over each of them individually.

• API key: Robin automatically creates the API key when you create an app. You can retrieve it from either the getting started or the API config page on your dashboard. It is unique for every application.
• User token: The user token is a unique identifier for every user of your Robin app. The token that should be passed to this property is yours since you’re the one using the app on your site. However, it is to be created by you, the user, typically on the server, and then used on the client side.
• User name: The User name is the name of the current user of your Robin app. In this case, it will be your name. If you wanted someone else to include your Robin chat on their site or web app (i.e another user of your Robin app), it should be their name.
• Users: Users is a list of the users on your Robin app. It usually contains their user tokens, profile images, and user names.
• Keys: This fundamentally exists to help us be flexible in describing the user tokens, profile images, and user names in our users list. Here’s an example. If our keys object looks like this:

keys: {
  userToken: 'user_token',
  profileImage: 'profile_image',
  userName: 'user_name'
}

Then our users array should describe the users’ tokens, profile images, and names with the values in the keys object.

Regardless of the users that would be using your Robin App, Robin requires a userToken, profileImage and a userName from them. Robin requires this for the display name and to identify each message sender and receiver uniquely on the platform.

users: [
  {
    'user_token': 'ABCDEF098765GH',
    'profile_image': 'https://url-to-image',
    'user_name': 'Article Reader'
  }
]

Step 4 – Install Robin in Your Nuxt App

Since we have everything we’ll need, we can go ahead and install Robin.

npm i robin-vue
// OR
yarn add robin-vue

Step 5 – Setup the Robin Plugin

In your plugins directory, create a robin.js file with the plugin setup:

import Vue from 'vue'
import RobinChat from 'robin-vue'
import 'robin-vue/dist/style.css'

Vue.use(RobinChat)

Note that we import the CSS because the RobinChat component does not include any CSS itself.

Step 6 – Register the Plugin

The plugins property in the nuxt.config.js file is to let our Nuxt app know about the plugins that it should use. So if we don’t include our Robin plugin there, it won’t be available in our app.

export default {
  // ...
  plugins: [
    { src: '~/plugins/robin.js', mode: 'client' }
  ]
}

Step 7 – Use the Plugin

Now what’s left is for us to include the RobinChat component anywhere in our app and pass those credentials we discussed earlier as props.

Once again, the credentials are:

• API key,
• User token,
• User name,
• Users, and
• Keys

In this list, what we currently don’t have is our user token and the tokens of the users on our app.

Recall that these tokens are usually created on the server. But we don’t have the luxury of that. So we can go ahead and create them with the help of Robin’s JavaScript SDK. The Vue SDK we previously installed depends on this JavaScript SDK. So we don’t need to install it since it already exists in our app.

How to Create the User Tokens

We can go ahead and create the tokens in the page we're going to include the chat UI. Because it’s for learning purposes, we can go ahead and create tokens for 5 users, ourselves included. We need to come up with usernames for each of them.

<template>
  <!-- ... -->
</template>


<script>
export default {
  data () {
    return {
      users: [
        {
          user_token: '',
          profile_image: '',
          user_name: 'idorenyin'
        },
        {
          user_token: '',
          profile_image: '',
          user_name: 'ayo'
        },
        {
          user_token: '',
          profile_image: '',
          user_name: 'elvis'
        },
        {
          user_token: '',
          profile_image: '',
          user_name: 'favour'
        },
        {
          user_token: '',
          profile_image: '',
          user_name: 'enoch'
        }
      ],
    }
  }
}
</script>

Note that the keys in every user object in the users array have to be defined in the keys object that we’ll be passing as a prop to the Robin component.

keys: {
  userToken: 'user_token',
  profileImage: 'profile_image',
  userName: 'user_name'
},

Next, we use the SDK’s createUserToken() function to create the tokens after creating a Robin instance, as it says in Robin’s docs.

<template>
  <!-- ... -->
</template>

<script>
import { Robin } from 'robin.io-js'

export default {
  data () {
    return {
      keys: {
        userToken: 'user_token',
        profileImage: 'profile_image',
        userName: 'user_name'
      },
      users: [
        // ...
      ]
    }
  },
  created () {
    this.createTokens()
  },
  methods: {
    async createTokens () {
      const robin = new Robin('API_KEY', true)
      for (let i = 0; i < this.users.length; i++) {
        await robin.createUserToken({
          meta_data: {
            username: this.users[i].user_name
          }
        }).then((res) => {
          this.users[i].user_token = res.data.user_token
        })
      }
    }
  }
}
</script>

How to Use Credentials on the RobinChat Component

We now have everything we need to display the Robin chat UI on our app. Whew!
We can now go ahead and use the tokens and the other credentials.

<template>
  <!-- ... -->
  <RobinChat
    v-if="tokensAreAvailable"
    :api-key="apiKey"
    :user-token="users[0].user_token"
    user-name="Idorenyin Udoh"
    :keys="keys"
    :users="users"
  />
</template>

<script>
import { Robin } from 'robin.io-js'

export default {
  data () {
    return {
      tokensAreAvailable: false,
      apiKey: 'API_KEY',
      keys: {
        userToken: 'user_token',
        profileImage: 'profile_image',
        userName: 'user_name'
      },
      users: [
        {
          user_token: '',
          profile_image: '',
          user_name: 'idorenyin'
        },
        {
          user_token: '',
          profile_image: '',
          user_name: 'ayo'
        },
        {
          user_token: '',
          profile_image: '',
          user_name: 'elvis'
        },
        {
          user_token: '',
          profile_image: '',
          user_name: 'favour'
        },
        {
          user_token: '',
          profile_image: '',
          user_name: 'enoch'
        }
      ]
    }
  },
  created () {
    this.createTokens()
  },
  methods: {
    async createTokens () {
      const robin = new Robin(this.apiKey, true)
      for (let i = 0; i < this.users.length; i++) {
        await robin.createUserToken({
          meta_data: {
            username: this.users[i].user_name
          }
        }).then((res) => {
          this.users[i].user_token = res.data.user_token
        })
      }
      this.tokensAreAvailable = true
    }
  }
}
</script>

Note that we only display the RobinChat component when all the users’ tokens are available to avoid errors.

This is what the result looks like:

The app is available here.

Note that I used previously-created user tokens for this app because you wouldn’t be able to view messages if tokens are created every time the app loads. Permanent tokens are what make the messages on Robin persist.

Also, I created another app for the user Ayo. You can check it out too. This way, you can test the real-time communication between Idorenyin and Ayo.

Conclusion

You just learned how to implement real-time communication on a Nuxt application with Robin.

The ease of integration makes it super fast to implement a chat system in your app and focus on building/maintaining it.

If you make sure to create your users’ tokens on the server, then implementing the integration on the frontend wouldn't be too hard.

Happy building!

This article will teach you how to build a voting application that displays the poll results in real-time. Each time someone votes, the application updates automatically and shows the new results.

Even though you will build a full-stack application, you will not write any backend code thanks to Hasura!

The application will use:

• Hasura GraphQL Engine for the backend
• React and Apollo for the frontend

Live Demo | Backend Explorer | GitHub Repository

Why These Technologies?

Before going further, let's talk about the technologies we'll use for the application stack.

Hasura GraphQL Engine

Hasura is an open source GraphQL Engine that enables you to create an instant, real-time GraphQL API without writing backend code at all.

You might wonder how that works. Hasura connects to your database and it automatically generates the API based on your database tables and views. You get things like the GraphQL Schema and Resolvers out of the box.

Therefore, the reason for choosing Hasura is to speed up the process of building the real-time GraphQL API. Hasura does all the heavy lifting, so we can focus on other things.

React and Apollo Client

React is one of the most popular JavaScript frameworks with a great community. It's also versatile, allowing you to build both web and mobile applications.

Apollo Client is a fully-featured GraphQL client that allows you to build user interface components and fetch data via GraphQL seamlessly. The Apollo Client is also one of the most popular GraphQL clients.

Together, React and Apollo Client form a powerful combination that fits the requirements for the real-time voting application.

Data Modeling

The first step is to determine the structure of the database. The database will contain the following tables:

• user – a user is a person who votes in the poll
• poll – the poll represents the question (e.g. what is your favorite framework?)
• option – an option is a poll option that people can pick
• vote – a vote is the link between a user and a poll option. It represents the user’s vote.

The figure above illustrates the database tables and relationships.

There is a one-to-many relationship between the user and vote. A user can vote multiple times, but one vote can belong to only one user.

The poll and option have a one-to-many relationship meaning that a poll can have multiple options, but an option belongs to only one poll.

Lastly, there is a one-to-many relationship between the option and vote tables. What that means is that you can only pick one option. One vote represents one option.

The database also has two views – online_users and poll_results. They show the number of online users and the results from the poll.

Backend Implementation with Hasura

You can use Hasura in two ways:

• locally with the help of Docker (see guide)
• in the cloud with the help of Hasura Cloud (see guide)

It's worth mentioning that Hasura Cloud also offers advanced performance, security, and monitoring features. Some of the things it offers are as follows:

• automatically scaling your application up or down
• monitoring and tracing
• rate limiting

These are just three benefits, but there are more. If you want to check them out, you can do it here.

This tutorial uses the cloud version, but you can follow the tutorial even if you use Hasura locally. With that out of the way, let's start building the backend.

Database Setup

After setting up the account, go to the project’s dashboard and click on the "DATA" tab.

In the "DATA" tab, you can connect to an existing database or create a new one on Heroku. We will create a new database so click on the "Create Heroku Database" option.

After that, click on "Create Database" and you should have a PostgreSQL database up and running within seconds.

Database Tables

The next step involves creating the database tables. Go to your newly created database and click on the "Create Table" button.

Clicking the button opens a new page where you can create a new table.

User Table

The "user" table has the following columns:

• id (primary key) – UUID, gen_random_uuid(), Unique
• created_at – Timestamp, now()
• online_ping – Boolean, Nullable
• last_seen_at -–Timestamp, Nullable

The figure illustrates the table columns, types, and other configurations.

Before saving the table, set the id column as the Primary Key, as shown in the above figure.

After that, scroll down and press the "Add Table" button to save it. You can follow the same process to create the other tables.

Poll Table

The "poll" table has the following columns:

• id (primary key) – UUID, gen_random_uuid(), Unique
• created_at – Timestamp, now()
• created_by – UUID, nullable
• question – text

Option Table

The "option" table has the following columns:

• id (primary key) – UUID, gen_random_uuid(), Unique
• poll_id – UUID
• text – text

Vote Table

The "vote" table has the following columns:

• id (primary key) – UUID, gen_random_uuid(), Unique
• created_by_user_id – UUID
• option_id – UUID
• created_at – Timestamp, now()

Database Views

We will use views for the poll results and online users because they allow us to re-use complex queries. A view is the result of querying one or more tables.

You can think of a view as saving a complex query and giving it a name so you can re-use it. A view is called a "virtual table" and you can query it as you would query a regular table.

Poll Results

Displaying the poll results requires us to perform database joins on the poll, option and vote tables.

The first database join returns all the records from the vote table and the matching records from the option table. That is, it returns each vote and its associated poll option.

The second join returns all the records from the option table and the matching records from the poll table. That is, it returns all options and the poll they belong to.

After that, the view counts all the records returned and returns them as "votes".

CREATE
OR REPLACE VIEW "public"."poll_results" AS
SELECT
  poll.id AS poll_id,
  o.option_id,
  count(*) AS votes
FROM
  (
    (
      SELECT
        vote.option_id,
        option.poll_id,
        option.text
      FROM
        (
          vote
          LEFT JOIN option ON ((option.id = vote.option_id))
        )
    ) o
    LEFT JOIN poll ON ((poll.id = o.poll_id))
  )
GROUP BY
  poll.question,
  o.option_id,
  poll.id;

Where do you add these database views?

To add the database views, go to the "DATA" tab and click on the "SQL" option. The "SQL" page allows you to run SQL statements directly on the database.

After that, add the SQL code and click on the "Run!" button. If there are no errors, you should be able to access and use the newly created view.

Online Users

For the number of online users, we can also use a view.

The users table has a property last_seen_at that keeps track of the users’ last login. We can use this property to determine the number of logged-in users (online).

CREATE
OR REPLACE VIEW "public"."online_users" AS
SELECT
  count(*) AS count
FROM
  "user"
WHERE
  (
    "user".last_seen_at > (now() - '00:00:15' :: interval)
  );

The above view counts the number of users seen in the last 15 seconds. If they logged in during the last 15 seconds, we count them as online users.

Relationships

The last step in implementing the backend is configuring the relationships between tables. With Hasura, you can create relationships between tables in two ways:

1. using foreign key constrains
2. manually (when it's not possible to use foreign key constraints)

Going further, we will create relationships by adding foreign key constraints. If you want to read more about relationships, the documentation has a comprehensive section on table relationships.

User – Vote

Navigate to "Modify" in the vote table and click on the button saying "Add a foreign key".

Let's configure the created_by_user_id column as a foreign key for the id column in the users table.

The image illustrates the process of adding foreign keys.

Following the same process, add the option_id column as a foreign key for the id column in the option table.

The "Reference Table" field value should be option. The value for "From" should be option_id, whereas the value for "To" should be id.

Since you added the foreign keys, Hasura suggests potential relationships automatically. If you go to the "Relationships" tab, you should see the suggested relationships.

When you click on the "Add" button, you get the chance to name your relationship. You can either leave the default name or use a custom one.

Save the relationships by pressing the "Add" button and you are done!

Poll – Option

Go to the option table and add the poll_id as the foreign key for the id column in the poll table.

• Reference Table – poll
• From – poll_id
• To – id

After saving it, go to the "Relationships" tab and accept only the suggested "Object Relationship".

Option – Vote

When you configured the foreign keys for the "User – Vote" relationship earlier, you added the option_id column as a foreign key for the id column in the option table.

That means the only thing left to do is to go to the "Relationships" tab in the poll table and accept the suggested "Array Relationship".

Poll Results View

For the poll_results View, we need to manually set the relationships with the option and poll tables. Looking at the view, you can see we have the foreign keys poll_id and option_id.

Go to the "Relationships" tab in poll_results to add the relationships manually. Once you are there, click on the button saying "Configure".

The relationships between poll_results and the option and poll tables are object relationships.

Configure the relationship between poll_results and option as shown in the figure below.

The relationship between poll_results and poll is configured in a similar way. Add the following information:

• Relationship Type – Object Relationship
• Relationship Name – poll
• Reference Schema – public
• Reference Table – poll
• From – poll_id
• To – id

Save them and you are done with the relationships!

GraphQL API is Ready

You now have a fully functioning GraphQL API without writing any line of code. If you go to the API Explorer in Hasura Console, you can insert, modify and delete data.

Imagine building the same application manually – it would be quite tedious and time-consuming.

The next step is to implement the frontend part.

Frontend Implementation

The first step of the frontend implementation is to create and initialize the project. Go to your preferred folder and run:

npx create-react-app realtime-poll

Once the installation finishes, go to the realtime-poll folder and install the required dependencies:

npm i react-bootstrap react-google-charts @apollo/client graphql graphql-ws

The react-bootstrap package will allow us to build the application interface with Bootstrap, whereas react-google-charts will help us display the poll results as a chart. The other packages will enable us to use the GraphQL API we built previously.

Before going further, delete setupTests.js, reportWebVitals.js and logo.svg from the src folder. After that, remove all the references to those files from index.js and App.js.

Setup GraphQL Client with Apollo

The voting application uses GraphQL Subscriptions to show the poll results in real-time. When people vote, the results of the poll update automatically, so we need to display them without forcing people to refresh the page.

A GraphQL Subscription is an operation that allows us to do that by subscribing to server events. When the data (poll results) gets updated (someone votes), we receive the updates in real-time.

Since the data is pushed to the client each time there is an update, we need a special connection. GraphQL Subscriptions use WebSockets, which allows us to keep an open connection between the server and client.

Note: This article briefly touches on Subscriptions. For more information, check the documentation to learn about GraphQL Subscription.

Let's start implementing the GraphQL Client with Apollo. The first step is to create a new file in the src folder:

📂 realtime-poll
 └ 📁 node_modules
   📁 package-lock.json
   📁 package.json
   📁 public
   📁 README.md
   📂 src
    └ apollo.js

Open the newly created file, apollo.js, and import the following packages:

import { ApolloClient, HttpLink, InMemoryCache, split } from "@apollo/client";
import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
import { createClient } from "graphql-ws";
import { getMainDefinition } from "@apollo/client/utilities";

After that, store your application endpoint in a separate variable. Replace the value "realtime-poll-example.hasura.app" with the URL of your application.

As we mentioned earlier, GraphQL Subscriptions use the WebSocket protocol, so we need two links. We will use one link, httpURL, for queries and mutations and the other, wsURI, for subscriptions.

const GRAPHQL_ENDPOINT = "realtime-poll-example.hasura.app";

const scheme = (proto) =>
  window.location.protocol === "https:" ? `${proto}s` : proto;

const wsURI = `${scheme("ws")}://${GRAPHQL_ENDPOINT}/v1/graphql`;
const httpURL = `${scheme("https")}://${GRAPHQL_ENDPOINT}/v1/graphql`;

We also have a function (splitter) that determines which link to use. If the operation is a query or mutation, it uses the HTTP link. Otherwise, it uses the WebSocket link.

const splitter = ({ query }) => {
  const { kind, operation } = getMainDefinition(query) || {};
  const isSubscription =
    kind === "OperationDefinition" && operation === "subscription";
  return isSubscription;
};

GraphQLWsLink enables us to execute the subscriptions. The createClient constructor receives the WebSocket link and additional connection options as parameters. Then, we pass the value returned by createClient to the GraphQLWsLink constructor.

const cache = new InMemoryCache();
const options = { reconnect: true };

const wsLink = new GraphQLWsLink(createClient({ url: wsURI, connectionParams: { options } }));

We are left with:

• setting up the HTTP link for queries and mutation
• using the splitter function
• creating the ApolloClient

The split function takes the splitter function we wrote earlier and the two links as arguments. We pass the link returned by the "split" function as an argument to the ApolloClient constructor.

const httpLink = new HttpLink({ uri: httpURL });
const link = split(splitter, wsLink, httpLink);
const client = new ApolloClient({ link, cache });

Lastly, we export the client so we can use it for queries, mutations and subscriptions.

export default client;

You can see the complete code in this gist.

GraphQL Operations

We will use a couple of GraphQL queries, mutations and subscriptions in the application. They will also be displayed on the homepage of the application.

As a result, we will store them in a separate file and import them where necessary.

Go to the src folder and create a new file named GraphQL.jsx.

📂 realtime-poll
 └ 📁 node_modules
   📁 package-lock.json
   📁 package.json
   📁 public
   📁 README.md
   📂 src
    └ GraphQL.jsx

Open GraphQL.jsx and add the following imports:

import gql from "graphql-tag";
import React from "react";
import { Card } from "react-bootstrap";

We need gql so the GraphQL queries, mutations, and subscriptions can be parsed into the standard GraphQL AST. We also need React and the Card component because we will render the GraphQL query, mutation, and subscription strings on the page.

Get Polls

The application needs a query to fetch all the polls from the database.

const QUERY_GET_POLL = gql`
  query {
    poll(limit: 10) {
      id
      question
      options(order_by: { id: desc }) {
        id
        text
      }
    }
  }
`;

The above query returns 10 polls along with their id, question and options (answers). The options are ordered in descending order by the id.

Vote

Since it's a poll, there should be a way to pick an answer and vote.

const MUTATION_VOTE = gql`
  mutation vote($optionId: uuid!, $userId: uuid!) {
    insert_vote(
      objects: [{ option_id: $optionId, created_by_user_id: $userId }]
    ) {
      returning {
        id
      }
    }
  }
`;

The above mutation inserts a new vote into the database.

Real-time Poll Results

The voting application displays the results in real-time with the help of this subscription:

const SUBSCRIPTION_RESULT = gql`
  subscription getResult($pollId: uuid!) {
    poll_results(
      order_by: { option_id: desc }
      where: { poll_id: { _eq: $pollId } }
    ) {
      option_id
      option {
        id
        text
      }
      votes
    }
  }
`;

These are the GraphQL operations used by the application to display the polls, allow the users to vote and show the results in real-time.

The file also contains:

• two mutations to create a new user and mark the user online
• one subscription to display the number of online users in real-time

You can find the complete code for GraphQL.jsx in this gist.

Poll Implementation

The next step is to implement the Poll. Create a new file Poll.jsx in the src folder.

📂 realtime-poll
 └ 📁 node_modules
   📁 package-lock.json
   📁 package.json
   📁 public
   📁 README.md
   📂 src
    └ Poll.jsx

The Poll.jsx file will contain two components:

• PollQuestion which represents the poll itself and it handles the voting
• Poll which renders the poll question and answers

Open the newly created file and add the following imports:

import { useMutation, useQuery } from "@apollo/client";
import React, { useEffect, useState } from "react";
import { Button, Form } from "react-bootstrap";
import { Error, Loading } from "./Components";
import { MUTATION_VOTE, QUERY_GET_POLL } from "./GraphQL";
import { Result } from "./Result";

The first line imports the two hooks from the Apollo Client that allow you to execute queries and mutations. We import React and its two default hooks on the second line, whereas on the third line, we import two Bootstrap components.

The last three lines import custom React components, GraphQL Queries, and Mutations. They do not exist yet, but we will implement them later.

Poll Question Component

The next step is to implement the component for the poll question. The "PollQuestion" component handles the voting process. After your imports, write the following code:

const PollQuestion = ({ poll, userId }) => {
    const defaultState = {
      optionId: "",
      pollId: poll.id,
      voteBtnText: "🗳 Vote",
      voteBtnStyle: "primary",
    };
    const [state, setState] = useState(defaultState);
    const [vote, { data, loading, error }] = useMutation(MUTATION_VOTE);
};

In the above code, we set the default state for the poll. When someone visits the poll for the first time, there should not be any answer selected. Also, the button should display "🗳 Vote".

The image illustrates what the poll looks like with the default state.

We also use the useMutation hook so people can vote. The hook returns an array that contains two elements. The first element (vote) is a function that we can call to run the mutation. The second one is an object which we can destructure further.

We need to update the optionId each time a user selects an answer. For example, if the user selects "Vue" in this poll, we set the optionId to the id of that option.

const handleOptionChange = (e) => {
    const optionId = e.currentTarget.value;
    setState((prev) => ({ ...prev, optionId }));
};

Let's move on to writing the logic for handling a vote submission. First, we need to ensure the users cannot submit an empty form. If the user did not select an answer, the button becomes yellow and prompts the user to choose an answer and try again.

If an answer is selected, we call the vote function returned by the useMutation hook. We pass the id of the selected answer and the id of the user that voted.

const handlesubmitVote = (e) => {
    e.preventDefault();

    if (!state.optionId) {
      setState({
        voteBtnText: "✋ Select an option and try again",
        voteBtnStyle: "warning",
      });
      return;
    }

    setState({
      voteBtnText: "🗳️ Submitting",
      voteBtnStyle: "info",
    });

    vote({
      variables: {
        optionId: state.optionId,
        userId,
      },
    });
};

If the vote is successful, we update the button state accordingly. After 5 seconds, we reset the state of the button so the users can vote again. If there is an error, the button will highlight that.

The useEffect hook runs each time the value of data or error changes.

useEffect(() => {
    if (data) {
      setState({
        voteBtnText: "👍 Done",
        voteBtnStyle: "success",
      });

      //  Re-authorize to vote after 5 seconds
      let timer = setTimeout(() => {
        setState({
          voteBtnText: "🗳️ Vote",
          voteBtnStyle: "primary",
        });
      }, 5000);

      return () => clearTimeout(timer);
    }

    if (error) {
      setState({
        voteBtnText: "Error 😞 Try again",
        voteBtnStyle: "danger",
      });
    }
}, [data, error]);

Lastly, we render the form, poll options, and the voting button.

return (
    <div className="textLeft">
      <h3>{poll.question}</h3>
      <Form
        className="pollForm textLeft"
        onSubmit={(e) => {
          handlesubmitVote(e);
        }}
      >
        {poll.options.map(({ id, text }) => (
          <Form.Check
            custom
            type="radio"
            name="voteCandidate"
            id={id}
            key={id}
            value={id}
            label={text}
            onChange={handleOptionChange}
          />
        ))}
        <Button
          className="voteBtn info"
          variant={state.voteBtnStyle}
          type="submit"
        >
          {state.voteBtnText}
        </Button>
      </Form>
    </div>
);

We are done with the PollQuestion component. You can find the complete code for PollQuestion in this gist.

Poll Component

The Poll component renders the poll question and the results. Let's start by calling the useQuery hook with the GraphQL Query string that returns all the polls.

export const Poll = ({ userId }) => {
    const { data, loading, error } = useQuery(QUERY_GET_POLL);

    if (loading) return <Loading />;
    if (error) return <Error message={error.message} />;
};

The data property will contain an array with polls if the query is successful. Once we have the array, we map through it and render the polls and their corresponding answers.

return (
    <div className="container">
      {data?.poll.map((poll) => (
        <div key={poll.id} className="pollWrapper wd100">
          <div className="displayFlex">
            <div className="col-md-4 pollSlider">
              <PollQuestion poll={poll} userId={userId} />
            </div>
            <div className="col-md-8 pollresult">
              <Result pollId={poll.id} />
            </div>
          </div>
        </div>
      ))}
    </div>
);

If you look at the above code, you can observe that we use the Result component, which does not exist yet. In the next step, we will do just that!

You can find the complete code for the Poll file in this gist.

Result Component

Let's start by creating the Result.jsx in the src folder.

📂 realtime-poll
 └ 📁 node_modules
   📁 package-lock.json
   📁 package.json
   📁 public
   📁 README.md
   📂 src
    └ Result.jsx

Open the file and add the following imports:

import { useSubscription } from "@apollo/client";
import React from "react";
import { Chart } from "react-google-charts";
import { Error, Loading } from "./Components";
import { SUBSCRIPTION_RESULT } from "./GraphQL";

The first line imports the useSubscription hook, which we will use to display the poll results in real-time. On the second line, we import React and on the third line we import the Chart component. The last two lines import two custom components and the GraphQL Subscription string.

Write the following code after the imports:

export const Result = ({ pollId }) => {
    const { data, loading, error } = useSubscription(SUBSCRIPTION_RESULT, {
      variables: { pollId },
    });

    const hasResults = data?.poll_results.length > 0;

    if (loading) return <Loading />;
    if (error) return <Error message={error.message} />;

    return (
      <div>
        {hasResults ? <PollChart data={data?.poll_results} /> : <p>No result</p>}
      </div>
    );
};

The "Result" component takes a poll ID as a prop so it can display the results for that specific poll.

In the first line, we call the useSubscription hook with the poll ID. If the call is successful, the data property will contain an array with the poll results. Also, all the new votes will be reflected in the data property. The array with the poll results updates each time a new vote is submitted.

Before displaying the poll results, we check if there are any results. If there are, we display the results. If not, we show a "No result" string.

If you look at the code, you can see that we use a PollChart component. You can find the code for PollChart and the complete code for Result.jsx in this gist.

The article focuses on the essential parts of the frontend implementation. It highlights how to implement the trickier bits. You can browse the complete application code in this GitHub Repository.

Conclusion

At this point, you have a full-stack application without writing any backend code. Hasura provides a helpful user interface that you can use to build your API. As a result, it simplifies and shortens the process of building a GraphQL API.

You can:

• see see a live demo of the application
• explore the backend
• browse the complete code in this GitHub Repository

If you are interested, I also wrote about building an e-commerce backend with minimal code.

Thanks for reading! If you want to keep in touch, let's connect on Twitter @catalinmpit. I also publish articles regularly on my blog catalins.tech if you want to read more content from me.

These days, many people use chat applications to communicate with team members, friends, and family via their smart phones. This makes these messaging applications an essential medium of communication.

There is also high demand for intuitive and powerful user interfaces with state of the art features. The user interface (or UI) is the most impactful aspect of the overall user experience, so it's important to get right.

Flutter app development has taken the world by storm in terms of cross-platform mobile application development. You can use it to create pixel-perfect UIs, and many development companies use Flutter today.

In this tutorial, I am going to introduce you to a mix of both: we're going to build a chat app UI entirely on the Flutter/Dart coding environment. Along with learning the awesome Chat UI implementation in Flutter, we will also learn how its coding workflows and structures work.

So, let's get started!

How to Create a New Flutter Project

First, we need to create a new Flutter project. For that, make sure that you've installed the Flutter SDK and other Flutter app development-related requirements.

If everything is properly set up, then in order to create a project we can simply run the following command in our desired local directory:

flutter create ChatApp

After we've set up the project, we can navigate inside the project directory and execute the following command in the terminal to run the project in either an available emulator or an actual device:

flutter run

After it's been successfully built, we will get the following result in the emulator screen:

How to Create the Main Home Screen UI

Now, we are going to start building the UI for our chat application. The Main Home Screen will contain 2 sections:

• the conversation screen, which we are going to implement as a separate page, and
• a bottom navigation bar.

First, we need to make some simple configurations to the default boilerplate code in the main.dart file. We'll remove some default code and add the simple MaterialApp pointing to the empty Container as a home page for now:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: Container(),
    );
  }
}

Now in place of the empty Container widget, we are going to call the HomePage screen widget. But first, we need to implement the screen.

How to Build the Main Home Screen

Inside the ./lib directory of our root project folder, we need to create a folder called ./screens. This folder will hold all the dart files for different screens.

Inside ./lib/screens/ directory, we need to create a file called homePage.dart. Inside the homePage.dart file, we need to add the basic Stateless widget code as shown in the code snippet below:

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Center(child: Text("Chat")),
      ),

    );
  }
}

Now, we need to call the HomePage class widget in the main.dart file as shown in the code snippet below:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

Now we will get the result as shown in the emulator screenshot below:

How to Build the Bottom Navigator Bar

Now, we are going to place a Bottom Navigation menu on the HomePage screen. For that, we are going to use the BottomNavigationBar widget in the bottomNavigationBar parameter provided by the Scaffold widget.

Here's the overall code implementation:

return Scaffold(
      body: Container(
        child: Center(child: Text("Chat")),
      ),
      bottomNavigationBar: BottomNavigationBar(
        selectedItemColor: Colors.red,
        unselectedItemColor: Colors.grey.shade600,
        selectedLabelStyle: TextStyle(fontWeight: FontWeight.w600),
        unselectedLabelStyle: TextStyle(fontWeight: FontWeight.w600),
        type: BottomNavigationBarType.fixed,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.message),
            title: Text("Chats"),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.group_work),
            title: Text("Channels"),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.account_box),
            title: Text("Profile"),
          ),
        ],
      ),
    );

Here, we have configured BottomNavigationBar with various style parameters and kept our Navigation menu item in the items parameter. For the body parameter, we have just used a simple Container with a Text widget.

Now we will get the bottom navbar as shown in the emulator screenshot below:

Now that the bottom navigation is done, we can go ahead and implement the conversation list section just above the bottom navbar.

How to Build the Conversation List Screen

Here, we are going to create the conversation list section which will contain a header section, a search bar, and the conversation list view.

First, inside the ./lib/screens folder, we need to create a new dart file called chatPage.dart. Then, add a simple stateful widget class template inside as shown in the code snippet below:

import 'package:flutter/material.dart';

class ChatPage extends StatefulWidget {
  @override
  _ChatPageState createState() => _ChatPageState();
}

class _ChatPageState extends State<ChatPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Center(child: Text("Chat")),
      ),
    );
  }
}

Now, we need to call the chatPage class widget in place of the Container widget in homePage.dart as shown in the code snippet below:

return Scaffold(
      body: ChatPage(),
      bottomNavigationBar: BottomNavigationBar(

This will give us the following result as shown in the emulator below:

How to Build a Conversation List Page Header

Now, we are going to add the header to the Conversation list section which will have a text header and a button. The complete UI implementation code is provided in the code snippet below:

return Scaffold(
      body: SingleChildScrollView(
        physics: BouncingScrollPhysics(),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            SafeArea(
              child: Padding(
                padding: EdgeInsets.only(left: 16,right: 16,top: 10),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Text("Conversations",style: TextStyle(fontSize: 32,fontWeight: FontWeight.bold),),
                    Container(
                      padding: EdgeInsets.only(left: 8,right: 8,top: 2,bottom: 2),
                      height: 30,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(30),
                        color: Colors.pink[50],
                      ),
                      child: Row(
                        children: <Widget>[
                          Icon(Icons.add,color: Colors.pink,size: 20,),
                          SizedBox(width: 2,),
                          Text("Add New",style: TextStyle(fontSize: 14,fontWeight: FontWeight.bold),),
                        ],
                      ),
                    )
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );

Here, we have used the SingleChildScrollView so that the body section of the chatPage.dart is entirely scrollable.

Then, we have used the BouncingScrollPhysics instance to give the bouncing effect when a user's scrolling reaches the end or beginning.

Next, we have added a Text widget and a Container to display the bottom at the right-hand side.

Lastly, we have a Column widget as a child of the SingleChildScrollView widget so everything will appear vertically on the screen.

This will give us the following result as shown in the emulator below:

Now, we are going to add a search bar just below the Header section.

How to Add the Search Bar

In the Column widget from before, we are going to add a Search bar widget just below the Header UI section. So, as a second child of the Column widget, we need to insert the following code provided in the code snippet below:

Padding(
  padding: EdgeInsets.only(top: 16,left: 16,right: 16),
  child: TextField(
    decoration: InputDecoration(
      hintText: "Search...",
      hintStyle: TextStyle(color: Colors.grey.shade600),
      prefixIcon: Icon(Icons.search,color: Colors.grey.shade600, size: 20,),
      filled: true,
      fillColor: Colors.grey.shade100,
      contentPadding: EdgeInsets.all(8),
      enabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(20),
          borderSide: BorderSide(
              color: Colors.grey.shade100
          )
      ),
    ),
  ),
),

This will give us the following result as shown in the emulator below:

How to Build the Conversation List

Now that we have the Header section and a Search bar, we are going to implement the conversation list section.

For that, we need to implement a class object model to store the instances of conversation lists.

So inside the ./lib folder, we need to create a new folder called ./models. Inside ./models, we need to create a file called chatUsersModel.dart.

In the model file, we need to create a model object class as shown in the code snippet below:

import 'package:flutter/cupertino.dart';

class ChatUsers{
  String name;
  String messageText;
  String imageURL;
  String time;
  ChatUsers({@required this.name,@required this.messageText,@required this.imageURL,@required this.time});
}

The object will house the user's name, text message, image URL, and time.

Next we need to create a list of users inside the chatPage.dart as shown in the code snippet below:

class _ChatPageState extends State<ChatPage> {
  List<ChatUsers> chatUsers = [
    ChatUsers(text: "Jane Russel", secondaryText: "Awesome Setup", image: "images/userImage1.jpeg", time: "Now"),
    ChatUsers(text: "Glady's Murphy", secondaryText: "That's Great", image: "images/userImage2.jpeg", time: "Yesterday"),
    ChatUsers(text: "Jorge Henry", secondaryText: "Hey where are you?", image: "images/userImage3.jpeg", time: "31 Mar"),
    ChatUsers(text: "Philip Fox", secondaryText: "Busy! Call me in 20 mins", image: "images/userImage4.jpeg", time: "28 Mar"),
    ChatUsers(text: "Debra Hawkins", secondaryText: "Thankyou, It's awesome", image: "images/userImage5.jpeg", time: "23 Mar"),
    ChatUsers(text: "Jacob Pena", secondaryText: "will update you in evening", image: "images/userImage6.jpeg", time: "17 Mar"),
    ChatUsers(text: "Andrey Jones", secondaryText: "Can you please share the file?", image: "images/userImage7.jpeg", time: "24 Feb"),
    ChatUsers(text: "John Wick", secondaryText: "How are you?", image: "images/userImage8.jpeg", time: "18 Feb"),
  ];

Now that we have the mock users' conversation list data, we can apply it to the conversation list to create a list view.

How to Make a Separate Class Widget for Individual Conversation

Here, we are going to make a separate component widget for the individual items in the conversation list view.

For that, inside ./lib create a folder called ./widgets. And inside ./widgets we need to create a file called conversationList.dart. Inside the new widget file, we can use the code from the following code snippet:

import 'package:flutter/material.dart';

class ConversationList extends StatefulWidget{
  String name;
  String messageText;
  String imageUrl;
  String time;
  bool isMessageRead;
  ConversationList({@required this.name,@required this.messageText,@required this.imageUrl,@required this.time,@required this.isMessageRead});
  @override
  _ConversationListState createState() => _ConversationListState();
}

class _ConversationListState extends State<ConversationList> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: (){
      },
      child: Container(
        padding: EdgeInsets.only(left: 16,right: 16,top: 10,bottom: 10),
        child: Row(
          children: <Widget>[
            Expanded(
              child: Row(
                children: <Widget>[
                  CircleAvatar(
                    backgroundImage: NetworkImage(widget.imageUrl),
                    maxRadius: 30,
                  ),
                  SizedBox(width: 16,),
                  Expanded(
                    child: Container(
                      color: Colors.transparent,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text(widget.name, style: TextStyle(fontSize: 16),),
                          SizedBox(height: 6,),
                          Text(widget.messageText,style: TextStyle(fontSize: 13,color: Colors.grey.shade600, fontWeight: widget.isMessageRead?FontWeight.bold:FontWeight.normal),),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Text(widget.time,style: TextStyle(fontSize: 12,fontWeight: widget.isMessageRead?FontWeight.bold:FontWeight.normal),),
          ],
        ),
      ),
    );
  }
}

This widget file takes the user's name, text message, image URL, time, and a Boolean message type value as parameters. And it returns the template containing the values.

In the chatPage.dart, inside the ListView widget, we need to call the ConversationList widget by passing the required parameters as shown in the code snippet below:

ListView.builder(
  itemCount: chatUsers.length,
  shrinkWrap: true,
  padding: EdgeInsets.only(top: 16),
  physics: NeverScrollableScrollPhysics(),
  itemBuilder: (context, index){
    return ConversationList(
      name: chatUsers[index].name,
      messageText: chatUsers[index].messageText,
      imageUrl: chatUsers[index].imageURL,
      time: chatUsers[index].time,
      isMessageRead: (index == 0 || index == 3)?true:false,
    );
  },
),

Note that this ListView widget is to keep as the first child of the Column widget in the chatPage screen.

This will give us the following result as shown in the emulator below:

This completes the UI implementation of our Conversation List Screen and Main Home page screen as a whole. Now, we'll move on to the implementation of the chat details screen.

How to Build a Chat Detail Screen

Now, we are going to create a chat detail screen. For that, we need to create a new file called chatDetailPage.dart inside the ./lib/screens/ folder. For now, we are just going to add the basic code as shown in the code snippet below:

import 'package:flutter/material.dart';

class ChatDetailPage extends StatefulWidget{
  @override
  _ChatDetailPageState createState() => _ChatDetailPageState();
}

class _ChatDetailPageState extends State<ChatDetailPage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Chat Detail"),
      ),
      body: Container()
    );
  }
}

Here, we have returned a basic AppBar with Text and an empty Container as the body of the Scaffold widget.

Now, we are going to add navigation to ChatDetailPage on the GestureHandler widget's onTap method in the conversationList.dart widget file as shown in the code snippet below:

GestureDetector(
      onTap: (){
        Navigator.push(context, MaterialPageRoute(builder: (context){
          return ChatDetailPage();
        }));
      },

We can now navigate to the Chat detail screen as shown in the emulator demo below:

How to Build a Custom App Bar for Chat Detail Screen

Here, we are going to add a custom App bar at the top of the chat detail screen. For that, we are going to use the AppBar widget with various parameter configurations as shown in the code snippet below:

return Scaffold(
      appBar: AppBar(
        elevation: 0,
        automaticallyImplyLeading: false,
        backgroundColor: Colors.white,
        flexibleSpace: SafeArea(
          child: Container(
            padding: EdgeInsets.only(right: 16),
            child: Row(
              children: <Widget>[
                IconButton(
                  onPressed: (){
                    Navigator.pop(context);
                  },
                  icon: Icon(Icons.arrow_back,color: Colors.black,),
                ),
                SizedBox(width: 2,),
                CircleAvatar(
                  backgroundImage: NetworkImage("<https://randomuser.me/api/portraits/men/5.jpg>"),
                  maxRadius: 20,
                ),
                SizedBox(width: 12,),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text("Kriss Benwat",style: TextStyle( fontSize: 16 ,fontWeight: FontWeight.w600),),
                      SizedBox(height: 6,),
                      Text("Online",style: TextStyle(color: Colors.grey.shade600, fontSize: 13),),
                    ],
                  ),
                ),
                Icon(Icons.settings,color: Colors.black54,),
              ],
            ),
          ),
        ),
      ),
      body: Container()
    );

This will give us the following result as shown in the emulator below:

How to Implement the Bottom Text Box

At the bottom of the chat detail screen, we need to add a messaging section that will contain a text editor and a button to send the message.

For this, we are going to use the Align widget and align the child inside the widget with the bottom of the screen. The overall code is provided in the code snippet below:

body: Stack(
        children: <Widget>[
          Align(
            alignment: Alignment.bottomLeft,
            child: Container(
              padding: EdgeInsets.only(left: 10,bottom: 10,top: 10),
              height: 60,
              width: double.infinity,
              color: Colors.white,
              child: Row(
                children: <Widget>[
                  GestureDetector(
                    onTap: (){
                    },
                    child: Container(
                      height: 30,
                      width: 30,
                      decoration: BoxDecoration(
                        color: Colors.lightBlue,
                        borderRadius: BorderRadius.circular(30),
                      ),
                      child: Icon(Icons.add, color: Colors.white, size: 20, ),
                    ),
                  ),
                  SizedBox(width: 15,),
                  Expanded(
                    child: TextField(
                      decoration: InputDecoration(
                        hintText: "Write message...",
                        hintStyle: TextStyle(color: Colors.black54),
                        border: InputBorder.none
                      ),
                    ),
                  ),
                  SizedBox(width: 15,),
                  FloatingActionButton(
                    onPressed: (){},
                    child: Icon(Icons.send,color: Colors.white,size: 18,),
                    backgroundColor: Colors.blue,
                    elevation: 0,
                  ),
                ],

              ),
            ),
          ),
        ],
      ),

This will give us a messaging section with a text field to type the messages and a button to send the messages:

We also have a button to the left which we can use to add other menu options for messaging.

How to Set Up the Messages List Section in Chat Screen

Now, we are going to create the UI for messages appearing in the chat detail screen.

First, we need to create a model that reflects the message instance object.

For that, we need to create a file called chatMessageModel.dart inside the ./models folder and define the class object as follows:

import 'package:flutter/cupertino.dart';

class ChatMessage{
  String messageContent;
  String messageType;
  ChatMessage({@required this.messageContent, @required this.messageType});
}

The class object accepts the message content and message type (whether sender or receiver as instance values.

Now in the chatDetailPage.dart, we need to create a list of messages to display as shown in the code snippet below:

List<ChatMessage> messages = [
    ChatMessage(messageContent: "Hello, Will", messageType: "receiver"),
    ChatMessage(messageContent: "How have you been?", messageType: "receiver"),
    ChatMessage(messageContent: "Hey Kriss, I am doing fine dude. wbu?", messageType: "sender"),
    ChatMessage(messageContent: "ehhhh, doing OK.", messageType: "receiver"),
    ChatMessage(messageContent: "Is there any thing wrong?", messageType: "sender"),
  ];

Next, we are going to create a list view for the messages on top of the Stack widget's children, above the Align widget, as shown in the code snippet below:

body: Stack(
        children: <Widget>[
          ListView.builder(
            itemCount: messages.length,
            shrinkWrap: true,
            padding: EdgeInsets.only(top: 10,bottom: 10),
            physics: NeverScrollableScrollPhysics(),
            itemBuilder: (context, index){
              return Container(
                padding: EdgeInsets.only(left: 16,right: 16,top: 10,bottom: 10),
                child: Text(messages[index].messageContent),
              );
            },
          ),
          Align(

Now the messages will appear in list form as shown in the emulator screenshot below:

Now, we have the messages appearing on the screen but they are not styled the way we want in the chatting screen.

How to Style and Position the Messages Based on Sender and Receiver

Now, we are going to style the message list so that it appears as a chat message bubble. We're also going to position them based on the message type using the Align widget as shown in the code snippet below:

ListView.builder(
  itemCount: messages.length,
  shrinkWrap: true,
  padding: EdgeInsets.only(top: 10,bottom: 10),
  physics: NeverScrollableScrollPhysics(),
  itemBuilder: (context, index){
    return Container(
      padding: EdgeInsets.only(left: 14,right: 14,top: 10,bottom: 10),
      child: Align(
        alignment: (messages[index].messageType == "receiver"?Alignment.topLeft:Alignment.topRight),
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20),
            color: (messages[index].messageType  == "receiver"?Colors.grey.shade200:Colors.blue[200]),
          ),
          padding: EdgeInsets.all(16),
          child: Text(messages[index].messageContent, style: TextStyle(fontSize: 15),),
        ),
      ),
    );
  },
),

This will give us the following result as shown in the emulator below:

You can see an overall demo of the app's entire UI below:

Congrats! We have built an intuitive and modern chat app UI entirely in the Flutter and Dart ecosystem.

Recap

Social messaging applications are an essential communication medium nowadays. Equipped with state of the art and powerful chat interfaces with audio and video calling, image and file attachments, and many more, these chat applications have made communication much more efficient. These apps have made the world smaller for us.

The major objective of this article was to show you how to develop a simple intuitive UI for chat applications with a modern design in the Flutter ecosystem. The step-by-step implementation provided a detailed showcase of the app's UI and also gave an overview of the Flutter coding environment.

I hope this tutorial helps you create your next chat application using Flutter.

You can also get inspiration for a chat app UI and feature development from top Flutter chat app templates out there in the market. Make sure to check them out as well.

Two weeks ago I published an article containing 15 project ideas that you can build to level up your coding skills, and people were very excited about that resource.

Also, the app-ideas repository has gotten almost 3000 stars since I published that article. That’s insane! ?

Thank you all for that! ?

In this post we’ll go over some new projects that were added to the repository since then.

As a quick reminder, all of the projects are divided into three tiers based on the knowledge and experience required to complete them. Check out the tiers description in the repository.

Below you’ll find 2 Beginner, 4 Intermediate and 3 Advanced project ideas.

1. CALCULATOR

Tier: 1 — Beginner

Calculators are not only one of the most useful tools available, but they are also a great way to understand UI and event processing in an application. In this problem you will create a calculator that supports basic arithmetic calculations on integers.

The styling is up to you so use your imagination and get creative! You might also find it worth your time to experiment with the calculator app on your mobile device to better understand basic functionality and edge cases.

Constraints

• You may not use the eval() function to execute calculations

User Stories

• User can see a display showing the current number entered or the result of the last operation.
• User can see an entry pad containing buttons for the digits 0–9, operations — ‘+’, ‘-’, ‘/’, and ‘=’, a ‘C’ button (for clear), and an ‘AC’ button (for clear all).
• User can enter numbers as sequences up to 8 digits long by clicking on digits in the entry pad. Entry of any digits more than 8 will be ignored.
• User can click on an operation button to display the result of that operation on: the result of the preceeding operation and the last number entered OR the last two numbers entered OR * the last number entered
• User can click the ‘C’ button to clear the last number or the last operation. If the users last entry was an operation the display will be updated to the value that preceded it.
• User can click the ‘AC’ button to clear all internal work areas and to set the display to 0.
• User can see ‘ERR’ displayed if any operation would exceed the 8 digit maximum.

Bonus features

• User can click a ‘+/-’ button to change the sign of the number that is currently displayed.
• User can see a decimal point (.) button on the entry pad that allows floating point numbers up to 3 places to be entered and operations to be carried out to the maximum number of decimal places entered for any one number.

Useful links and resources

• Calculator (Wikipedia)
• MDN

Example projects

2. RECIPE APP

Tier: 1 — Beginner

You might not have realized this, but recipes are nothing more than culinary algorithms. Like programs, recipes are a series of imperative steps which, if followed correctly, result in a tasty dish.

The objective of the Recipe app is to help the user manage recipes in a way that will make them easy to follow.

Constraints

• For the initial version of this app, the recipe data may be encoded as a JSON file. After implementing the initial version of this app you may expand on this to maintain recipes in a file or database.

User Stories

• User can see a list of recipe titles
• User can click a recipe title to display a recipe card containing the recipe title, meal type (breakfast, lunch, supper, or snack), number of people it serves, its difficulty level (beginner, intermediate, advanced), the list of ingredients (including their amounts), and the preparation steps.
• User click a new recipe title to replace the current card with a new recipe.

Bonus features

• User can see a photo showing what the item looks like after it has been prepared.
• User can search for a recipe not in the list of recipe titles by entering the meal name into a search box and clicking a ‘Search’ button. Any open source recipe API may be used as the source for recipes (see The MealDB below).
• User can see a list of recipes matching the search terms
• User can click the name of the recipe to display its recipe card.
• User can see a warning message if no matching recipe was found.
• User can click a ‘Save’ button on the cards for recipes located through the API to save a copy to this apps recipe file or database.

Useful links and resources

• Using Fetch
• Axios
• The MealDB API

Example projects

3. DRAWING APP

Tier: 2 — Intermediate

Create digital artwork on a canvas on the web to share online and also export as images.

User Stories

• User can draw in a canvas using the mouse
• User can change the color
• User can change the size of the tool
• User can press a button to clear the canvas

Bonus features

• User can save the artwork as an image (.png, .jpg, etc format)
• User can draw different shapes (rectangle, circle, star, etc)
• User can share the artwork on social media

Useful links and resources

• Learn how to create a Drawing Application using p5js

Example projects

4. EMOJI TRANSLATOR

Tier: 2 — Intermediate

Emojis have become the lingua franca of modern society. They are a fun and fast way to communicate, but an also extremely expressive mechanism for communicating emotions and reactions.

The objective of the Emoji Translator app is to translate text entered by the user into an equivalent string of emojis, translated from one or more words in the original text, and words for which there is no corresponding emoji.

User Stories

• User can enter a string of words, numbers, and punctuation into a text box
• User can click a ‘Translate’ button to translate words in the entered text into their corresponding emojis.
• User can see a warning message if ‘Translate’ was clicked, but the input text box was empty or unchanged from the last translation.
• User can see text elements in the entered text translated to their equivalent emojis in an output text box. Text elements for which there is no emoji will be left unchanged.
• User can click a ‘Clear’ button to clear the input and output text boxes.

Bonus features

• Developer will implement an emoji synonym feature to allow the app to translate a wider variety of words to emoji.
• User can select the language the input text is entered from a dropdown list of languages.

Useful links and resources

Full Emoji List v12.0

Example projects

Emoji Translate

5. MEME GENERATOR APP

Tier: 2 — Intermediate

Allow users to generate custom memes by adding text over an image.

User Stories

• User can upload an image that will appear in a canvas
• User can add text in the top part of the image
• User can add text in the bottom part of the image
• User can select the color of the text
• User can select the size of the text
• User can save the resulting meme

Bonus features

• User can select the font-family for the text
• User can share the meme on social media (twitter, reddit, facebook, etc)
• User can drag the text around and place it wherever he wants on top of the image
• User can draw shapes on top of the image (circles, rectangles, or free drawing with the mouse)

Useful links and resources

Working with canvas is made very easy by the p5js library.

Example projects

Meme Generator by imgflip

6. TYPING PRACTICE

Tier: 2 — Intermediate

Some things are so obvious they can be easily overlooked. As a developer your ability to type quickly and accurately is one factor that influences your development productivity. The objective of the Typing Practice app is to provide you with typing practice along with metrics to allow you to measure your progress.

Typing practice displays a word which you must then type within a specific interval of time. If the word is incorrectly typed it stays on screen and the time interval remains the same. But when the word is correctly typed a new word is displayed and the time interval is slightly reduced.

Hopefully, this repetitive practice will help you improve both your typing speed and accuracy.

User Stories

• User can see the time interval words must be typed in displayed in the app window.
• User can see the number of successful attempts and the number of total attempts in a score box.
• User can click a ‘Start Practice’ button to start the practice session.
• User can see the prompt word displayed in a text box.
• User can begin typing the word in a text input box.
• User can see the letters that have been typed flash if an incorrect letter is entered and the text input box will be cleared.
• User can see the a message adjacent to the text input box indicating the user should try again if an incorrect letter is entered.
• User can see the number of total attempts incremented in the score box.
• User can see a congratulations message if the word is correctly typed.
• User can see the time interval words must be typed decremented by a small amount if the word is correctly typed.
• User can see the number of successful attempts incremented in the score box if the word was correctly typed.
• User can click a ‘Stop Practice’ button to stop the practice session.

Bonus features

• User can hear a unique audible tone signaling when a new word is displayed, a word is correctly entered, or an incorrect letter is typed in the word.
• User can login to the app
• User can see cumulative performance statistics across all of his/her practice sessions.

Useful links and resources

• keydown
• setInterval

Example projects

Twiddler Typing Tutor

7. ELEVATOR

Tier: 3 — Advanced

It’s tough to think of a world without elevators. Especially if you have to walk up and down 20 flights of stairs each day. But, if you think about it elevators were one of the original implementations of events and event handlers long before web applications came on the scene.

The objective of the Elevator app is to simulate the operation of an elevator and more importantly, how to handle the events generated when the buildings occupants use it. This app simulates occupants calling for an elevator from any floor and pressing the buttons inside the elevator to indicate the floor they wish to visit.

Constraints

• You must implement a single event handler for the up and down buttons on each floor. For example, if there are 4 floors a single event handler should be implemented rather than 8 (two buttons per floor).
• Similarly, a single event handler should be implemented for all buttons on the control panel in the elevator rather than a unique event handler for each button.

User Stories

• User can see a cross section diagram of a building with four floors, an elevator shaft, the elevator, and an up button on the first floor, up and down buttons on the second and third floors, and a down button on the fourth floor.
• User can see the elevator control panel with a button for each of the floors to the side of the diagram.
• User can click the up and down button on any floor to call the elevator.
• User can expect that clicking the up and down buttons on any floor to request the elevator will be queued and serviced in the sequence they were clicked.
• User can see the elevator move up and down the shaft to the floor it was called to.
• User can click the elevator control panel to select the floor it should travel to.
• User can expect the elevator to pause for 5 seconds waiting for a floor button on the control panel to be clicked. If a floor button isn’t clicked within that time the elevator will process the next call request.
• User can expect the elevator to return to the first floor when there are no requests to process.

Bonus features

• User can see a warning notification if the number of elevator requests exceeds the maximum number allowed. This limit is left to the developer.
• User can hear a sound when the elevator arrives at a floor.
• User can see an occupant randomly arrive at a floor to indicate when the user should click the up or down elevator call button on that floor.
• User can specify the time interval between new occupants arriving to call an elevator.

Useful links and resources

First-in, first out queue (Wikipedia)

Example projects

8. FAST FOOD SIMULATOR APP

Tier: 3 — Advanced

Fast Food app simulates the operation of a simple take-away restaurant and is designed to help the developer put their knowledge of Promises and SOLID design principles to work.

This app simulates customers of a take-away restaurant placing orders and and waiting for them to be prepared and delivered to a pickup counter. After placing the order the customer waits on the order to be announced before picking it up and proceeding to the dining area.

The user stories that make up this app center around four distinct roles:

• User — the end user using the application
• Customer — the simulated Customer
• Order Taker — the simulated Order Taker
• Cook — the simulated Cook
• Server — the simulated Server

This app has quite a few User Stories. Don’t be overwhelmed though. Take the time to sketch out not just the UI, but how the different actors (roles) interact and incrementally build the app following Agile principles.

Constraints

• Order tickets can be represented as two different types of Promises — one the Server waits on while the Cook prepares the order and another the Customer waits on while in the serving line.
• Use the native equivalent of JS Promises in whichever language you choose to develop in. JS developers should use native Promises and not async/await.
• Create this app using native language features. You may NOT use a simulation package or library.
• New customers arrive in the order line at a fixed interval of time. In other words, new customers arrive at a constant rate.
• Order tickets are fulfilled at a fixed interval of time as well. They are completed at a constant rate.

User Stories

Application Operation

• User can see an input area that allows the entry of the time interval for customer arrival and a time interval for the fulfillment of an order ticket by the cook.
• User can see a customized warning message if the customer arrival interval or the order fulfillment interval is incorrectly entered.
• User can start the simulation by clicking on a Start button.
• User can see an order line area containing a text box showing the number of customers waiting to place orders.
• User can see an order area containing text boxes showing the order number currently being taken.
• User can see a kitchen area containing a text box showing the order number that’s being prepared and a text box listing the waiting orders in sequence, along with a count of the number of waiting orders.
• User can see a Pickup area containing a text box showing the order number that’s currently available for pickup by the Customer and a text box showing the number of Customers waiting in the serving line.
• User can stop the simulation at any time by clicking a Stop button.

Bonus features

• User can specify how long it takes for an Order Taker to create an order ticket.
• User can specify how long it takes for the Server to deliver an order to the customer.
• User can specify the total amount of time the simulation is to run once the Start button has been clicked.
• User can see an animated view of Customers and orders as they move through the workflow.

Useful links and resources

• Fast Food Simulator — Logical Workflow
• Agile Manifesto & 12 Principles of Agile Software
• SOLID Principles Every Developer Should Know
• Using Promises
• Promise

9. SHELL GAME

Tier: 3 — Advanced

A Shell game is a classic gambling game that dates back to ancient Greece. Playing it requires three shells, a pea, hand dexterity by the operator, and keen observation skills on the part of the player. It’s also a classic con game since it’s easy for the operator to swindle the player. Thank goodness the latter isn’t our intent with this app.

This Shell game is intended to provide a graphical interface to the classical shell game and to provide the player with an honest game to play. Our game draws three shells on the canvas along with the pea, moves the pea under one, of the shells, and shuffles the shells for a specific interval of time. The user must then click on the shell they think the pea is hidden under. The user is allowed to continue guessing until the pea is located.

User Stories

• User can see the canvas with three shells and the pea.
• User can click the shell the pea is to be hidden under.
• User can see the pea move under the shell thats been clicked.
• User can click on a ‘Shuffle’ button to start an animated shuffling of the shells for 5 seconds.
• User can click on the shell she believes the pea is hidden under when the animation stops.
• User can see the shell that has been clicked rise to reveal if the pea is hidden under it.
• User can continue clicking shells until the pea is found.
• User can see a congratulations message when the pea is located
• User can start a new game by clicking a shell the pea is to be hidden under (step #2 above). The steps above are then repeated.

Bonus features

• User can see a score panel containing the number of wins and the number of games played.
• User can see the number of games played increase when the pea is hidden under a shell
• User can see the number of wins incremented when the pea is found on the first guess.
• User can see the shell hiding the pea to animate (color, size, or some other effect) when it is clicked (a correct guess).

Useful links and resources

• Shell Game (Wikipedia)
• Javascript HTML DOM Animation
• p5js Animation Library

Example projects

Conclusion

Don’t forget to check out the previous article and the repository if you want to find more application/project ideas.

Also, if the information from this article and from the repo was useful to you in any way, make sure you give it a star ?; this way others can find it and benefit too! Thank you!

Do you have any suggestions on how we could improve this project overall? Let us know! We’d love to hear your feedback!

You are welcomed to contribute with your own ideas! We can make this repository the go-to resource when it comes to app ideas.

Originally published at www.florin-pop.com.