Let’s continue from the previous guide.
So far, we’ve discussed how to implement web sockets using serverless and tested with Flutter web. Again, this guide works the same whether it's a web or a mobile application.

Here, we need to discuss “how to plan for the database”.
This is what I’m thinking,

  • The user enters the chat room with a user name. …

AWS realtime using WebSocket and DynamoDB

We’ll finish up with UIs using Flutter Web.
Just to remind you, the Frontend tool can be anything that supports websocket. No need to be Flutter at all.

Here’s the plan.
Page 1: Simple text field that user can enter the id.
Page 2: Once the user enters the id, goes to this page, connects to the socket, and the page display all previous messages.

Please note: due to the time and complexity…

Here’s today's topic.

How do I use AWS real-time database in Flutter?

In fact, there are many other ways of implementing AWS real-time database if you are using javascript based frameworks or libraries such as React.
For example, you can use Amplify or AppSync. Since they provide a javascript version of AWS SDK, there are not many issues with the implementation.

How about Flutter? Amplify team just started supporting Flutter. Therefore there are not many services provided at this moment in 2020…

To complete the whole setups, we need to discuss the following.
Please feel free to skip if you already know a certain part.

  • Firebase project setup
  • Firebase setup in a flutter project
  • Firebase functions basics
  • How to use firebase functions in flutter web

No time to waste. Let’s get straight into it.

Firebase project setup

First, we need to install firebase cli tool.
If you need to install this, please refer to this link.
Once you’ve installed, make sure to log in using the terminal as well.

firebase login

Now, we’ll make a firebase project.
We could do it in the terminal but…

Here’s the topic for today.

“How should I route/navigate in a flutter web project?”

We’ll consider 3 types of routing methods here:

  • Flutter default routing
  • Dane Mackier’s routing
  • Fluro routing

Flutter’s default routing

First, we need to know we need such methods for routing in flutter web projects. We’ll start with the routing/navigating method that Flutter basically provides. Here’s the link to the official tutorial on how to do that.

Here’s the copy from the tutorial.

Let’s briefly go over the code.
What this tutorial is trying to show is to go to other pages using routes and onGenerateRoute.

First, when you look at the class _AppState, routes and onGeneratedRoute is…

Here’s the topic for today.

“How did I host a flutter web project?”

You can check out the Github repo here. Let’s get started right away.

Flutter basic setup

The first thing you are going to do is to make sure that you have flutter installed in your system. By 2020 September, the flutter web requires the beta version activated. For more info and the latest updates, check out this page here.
But I know that I’m a lazy sloth. Here are the setups.

flutter channel beta
flutter upgrade
flutter config — enable-web

Now, let’s create a project.

flutter create <PROJECT_NAME>

I just…

Taehoon Kim

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store