My Hexaville
Spead the Word
flutter tic tac toe firebase multiplayer

Flutter Tic Tac Toe pt 3. Invites with FCM, Firebase Multiplayer


Hi, this is the final part of Flutter Tic Tac Toe series. Today we’re going to implement invites with FCM and a multiplayer game with Firebase

Invites

In this post, I described how to setup FCM in Flutter for both Android and iOS and how to handle basic push notifications

The way invites work is I have a list of users and for each one, I store an FCM token

flutter tic tac toe firebase multiplayer

When clicked on one, I send a push notification which looks like this

flutter tic tac toe firebase multiplayer

 

Now you might know that on Android, there’re push notification action buttons, which I used in Android native app for accepting/declining invites. iOS doesn’t have them, so invites are handles via that popup on both platforms

flutter tic tac toe firebase multiplayer

Might be not the most natural experience for Android, but you can create a Flutter plugin for Firebase which would allow you to handle push notifications differently on iOS/Android by having quick action buttons on Android, popup on iOS

Here’s the Flutter part. I store current user’s id, FCM token in shared preferences

Display Popup

This might seems like unnecessary overhead, just a tap on a push notification could work as an accept action, but we’re not just learning how to implement this particular case, rather learning Flutter by writing a Tic Tac Toe app, considering other possible cases

Now this one was a bit tricky. Because the code to display a popup is triggered inside of FCM listeners, that you can set up anywhere in your flow that you want.

That’s not an application context, but a context of a particular screen or part of a hierarchy. So if you call firebaseMessaging.configure in a nested screen, a context won’t be viable to create a popup in your launcher screen, which is opened on notification click. What you need to do is configure FCM in your launcher screen. Maybe there’s a way to get an application context, but I haven’t figured out yet how to

Also, you can see that timer to set a delay before displaying a popup. Again, without, it didn’t work, when I find a better solution/learn more about Flutter, I’ll replace it

Backend

I have this cloud function for sending invites/accepting them

All notifications have that default data payload, which makes it a data message if you don’t include a payload.notification value

I’m having an issue handling data messages on iOS, none of them are handled in fact. Don’t know why yet, but notification type works fine, that’s why I have all of my messages of notification type. Again proving my point of why you should test on both platforms all the time

 

Multiplayer Game

It’s implemented with Firebase, where I have a table of games. Id’s are generated by combining user id’s, keys are row_column with values of X or O.

flutter tic tac toe firebase multiplayer

Restart game code

And that’s it for Flutter Tic Tac Toe with Firebase. Its pretty basic now without any animations. In the following posts, I’m going to go through Flutter canvas animations and other interesting stuff

Dart Underscores

If you’ve read my previous posts, you know they bug me a lot. I thought about them and what I came up with is

Do I even need them?

If you’re an Android developer, you probably know about Google Android code guidelines, Hungarian notations in particularflutter tic tac toe firebase multiplayerIf you’re a beginner, you probably follow these thoughtlessly, thinking that you write a better code. But you don’t have to follow these unless you work at Google

So I saw a parallel between those Hungarian notations and underscores. After all, Dart is created by Google and they seem to like adding metadata in variable names

So my point is that you don’t need to worry about visibility unless you’re creating an API/library/model or other things exposed for usage. Many of screen’s functions/fields are not accessed from outside (StatefulWIdget, State<?>). It’s not like we’re going to create an instance of them and use its functions. Hence all functions, fields can be public. No underscores

Of course, if you’re writing a library or an API, you need private variables for encapsulation

Conclusion: around 50% of underscores can be removed with no effect what so ever!

Alright, you can get the source code here


About the Author Ihor Klimov

Formerly an Android developer, lately picked up some Flutter. This blog is everything that I find exciting about Android and Flutter development. Stay tuned and hope to see you again!

follow me on: