DEV Community: Wolfiz Solutions

How To Set Up Firebase with Flutter for iOS and Android Apps?

Wolfiz Solutions — Fri, 25 Feb 2022 05:27:23 +0000

we know that adding some important features to your app like authentication & registration is a pain in the neck and you are probably looking for some final fix for your data storage and registration process for the flutter project, then this article is a must-read for you.

Flutter is a rapidly growing technology in today's world. Each year we build abundant apps for our clients using Flutter. It allows us to develop cross-platform applications for all operating systems, however, it’s mostly used for Android and iOS. While developing different kinds of apps and software we often require authentication, registration (sign-in/sign-up), and data storage features, for instance in games you must save players' info and ranking. We generally use Firebase for this purpose, it’s also our team’s favorite tool to use with Flutter.

What is FireBase?

Firebase is a Google-backed application development software that allows developers to build iOS, Android, and Web apps. It provides tools for tracking analytics, reporting and fixing app crashes, creating marketing and product experiments.

Recently, we’ve successfully integrated Firebase in one of our flutter game apps “The Werewolves Escape” in which we have added a quick & smooth registration (sign-in/sign-up) process along with a leaderboard that keeps a record of players ranking and keeps the spirit of playing alive.

For the registration process, we’ve used Firebase authentication that provides backend services, ready-made UI libraries, and easy-to-use SDKs. It helps to authenticate users to your app using special passwords, phone numbers, prevalent identity providers like Google, Twitter, Facebook, etc.

Firebase Authentication strongly integrates with other Firebase services, and it leverages industry levels such as OAuth 2.0 and OpenID Connect, so it can be easily integrated with your custom backend.

For the leaderboard, we’ve utilized Firestore which is a NoSQL Database like a real-time database, but the difference lies in the structure of data storage. Real-time database stockpiles data in a JSON tree.

Here are some steps to create a new project on Firebase

Create a project file in the Firebase console.
Add two apps one for android and the other for IOS

For iOS

Register the IOS app to firebase with the bundle id of the App
Download Google Service-info for your app and add it to your project folder.
Complete the next steps on the firebase console.

For Android

Register your android app
Download the config file google services.json and set it in the application module of an android project.

Create Database

On the Firebase console from the left menu select the Database option to create a Cloud Firestore database. Select security rules for the database and then select test mode, it will make the database public, anyone can read and write to this database.

In Cloud Firestore we have a collection. A collection can have any number of Documents, which contain data. It scales automatically. The current scaling limit is around 1 million concurrent connections & approx.

How to add Rive animations in Flutter?

Wolfiz Solutions — Fri, 25 Feb 2022 05:18:37 +0000

Simple animations in Flutter are boring and obsolete, so let’s spice up the game and learn about a new tool that will change the whole landscape of your animations in any project.

Yes, I am talking about Rive. So, let’s get started!

What is Rive?

Rive, formally known as Flare, is a real-time interactive design and animation tool by 2 Dimensions that enables us to integrate awe-inspiring animations like a pro. Rive animations are platform-independent which means build once and utilize on multiple platforms. You can use this collaborative editor to construct motion graphics that react to different states and user intakes. Then upload your animations into Flutter apps, games, & websites with their weightless open-source runtimes.

Creating Animations In Rive

Rive offers an online editor/studio for designing animations. You can gain access to the Rive editor by visiting the official website. The Rive community has great potential and they always create something new. Plenty of pre-built animations is available for us to start diving into the captivating and interesting animated Rive world. You can use these straight or can modify them as per your needs.

We’ve experienced Rive in one of our flutter projects “The Werewolves Escape” a sliding puzzle game in which we have a character named Andrew. According to the plot Andrew got stuck in a deadly forest surrounded by werewolves and we have to play the game to make an escape for him. In this project, we have shown different emotions and physical movements of Andrew through Rive. His facial expressions are angry, sad, depressed, fearful, and weary, but as soon as he reaches the end, the expressions turn into a happy and excited person. With Rive, we also make his hands movement possible.

Getting Started With Rive

Getting started with Rive is straightforward. If you want to start from the base, just use the Rive console which is made for creating things from scratch. So, firstly let’s have a look at the primary controls of the Rive console.
Bones
Bone components are used for moving your character which is much similar to a skeleton. Just build Bones and then attach them to the path and watch the wondrous magic.
Nodes
Nodes are also one of the simple components of the console which enables transformations for instance rotation, scaling, and translation. You just need to select the Node and click on the specific place of your artboard to connect the node with any element.
Solo
If you need frame-by-frame animation, the solo will be your must-have. They are pretty much similar to the Node but they add the feature to fast toggle its child visibility. Just like Node, click on the Solo element and put it anywhere in your artboard. Then select all elements which you want to place in Solo and then from the animate window, select which child to show in which frame, that’s all.

It’s ascertained that Rive animations are effortless, robust, and maintainable. The integration is so easy and makes it truly possible to create a variety of intricate animations while sitting on a couch, can’t we?.