fireflutter 0.2.5

A free, open source, complete, rapid development package for creating Social apps, Chat apps, Community(Forum) apps, Shopping mall apps, and much more based on Firebase.

Fire Flutter

A free, open source, complete, rapid development package for creating Social apps, Chat apps, Community(Forum) apps, Shopping mall apps, and much more based on Firebase.

• Complete features.
  This package has complete features (see Features below) that most of apps require.

• Simple, easy and the right way.
  We want it to be deadly simple yet, right way for ourselves and for the developers in the world. We know when it gets complicated, our lives would get even more complicated.

• Real time.
  We design it to be real time. All the events like post and comment creation, voting(like, dislike), deletion would appears on all the user's phone immediately after the event.

• I am looking for community devleopers who can join this work. Please email me at [e-mail]

Table of contents

• Fire Flutter
• Features
• Installation
  • Running the example
  • Creating a new project
  • Firebase installation
    • iOS installation
  • Firebase Realtime Database Installation
• Packages
• User
  • User installation
  • Phone number sign-in
• User presence
  • User presence overview
  • User Presence Installation
  • User Presence Logic
• TODOs
  • Find Friends
• For developer
  • Building your app
  • Building fireflutter
  • Updating fireflutter while building your app
• Issues
  • firebase_database/permission-denied
  • Firebase realtime database is not working

Features

• User

  • User registration is done with Firebase Flutter UI.

• User presence

  • To know if a user is online or offline.

Installation

Running the example

• Do the Firebase installation.
• Git fork the fireflutter.

Creating a new project

• Do the Firebase installation.
• Edit platform version to platform :ios, '10.0' in Podfile.

Firebase installation

• Refer the instructions of FlutterFire Overview

iOS installation

• Download ios app's GoogleService-Info.plist. And save it under <root>/example/ios/Runnder, Then open Xcode and drag it under Runner.
  • Remember to update other settings like REVERSED_CLIENT_ID into Info.plist.
    • When you change the firebase project, you have to update all the related settings again.

Firebase Realtime Database Installation

• To install Firebase Realtime Database, enable it on Firebase console and put the security rules.

• Note, if you enable Firebase Realtime Database, you have to re-download and update the GoogleService-Info.plist.

  • You may need to update the GoogleService-Info.plist after enabling other features of the Firebase.

• Add the following security rules on firebase realtime database

{
  "rules": {
    "presence": {
      ".read": true,
      "$uid": {
        ".write": true
      }
    }
  }
}

Packages

• We use Getx for route & state management.
• We use FlutterFire UI for Firebase auth and other UI examples.
  • You may build your own UI.

User

User installation

• Do Firebase installation
• Enable Email/Password Sign-In method to login with email and password.
• Enable Google Sign-In method and add the following in Info.plist to login with Google account

<!-- Google Sign-in Section -->
<key>CFBundleURLTypes</key>
<array>
	<dict>
		<key>CFBundleTypeRole</key>
		<string>Editor</string>
		<key>CFBundleURLSchemes</key>
		<array>
			<!-- TODO Replace this value: -->
			<!-- Copied from GoogleService-Info.plist key REVERSED_CLIENT_ID -->
			<string>com.googleusercontent.apps.------------------------</string>
		</array>
	</dict>
</array>
<!-- End of the Google Sign-in Section -->

Phone number sign-in

• In most cases, you want to use Firebase Flutter UI for Firebase Sign-In and that's very fine. But when you do Phone Sign-In, it's not easy to handle errors. So, fireflutter provides simple service for this functionality.

• To use phone sign-in, enable it and add some test phone numbers.

• PhoneService has the service code of phone sign-in.

  • See example/lib/phone_sign_in folder for sample code. You can copy paste it in your projects.

• Fireflutter also provides UI widgets to make it easy to use in your app.

  • Simply add PhoneNumberInput widget to your screen and on code sent, move to sms code input page and add SmsCodeInput widget.
  • See example/lib/phone_sign_in_ui foler for sample code.

User presence

User presence overview

• More often, people want to know if their friends are online or not. Use this feature to know who is online. It has three status; 'online', 'offline', and 'away'.

User Presence Installation

• To make it work, install

  • Firebase Installation
  • Firebase Realtime Database Installation

• To begin with the presence functionality of users, call Presence.instance.activate().

• To stop(deactivate) the presence functionality, call Presence.instance.deactivate().

class _MainAppState extends State<MainApp> {
  @override
  void initState() {
    super.initState();
    Presence.instance.activate();
  }

  @override
  void dispose() {
    super.dispose();
    Presence.instance.activate(
      onError: (e) => print('--> Presence error: $e'),
    );
  }
}

• To know if a user is online, offline or away, use UserPresence widget.

UserPresence(
  uid: uid,
  onlineBuilder: () => Row(
    children: const [
      Icon(Icons.circle, color: Colors.green),
      Text('Online'),
    ],
  ),
  offlineBuilder: () => Row(
    children: const [
      Icon(Icons.circle, color: Colors.red),
      Text('Offline'),
    ],
  ),
  awayBuilder: () => Row(
    children: const [
      Icon(Icons.circle, color: Colors.yellow),
      Text('Away'),
    ],
  ),
),

User Presence Logic

• Run Presence.instance.activate() at start if you want to track the presence status of users.
• If user didn't login to the device, the user will be offline by default.
• If Presence is working, you will see the record in firebase realtime database data section in firebase console.
  • If no documents appears in firebase realtime database data section, then see the installation and issues.
• /presense/$uid document will be written only when user logs in and out.
• When app is closed, the user will be offline.

TODOs

Find Friends

• Idea: See if you are looking for a friend in a busy city. When you and your friend are connected, you can find each other by sharing geo location.
• Implementaion: put find button and when connected, display position in map and update the geo location.

For developer

Building your app

• Simple add it on pubspec dependency

Building fireflutter

• Follow the steps
  • fork
  • clone
  • create a branch
  • update fireflutter
  • push
  • pull request.

Updating fireflutter while building your app

• If you are going to use fireflutter, then simply add it on pubspec dependency.
• If you want to build fireflutter while you are building your app, then
  • fork fireflutter
  • add it as submodule in your project
  • add it as pubspec dependency with local path
  • when ever you want to update fireflutter, simple run <submodule-folder>/example/main.dart
  • after updating fireflutter, come back to your app and run your app.

Issues

• These are the common issues you may encount.
• If you have any issues, please create an git issue.

firebase_database/permission-denied

Unhandled Exception: [firebase_database/permission-denied] Client doesn't have permission to access the desired data.

• If you see this error, it means you didn't set the firebase database security rules properly. Refer Firebsae Realtime Database Installation

Firebase realtime database is not working

• Open GoogleService-Info.plist under ios/Runner and see if the key DATABASE_URL is present. If not, enable firebase realtime database and download the GoogleService-Info.plist again. Remember to update related settings once you download it again.