DEV Community: Codexlancers

Effortless Dart Coding with dart_extensions_pro

Codexlancers — Mon, 18 May 2026 04:30:00 +0000

Introduction
Introducing dart_extensions_pro a Dart package that offers a collection of handy extensions and helper functions designed to enhance the development process. By simplifying common tasks and providing streamlined solutions, it allows developers to write code more efficiently and focus on building features rather than repetitive tasks. Ideal for improving productivity, this package is a valuable tool for both novice and experienced programmers.

Key Features
📊 Comparison: Simplify comparison operations with intuitive extension methods.

📅** Date Handling:** Effortlessly manage date and time with a variety of helpful functions.

✍️ String Utilities: Enhance string manipulation with powerful utility functions.

📋 List Enhancements: Improve list handling with convenient extensions for common operations.

🧭 Navigation: Streamline navigation tasks with specialized navigation functions.

👆 Tap Gestures: Easily handle tap gestures to improve user interaction.

🔁 Iterable Enhancements: Optimize iterable processing with enhanced methods.

🎨 Color Conversion: Simplify color manipulations and conversions with dedicated functions.

🔢 Number Utilities: Access a range of number-related utilities for calculations and formatting.

🛠️ Utility Functions: Utilize various handy utility functions to simplify your coding experience.

Installation
Add dependency to your pubspec.yaml file & run Pub get

dependencies:
  dart_extensions_pro: ^0.0.1

And import package into your class file

import 'package:dart_extensions_pro/dart_extensions_pro.dart';
**Analytics**

Visit EXTENSIONS.md for a complete list of all the available extensions.

Extensions:                    271
Helper Classes:                7
Helper Functions & Getters:    21
Typedefs:                      7
Mixins:                        2

Here’s a quick preview of dart_extensions_pro,
String extension

'hello'.iscapitalize(); // Capitalizes first letter // Hello
'Copy this text'.copyTo(); // Copies string to clipboard
'test@example.com'.isValidEmail(); // Checks if valid email // true
'flutter'.reverse(); // Reverses string // rettulf
'madam'.isPalindrome(); // Checks for palindrome // true
'flutter example'.toCamelCase(); // Converts to camel case // FlutterExample
'{"name": "Flutter"}'.decodeJson(); // Parses JSON string to map // {name: Flutter}

Comparison extension


5.gt(3);  // true, checks if 5 is greater than 3
3.lt(5);  // true, checks if 3 is less than 5
5.eq(5);  // true, checks if 5 is equal to 5
3.lte(3); // true, checks if 3 is less than or equal to 3
5.gte(3); // true, checks if 5 is greater than or equal to 3
5.ne(3);  // true, checks if 5 is not equal to 3

Date extension

DateTime.now().isSameDate(DateTime(2023, 9, 14));  // true, checks if today matches the provided date
DateTime.now().isToday();  // true, checks if today is today
DateTime.now().isTomorrow();  // true, checks if today is tomorrow (unlikely)
DateTime.now().wasYesterday();  // true, checks if today is yesterday (false)
DateTime.now().addDays(5);  // adds 5 days to the current date
DateTime.now().addMonths(3);  // adds 3 months to the current date
DateTime.now().addYears(2);  // adds 2 years to the current date
DateTime.now().subtractDays(7);  // subtracts 7 days from the current date
DateTime.now().subtractMonths(1);  // subtracts 1 month from the current date
DateTime.now().subtractYears(1);  // subtracts 1 year from the current date

List extension

final list = [1, 2, 3] << 4;  // [1, 2, 3, 4], appends 4 to the list using the `<<` operator
list.replaceFirstWhere(10, (item) => item == 2);  // true, replaces the first occurrence of 2 with 10
list.replaceLastWhere(20, (item) => item > 1);  // true, replaces the last item greater than 1 with 20

Navigation extension

context.to(MyPage());  // Navigates to `MyPage` using `to()`
context.toNamed('/home');  // Navigates to the named route '/home' using `toNamed()`
context.back();  // Pops the current route using `back()`
context.backUntil((route) => route.isFirst);  // Pops routes until the first one using `backUntil()`
context.toWithReplace(AnotherPage());  // Replaces current route with `AnotherPage` using `toWithReplace()`
context.replaceWithNamed('/dashboard');  // Replaces the current route with named route '/dashboard' using `replaceWithNamed()`
context.toAndRemoveAll(HomePage(), (route) => false);  // Navigates to `HomePage` and removes all previous routes using `toAndRemoveAll()`
context.toNamedAndRemoveAll('/login', (route) => false);  // Navigates to named route '/login' and removes all previous routes using `toNamedAndRemoveAll()`

Gesture extension

widget.onInkTap(() => 'Tapped!'.logMsg());  // Adds an ink splash effect with `onInkTap()`
widget.onTap(() => 'Tapped!'.logMsg());  // Adds a basic tap gesture with `onTap()`
widget.onDoubleTap(() => 'Double Tapped!'.logMsg());  // Adds a double-tap gesture with `onDoubleTap()`
widget.onTapCancel(() => 'Tap Cancelled!'.logMsg());  // Adds a tap cancel gesture with `onTapCancel()`
widget.onLongPress(() => 'Long Pressed!'.logMsg());  // Adds a long press gesture with `onLongPress()`
widget.onTapDown((details) => 'Tap Down!'.logMsg());  // Adds a tap down gesture with `onTapDown()`
widget.onScale(
  onScaleStart: (details) => 'Scale Started!'.logMsg(),
  onScaleUpdate: (details) => 'Scaling!'.logMsg(),
  onScaleEnd: (details) => 'Scale Ended!'.logMsg(),
);  // Adds a scale gesture with `onScale()`

Iterable extension

iterable.lastElementIndex;  // Returns the index of the last element or -1 if empty.
iterable.hasSingleElement;  // Checks if the iterable has exactly one element.
iterable.addAllMatchingTo(targetList, (e) => e.isEven);  // Adds elements matching the predicate to the target list.
iterable.whereFilter((e) => e.isEven);  // Filters elements matching the predicate.
iterable.whereFilterIndexed((index, e) => index % 2 == 0);  // Filters elements with their index.
iterable.mapTransform((e) => e.toString());  // Transforms each element and maps to a new iterable.
iterable.skipElements(2);  // Skips the first 2 elements.
iterable.takeLastElements(2);  // Takes the last 2 elements.
iterable.skipWhileElements((e) => e < 5);  // Skips elements while the predicate is true.
iterable.skipLastElements(2);  // Skips the last 2 elements.

Color conversion

String.toColor();  // Converts a hex color string to a Color object, assuming full opacity.
HexColor.getColorFromHex(hexColor);  // Converts a hex color string to an integer color value, adding alpha if missing.
HexColor(hexColor);  // Creates a HexColor instance from a hex color string.

Number conversion


num.negative;  // Converts positive numbers to their negative counterparts.
num.isBetween(value1, value2, {inclusive = false});  // Checks if [this] is between [value1] and [value2], inclusive if [inclusive] is true.
num.roundToDecimals(decimalPlaces);  // Rounds the number to [decimalPlaces] decimal places.
double.asRadians;  // Converts degrees to radians.
double.asDegrees;  // Converts radians to degrees.
T.maxim(upperBound, {exclusive = false});  // Limits the value to [upperBound], exclusive if [exclusive] is true.
T.minm(lowerBound, {exclusive = false});  // Ensures the value is not less than [lowerBound], exclusive if [exclusive] is true.
T.clampAtMin(lowerBound);  // Ensures the value is not below [lowerBound].
T.clampAtMax(upperBound);  // Ensures the value does not exceed [upperBound].
num.orZero;  // Returns this value or 0 if null.
num.orOne;  // Returns this value or 1 if null.
num.or(value);  // Returns this value or [value] if null.

Utility conversion

double.isWhole;  // Checks if the value is a whole number.
double.roundToPrecision(nthPosition);  // Rounds the value to [precision] decimal places.
bool.isCloseTo(other, {precision = 1.0e-8});  // Checks if the value is close to [other] within [precision].
double.randomDouble({max});  // Generates a random double between 0.0 (inclusive) and 1.0 (exclusive).
int Duration.inYears;  // Returns the number of whole years spanned by this [Duration].
bool Duration.isInYears;  // Returns `true` if the [Duration] is equal to or longer than one year.
int Duration.absoluteSeconds;  // Returns the number of seconds remaining after accounting for whole minutes.
void Map<K, V>.operator <<(MapEntry<K, V> entry);  // Inserts a [MapEntry] into the map using the `<<` operator.
String Map<K, V>.toJson();  // Converts the map into a JSON string.

For more information, check out the below link

dart_extensions_pro | Flutter package

A Dart package that provides handy extensions and helper functions, designed to simplify and speed up development, making coding more efficient and streamlined.

pub.dev

Thanks for reading! If this post was helpful, feel free to share it and follow for more Flutter tips and tutorials. Keep coding and stay awesome!

Flutter Zoom Meeting Wrapper

Codexlancers — Fri, 15 May 2026 12:30:00 +0000

In today’s connected world, video conferencing has become an essential part of our daily lives. As mobile app developers, integrating reliable video conferencing capabilities can significantly enhance the user experience of your applications.

The Flutter Zoom Meeting Wrapper is a powerful Flutter plugin that allows you to seamlessly integrate the Zoom Meeting SDK into your Flutter applications. This means your users can join and participate in Zoom meetings directly within your app without ever needing to switch to the Zoom application.

Key Features
This plugin offers a range of capabilities to enhance your Flutter application:

🚀 Seamless Integration: Easy integration with the Zoom Meeting SDK
🔄 Simple Initialization: Initialize the SDK using a JWT token
🎯 In-App Experience: Join meetings directly within your app (no Zoom app required)
📱 Platform Support: Complete Android platform compatibility
🔊 Rich Meeting Experience: Full audio and video meeting functionality
🔐 Secure Authentication: Robust security through JWT authentication flow

Getting Started
Installation
To begin using the Flutter Zoom Meeting Wrapper in your project, add the following to your pubspec.yaml file:

dependencies:
  flutter_zoom_meeting_wrapper: ^0.0.1

Run flutter pub get to install the package.

Mandatory Zoom SDK Setup
For the plugin to function correctly, you need to set up the Zoom SDK:

Download the Zoom SDK ZIP from this link
Extract the ZIP file after downloading
Copy the libs folder and paste it inside your Flutter pub-cache directory at:

~/.pub-cache/hosted/pub.dev/flutter_zoom_meeting_wrapper-0.0.1/android/

Note: Replace 0.0.1 with the version you're using, if different.

Alternatively, run the following command to open the folder directly:

open ~/.pub-cache/hosted/pub.dev/flutter_zoom_meeting_wrapper-0.0.1/android

⚠️ Important: The libs folder must be placed in the correct location for the plugin to function properly.

Setting Up Zoom API Credentials
To use the Zoom Meeting SDK in your application, you’ll need to:

Create a Zoom Developer Account at Zoom Marketplace
Create a new app in the Zoom Marketplace
Obtain your API Key and API Secret from the app credentials page
Use these credentials to generate your JWT token
Generating a JWT Token
You can generate a Zoom JWT token using jwt.io with the following payload and signature:

Payload:

json{
  "appKey": "ZOOM-CLIENT-KEY",
  "iat": ANY-TIME-STAMP, 
  "exp": ANY-TIME-STAMP, // greater than iat
  "tokenExp": ANY-TIME-STAMP // greater than iat
}

Verify Signature:

HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  "ZOOM-CLIENT-SECRET"
)

Implementation Guide
Initializing the SDK
First, initialize the Zoom SDK with your JWT token:

import 'package:flutter_zoom_meeting_wrapper/flutter_zoom_meeting_wrapper.dart';

// Initialize Zoom SDK
bool isInitialized = await ZoomMeetingWrapper.initZoom(jwtToken);

Joining a Meeting
Once initialized, you can join a Zoom meeting with this simple code:

bool joinSuccess = await ZoomMeetingWrapper.joinMeeting(
  meetingId: "your_meeting_id",
  meetingPassword: "meeting_password",
  displayName: "Your Name",
);

Troubleshooting Common Issues
When implementing the Flutter Zoom Meeting Wrapper, you might encounter these common issues:

JWT Token Invalid: Ensure your API Key and Secret are correct, and verify that your system time is accurate.
Failed to initialize SDK: Check that you have a stable internet connection and are using a valid JWT token.
Cannot join meeting: Double-check that the meeting ID and password are correct.
Current Limitations
While the Flutter Zoom Meeting Wrapper provides powerful functionality, be aware of these current limitations:

🖼️ Custom UI overlays are not supported in the current version
📹 Meeting recording functionality is not available in this plugin
🖥️ Screen sharing capabilities are limited to platform capabilities
Conclusion
The Flutter Zoom Meeting Wrapper offers a straightforward way to integrate Zoom’s powerful meeting capabilities into your Flutter applications. With minimal setup and easy-to-use API, you can enhance your app with professional video conferencing features.

By providing users with the ability to join meetings without leaving your app, you create a more seamless and integrated experience that keeps users engaged with your application.

Google & Apple Sign-In in Flutter

Codexlancers — Thu, 14 May 2026 12:45:00 +0000

A production-grade walkthrough: clean auth service, real code from a real app, and integration patterns.

Table of Contents

Introduction
Prerequisites
Dependencies & Setup
Getting the Server Client ID
The Clean AuthService
Platform Configuration
Common Errors & Fixes
UI Example
Conclusion

01 / Introduction

Why Social Sign-In Still Matters in 2026
Every additional step between a user opening your app and them being inside it is a drop-off point. Password flows are friction. Google and Apple Sign-In are the fastest path from “curious” to “engaged” — two taps and you’re in, no new password to forget.

💡 Who this is for

Flutter developers at any level who want latest Google and Apple Sign-In that actually works in production.

02 / Prerequisites

What You Need Before Starting
A Firebase project with Authentication enabled — Google and Apple providers turned on
FlutterFire CLI installed and flutterfire configure already run
For Apple Sign-In: an Apple Developer account with Sign In with Apple capability enabled
For Android Google Sign-In: SHA-1 fingerprint registered in Firebase Console
03 / Dependencies & Setup

Packages, pubspec, and Initialization
Add to pubspec.yaml

dependencies:
  flutter_dotenv: ^5.2.1
  firebase_core: ^3.10.1
  firebase_auth: ^5.5.1
  google_sign_in: ^7.2.0
  sign_in_with_apple: ^7.0.1

flutter:
  assets:
    - .env

Then run:

flutter pub get

Create your .env file
Store sensitive config outside of source code. Create a** .env file in your project root and add it to **.gitignore:

# Get this from Google Cloud Console → OAuth 2.0 → Web Client (see Section 4)
SERVER_CLIENT_ID=123456789-abcdefg.apps.googleusercontent.com

Initialize Firebase and Google Sign-In in main.dart
This is the most important step people miss, you must call GoogleSignIn.instance.initialize() **before runApp()**, after Firebase is ready:

import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:your_app/service/auth_service.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 1. Load environment variables
  await dotenv.load(fileName: '.env');

  // 2. Initialize Firebase
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );

  // 3. Initialize AuthService (which calls GoogleSignIn.instance.initialize)
  await AuthService().initialize();

  runApp(const MyApp());
}

🚨 Skip initialize() and you’ll get a StateError

If you call** authenticate()** or authorizationClient before initialize(), Flutter throws a StateError: instance not initialized. This crashes silently in release builds. Always initialize first.

04 / Google Cloud Configuration

Getting the Server Client ID (Web OAuth Client)
The serverClientId is the Web Client ID from Google Cloud Console — not the Android or iOS client. It is required for Google Sign-In on Android and enables server-side token verification. Here's exactly how to find it:

Google Cloud Console — Step-by-step walkthrough

Go to console.cloud.google.com and select your Firebase project (same project name as in Firebase Console)
2 . In the left sidebar, navigate to APIs & Services → Credentials

Under OAuth 2.0 Client IDs, look for the entry with type “Web application”. It is usually auto-created by Firebase and named something like “Web client (auto created by Google Service)”
Click the Web application entry to open its details
Copy the Client ID field — it ends in .apps.googleusercontent.com. This is your SERVER_CLIENT_ID.
Paste it into your .env **file as **SERVER_CLIENT_ID=

💡 Can’t find the Web Client?

If you don’t see a Web Client ID, go to Firebase Console → Authentication → Sign-in method → Google → click the expand arrow. Firebase will show you the Web SDK configuration which contains the same client ID.

⚠️ Android vs iOS vs Web — use the Web client

There will be separate entries for Android, iOS, and Web in the credentials list. The serverClientId parameterspecifically requires the Web client ID. Using the Android or iOS client ID here is a common mistake that silently fails.

05 / The Clean AuthService

Authentication Service Implementation
Here’s the authentication logic, cleaned up:

lib/service/auth_service.dart

import 'dart:developer' as log;
import 'dart:math';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:google_sign_in/google_sign_in.dart';
import 'package:sign_in_with_apple/sign_in_with_apple.dart';

/// Clean authentication service — auth logic only, no database concerns.
/// Use it as a foundation and add your own data layer on top.
class AuthService {
  // ─── Singleton ───────────────────────────────────────────
  static final AuthService _instance = AuthService._internal();
  factory AuthService() => _instance;
  AuthService._internal();

  // ─── Firebase + Google ────────────────────────────────────
  final FirebaseAuth _auth = FirebaseAuth.instance;
  final GoogleSignIn _googleSignIn = GoogleSignIn.instance;

  /// Web Client ID from Google Cloud Console → OAuth 2.0 → Web application
  String get _serverClientId => dotenv.env['SERVER_CLIENT_ID'] ?? '';

  // ─── Public Getters ───────────────────────────────────────
  User? get currentUser => _auth.currentUser;
  bool get isSignedIn => currentUser != null;

  // ─── Initialization ───────────────────────────────────────

  /// Call once at app startup, after Firebase.initializeApp().
  /// Required by google_sign_in v7+ before any sign-in call.
  Future<void> initialize() async {
    try {
      await _googleSignIn.initialize(serverClientId: _serverClientId);
      log.log('[AuthService] Google Sign-In initialized');
    } catch (e) {
      log.log('[AuthService] Google init error: $e');
      rethrow; // fail fast — misconfiguration should be caught at startup
    }
  }

  // ─── Google Sign-In ───────────────────────────────────────

  /// Signs in with Google and returns a Firebase [UserCredential].
  /// Throws on cancellation or error — catch in your controller/notifier.
  Future<UserCredential> signInWithGoogle() async {
    // Sign out first — ensures the account picker is always shown
    await _googleSignIn.signOut();

    // 1. Trigger Google authentication — shows the account picker
    final GoogleSignInAccount googleUser = await _googleSignIn.authenticate(scopeHint: ['email']);

    // 2. Get the ID token directly from the authenticated account
    final GoogleSignInAuthentication googleAuth = googleUser.authentication;

    // 3. Also get the access token from the authorization client (for scopes)
    final authClient = _googleSignIn.authorizationClient;
    final authorization = await authClient.authorizationForScopes(['email', 'profile']);

    // 4. Build the Firebase credential from both tokens
    final credential = GoogleAuthProvider.credential(
      idToken: googleAuth.idToken,
      accessToken: authorization?.accessToken,
    );

    // 5. Sign into Firebase — creates the user on first login automatically
    return _auth.signInWithCredential(credential);
  }

  // ─── Apple Sign-In ────────────────────────────────────────

  /// Signs in with Apple ID and returns a Firebase [UserCredential].
  /// Throws on cancellation or error — catch in your controller/notifier.
  Future<UserCredential> signInWithApple() async {
    // 1. Generate a cryptographically random nonce (replay-attack protection)
    final rawNonce = _generateNonce();

    // 2. Request Apple credential — opens the system Sign-In sheet
    final appleCredential =
        await SignInWithApple.getAppleIDCredential(
      scopes: [
        AppleIDAuthorizationScopes.email,
        AppleIDAuthorizationScopes.fullName,
      ],
    );

    // 3. Build the Firebase OAuthCredential using Apple's identity token
    final oAuthCredential = OAuthProvider('apple.com').credential(
      idToken: appleCredential.identityToken,
      rawNonce: rawNonce,
      accessToken: appleCredential.authorizationCode,
    );

    // 4. Sign into Firebase
    return _auth.signInWithCredential(oAuthCredential);
  }

  // ─── Sign Out ─────────────────────────────────────────────

  /// Signs out from both Firebase and Google simultaneously.
  Future<void> signOut() async {
    await Future.wait([
      _auth.signOut(),
      _googleSignIn.signOut(),
    ]);
  }

  // ─── Error Messages ───────────────────────────────────────

  /// Converts a FirebaseAuthException into a user-readable message.
  static String getFirebaseErrorMessage(FirebaseAuthException e) {
    switch (e.code) {
      case 'user-not-found':          return 'No account found with this email.';
      case 'wrong-password':          return 'Incorrect password.';
      case 'email-already-in-use':    return 'This email is already registered.';
      case 'invalid-email':           return 'Please enter a valid email.';
      case 'weak-password':           return 'Password is too weak.';
      case 'too-many-requests':       return 'Too many attempts. Try again later.';
      case 'network-request-failed':  return 'No internet connection.';
      case 'operation-not-allowed':   return 'This sign-in method is not enabled.';
      case 'account-exists-with-different-credential':
        return 'An account with this email exists with a different sign-in method.';
      default: return 'Authentication failed. Please try again.';
    }
  }

  // ─── Nonce Generator (Apple Sign-In) ─────────────────────

  /// Generates a cryptographically secure random string.
  /// Apple uses this to prevent replay attacks on the identity token.
  String _generateNonce([int length = 32]) {
    const charset = '0123456789ABCDEFGHIJKLMNOPQRSTUVXYZabcdefghijklmnopqrstuvwxyz-._';
    final random = Random.secure();
    return List.generate(length, (_) => charset[random.nextInt(charset.length)]).join();
  }
}

06 / Platform Configuration

Android & iOS Setup
Android — Google Sign-In
1. Get your SHA-1 fingerprint

# Debug keystore (development)
keytool -list -v \
  -keystore ~/.android/debug.keystore \
  -alias androiddebugkey \
  -storepass android -keypass android
# Copy the SHA1 line from the output, e.g.:
# SHA1: A1:B2:C3:D4:E5:F6:...

Add this SHA-1 in Firebase Console → Project Settings → Your Android app → Add fingerprint. Then re-download google-services.json and place it at android/app/google-services.json.

⚠️ Add both debug and release SHA-1

The debug SHA-1 works only during development. For production (Play Store), add the SHA-1 from yourupload keystore. Missing the release SHA-1 causes silent failures after publishing.

2. Verify build.gradle files
android/build.gradle

buildscript {
  dependencies {
    classpath 'com.google.gms:google-services:4.4.2'
  }
}

android/app/build.gradle

// Must be at the very bottom of the file
apply plugin: 'com.google.gms.google-services'

iOS — Google Sign-In
Add the reversed client ID URL scheme
Open GoogleService-Info.plist, find the REVERSED_CLIENT_ID value, then add it to ios/Runner/Info.plist:

ios/Runner/Info.plist

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <!-- REVERSED_CLIENT_ID from GoogleService-Info.plist -->
      <string>com.googleusercontent.apps.YOUR_REVERSED_CLIENT_ID</string>
    </array>
  </dict>
</array>

iOS — Apple Sign-In
1. Enable the capability in Xcode
Open ios/Runner.xcworkspace in Xcode → select Runner target → Signing & Capabilities → + Capability → Sign In with Apple.

2. Enable in Apple Developer Portal
Log into developer.apple.com → Identifiers → select your App ID → check Sign In with Apple → Save. Regenerate your provisioning profile.

3.Enable in Firebase Console
Firebase Console → Authentication → Sign-in method → Apple → Enable. Paste your App ID (e.g. com.company.app) as the Service ID.

4.Add the entitlement (if needed)
Xcode usually handles this automatically when you add the capability. Verify Runner.entitlements contains com.apple.developer.applesignin with value Default.

💡 Apple Sign-In on Android

sign_in_with_apple supports Android via a web-based OAuth flow. You need to configure a web redirect URL in Apple Developer Console and add it to the plugin configuration. See the package README for the full Android setup guide.

07 / Debugging

Common Errors & Exact Fixes
1. StateError: instance not initialized
Root Cause: GoogleSignIn.instance is used before calling initialize()
Fix: Make sure to call and await AuthService().initialize() inside main() before runApp()

2. sign_in_failed (Android)
Root Cause: SHA-1 fingerprint is missing or incorrect
Fix: Add both debug and release SHA-1 in Firebase Console, then re-download google-services.json

3. PlatformException: sign_in_canceled
Root Cause: User closed the Google account picker
Fix: This is expected behavior — handle it silently without showing an error toast

4. operation-not-allowed
Root Cause: Google Sign-In is not enabled in Firebase
Fix: Go to Firebase Console → Authentication → Sign-in method → Enable Google

5. idToken is null
Root Cause: Authentication failed or was canceled silently
Fix: Always check googleAuth.idToken != null before creating credentials

6. Missing REVERSED_CLIENT_ID (iOS)
Root Cause: URL scheme is not configured in Info.plist
Fix: Add CFBundleURLSchemes using the REVERSED_CLIENT_ID from GoogleService-Info.plist

7. AuthorizationError: canceled (Apple)
Root Cause: User canceled Apple Sign-In
Fix: Catch SignInWithAppleAuthorizationException and ignore when e.code == AuthorizationErrorCode.canceled

8. Apple name is null (returning user)
Root Cause: Apple only provides the user’s name during the first sign-in
Fix: Save the name in your database when isNewUser == true and reuse it later

9. account-exists-with-different-credential
Root Cause: Same email is used with another authentication provider
Fix: Use fetchSignInMethodsForEmail() and guide the user to link accounts

10. Apple Sign-In not working on Simulator
Root Cause: iOS Simulator does not support Apple Sign-In
Fix: Always test Apple Sign-In on a real device

08 / UI Example

/// GOOGLE LOGIN
  Future<void> loginWithGoogle() async {
    setState(() => isLoading = true);
    final result = await AuthService().signInWithGoogle();
    setState(() => isLoading = false);
    if (result.isSuccess) {
      _showMessage("Google Login Success ✅");
    } else {
      _showMessage(result.error ?? "Error");
    }
  }

/// APPLE LOGIN
  Future<void> loginWithApple() async {
    setState(() => isLoading = true);
    final result = await AuthService().signInWithApple();
    setState(() => isLoading = false);
    if (result.isSuccess) {
      _showMessage("Apple Login Success 🍎");
    } else {
      _showMessage(result.error ?? "Error");
    }

09 / Conclusion

Summary & Best Practices
Here’s the complete checklist for production-ready social sign-in:

Initialize once — call AuthService().initialize() in main() after Firebase and before runApp()
Server Client ID = Web Client — get the Web application client from Google Cloud Console, not Android or iOS
Sign out Google on each sign-in — call _googleSignIn.signOut() before authenticating so the picker always appears
Both tokens for Firebase — always pass both idToken and accessToken to GoogleAuthProvider.credential()
Use a secure nonce for Apple — generate it with Random.secure(), always pass rawNonce to the Firebase credential
Save Apple name immediately — it’s only available on the first sign-in; save it to your database right after isNewUser == true
Detect new vs returning users — use userCredential.additionalUserInfo?.isNewUser to branch your post-auth flow
Sign out from both — always call both _auth.signOut() and _googleSignIn.signOut() on logout
SHA-1: debug + release — add both fingerprints to Firebase or Google Sign-In breaks in production builds
Test Apple on a real device — iOS Simulator does not support Apple Sign-In.

Flutter + Firebase Cloud Functions: Complete Guide with Real Examples 🚀

Codexlancers — Wed, 13 May 2026 12:30:00 +0000

Introduction
Building modern mobile apps requires more than just a beautiful UI — you also need a reliable backend. This is where F**lutter and Firebase Cloud **Functions become a powerful combination.

Flutter is a UI toolkit by Google that allows you to build natively compiled apps for mobile, web, and desktop using a single codebase.
Firebase Cloud Functions is a serverless backend solution that lets you run code in response to events without managing servers.
👉 When you combine them, you get:

A fast, scalable frontend (Flutter)
A powerful, secure backend (Cloud Functions)
This guide will walk you through everything — from setup to real-world examples — in a simple and practical way.

Why Use Flutter + Firebase Cloud Functions?
🔥 Key Benefits
Feature Benefit Serverless backend No need to manage serversReal-time integrationWorks seamlessly with Firestore Scalability Automatically scales with usersSecurityBackend logic stays hiddenCost-effectivePay only for usage

Use Cases
Here are some real-world scenarios where this combination shines:

Secure Backend Logic

Payment verification
User authentication checks
Role-based access control
Notifications System
Send push notifications when data changes
Trigger alerts on user actions
Data Processing
Automatically process uploaded data
Clean and transform Firestore entries
Third-Party API Integration
Call external APIs securely (without exposing keys)
Scheduled Jobs
Daily reports
Cleanup tasks

Step-by-Step Setup
Let’s set up everything from scratch.

Step 1: Setup Flutter Project

flutter create my_app
cd my_app

Step 2: Setup Firebase

Go to Firebase Console
Create a project
Add Android/iOS app
Download config files:

google-services.json (Android)
GoogleService-Info.plist (iOS)

Step 3: Add Firebase to Flutter
Add dependencies:

dependencies:
  firebase_core: ^latest
  cloud_firestore: ^latest

Initialize Firebase:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

Step 4: Setup Firebase CLI
Install CLI:

npm install -g firebase-tools

firebase login

Initialize functions:

firebase init functions

Choose:

JavaScript or TypeScript
ESLint (optional)

Step 5: Write Your First Cloud Function
Example: Trigger when a user is created in Firestore

const functions = require("firebase-functions");
const admin = require("firebase-admin");

admin.initializeApp();

exports.onUserCreate = functions.firestore
  .document("users/{userId}")
  .onCreate((snap, context) => {
    const data = snap.data();
    console.log("New user created:", data);
    return null;
  });

Deploy:

firebase deploy --only functions

Real-World Examples 🔥
Example 1: Send Push Notification on New Message
Cloud Function

exports.sendNotification = functions.firestore
  .document("messages/{id}")
  .onCreate(async (snap, context) => {
    const message = snap.data();

    const payload = {
      notification: {
        title: "New Message",
        body: message.text,
      },
    };

    return admin.messaging().sendToTopic("allUsers", payload);
  });

Flutter Side
Subscribe to topic:

FirebaseMessaging.instance.subscribeToTopic("allUsers");

Example 2: Secure Payment Verification
👉 Never verify payments on the client side!

Cloud Function

exports.verifyPayment = functions.https.onCall(async (data, context) => {
  const paymentId = data.paymentId;

  // Call payment gateway API
  const isValid = true; // simulate

   if (!isValid) {
    throw new functions.https.HttpsError("failed-precondition", "Invalid payment");
  }
  return { success: true };
});

Flutter Call

final callable = FirebaseFunctions.instance.httpsCallable('verifyPayment');

final result = await callable.call({
  "paymentId": "12345",
});

print(result.data);

Example 3: Auto-Update Data (Business Logic)
Use Case:
When an order is created → update user stats

exports.updateUserStats = functions.firestore
  .document("orders/{orderId}")
  .onCreate(async (snap, context) => {
    const order = snap.data();
    const userId = order.userId;

    const userRef = admin.firestore().collection("users").doc(userId);

    await userRef.update({
      totalOrders: admin.firestore.FieldValue.increment(1),
    });
  });

Example 4: Call External API Securely

const axios = require("axios");

exports.fetchWeather = functions.https.onCall(async (data, context) => {
  const city = data.city;
  const response = await axios.get(
    `https://api.weatherapi.com/v1/current.json?key=API_KEY&q=${city}`
  );
  return response.data;
});

👉 API key stays safe in backend!

Best Practices ✅
1. Keep Business Logic in Cloud Functions
❌ Don’t trust frontend
✅ Always validate on backend

2. Use Environment Config

firebase functions:config:set api.key="YOUR_KEY"

Access:

functions.config().api.key

3. Handle Errors Properly

throw new functions.https.HttpsError(
  "invalid-argument",
  "Missing data"
);

4. Optimize Performance

Avoid heavy loops
Use async/await properly
Minimize Firestore reads

5. Secure Your Functions

Use authentication checks:

if (!context.auth) {
  throw new functions.https.HttpsError("unauthenticated");
}

Common Pitfalls ⚠️
❌ 1. Doing Everything in Flutter
➡️ Leads to security issues

❌ 2. Infinite Function Loops
Example:

Function writes to Firestore
Trigger fires again 👉 Fix: Use flags or conditions

❌ 3. Large Cold Start Delays

Happens in unused functions
👉 Fix:
Use smaller functions
Use regional deployment
❌ 4. Exposing API Keys
👉 Always call APIs via Cloud Functions

❌ 5. Not Handling Errors
👉 Always use try/catch

*Pro Tips *💡

Use TypeScript for better maintainability
Structure functions into modules
Log everything using console.log
Monitor using Firebase Console Conclusion 🎯 Flutter + Firebase Cloud Functions is a powerful full-stack solution that allows you to build scalable, secure, and modern applications without managing servers.

Key Takeaways:

🚀 Flutter handles UI beautifully
🔐 Cloud Functions handle secure backend logic
⚡ Real-time + serverless = fast & scalable apps
🧠 Keep sensitive logic off the client
🔧 Use triggers and callable functions wisely
If you’re building apps with features like:
Payments 💳
Notifications 🔔
AI integrations 🤖
Real-time data 📡
👉 Then this stack is one of the best choices available today.

Final Thought
Start simple:

Build one function
Connect it to Flutter
Expand step by step And soon, you’ll be building production-ready apps with confidence 🚀

🚀 How to Create and Use RPC Functions in Supabase with Flutter (Step-by-Step Guide)

Codexlancers — Tue, 12 May 2026 04:30:00 +0000

🧠 Introduction
When building modern apps, you often need to perform complex database operations — like filtering data, calculating values, or combining multiple queries. Writing all this logic directly in your Flutter app can quickly become messy and inefficient.

That’s where RPC (Remote Procedure Call) functions in Supabase come in.

👉 RPC functions allow you to write SQL functions inside your database and call them directly from your app as if they were APIs.

✅ Why use RPC functions in Supabase?

Keep business logic inside the database (cleaner architecture)
Reduce network calls (better performance)
Improve security (controlled access to data)
Reuse logic across multiple clients (Flutter, Web, etc.)

🧰 Prerequisites
Before we start, make sure you have:

✅ A Flutter project set up
✅ A Supabase project created
✅ Supabase Flutter SDK installed
✅ Basic knowledge of SQL (SELECT, WHERE, etc.)

⚙️ Step 1: Create an RPC Function in Supabase
Let’s say we have a tasks table and we want to fetch all completed tasks for a specific user.

🗄️ Example Table: tasks
idtitleuser_idis_completed1Task A101true2Task B101false

🧾 SQL Function
Go to Supabase Dashboard → SQL Editor, and run:

create or replace function get_completed_tasks(p_user_id uuid)
returns table (
  id uuid,
  title text,
  is_completed boolean
)
language sql
as $$
  select id, title, is_completed
  from tasks
  where user_id = p_user_id
    and is_completed = true;
$$;

🔍 Explanation (Simple)

create or replace function → creates the RPC function
p_user_id → input parameter
returns table → defines output structure
select ... → actual query logic

🧪 Step 2: Test the Function in Supabase
Before using it in Flutter, test it.

Run this in SQL Editor:

select * from get_completed_tasks('your-user-id-here');

✅ Expected Output
You should see only completed tasks for that user.

📱 Step 3: Call RPC Function in Flutter
Now let’s call this function from your Flutter app.

📦 Add Supabase Dependency

dependencies:
  supabase_flutter: latest_version

⚡ Initialize Supabase

await Supabase.initialize(
  url: 'YOUR_SUPABASE_URL',
  anonKey: 'YOUR_SUPABASE_ANON_KEY',
);

🔥 Call RPC Function

final supabase = Supabase.instance.client;

Future<List<dynamic>> getCompletedTasks(String userId) async {
  final response = await supabase.rpc(
    'get_completed_tasks',
    params: {'p_user_id': userId},
  );
  return response;
}

🧠 Explanation

rpc() → calls Supabase function
'get_completed_tasks' → function name
params → must match SQL parameter names 🖥️ Use in UI

FutureBuilder(
  future: getCompletedTasks(userId),
  builder: (context, snapshot) {
    if (!snapshot.hasData) {
      return CircularProgressIndicator();
    }
    final tasks = snapshot.data as List;
      return ListView.builder(
        itemCount: tasks.length,
        itemBuilder: (context, index) {
          final task = tasks[index];
          return ListTile(
            title: Text(task['title']),
            subtitle: Text("Completed"),
          );
        },
      );
    },
  );

🌍 Real-World Use Case
Let’s say you’re building a Task Management App (like your current Flutter project 👀).

Instead of:

❌ Fetching all tasks
❌ Filtering in Flutter

You can:

✅ Use RPC to fetch only required data
✅ Improve performance and reduce app logic

💡 Other Use Cases

Calculating total revenue
Fetching user-specific dashboards
Complex joins across tables
Role-based data filtering ⚠️ Common Mistakes ❌ 1. Parameter Name Mismatch

params: {'userId': userId} // WRONG

✔ Must match SQL:

p_user_id

❌ 2. Forgetting Permissions (RLS)
If Row Level Security (RLS) is enabled:

👉 Make sure policies allow access

❌ 3. Returning Wrong Data Type
If your function returns:

returns json

Then handle it properly in Flutter.

❌ 4. Not Testing in SQL First
Always test in Supabase before calling from Flutter.

🧠 Best Practices
✅ Keep functions simple and focused
One function = one responsibility

✅ Use meaningful names

get_user_tasks ✔
fetch_data ❌

✅ Secure with RLS policies
Don’t expose sensitive data

✅ Use indexes for performance
Especially for large datasets

✅ Prefer SQL functions over multiple API calls
Cleaner + faster

🏁 Conclusion
RPC functions in Supabase are a powerful way to move logic closer to your database, making your Flutter apps:

⚡ Faster
🧹 Cleaner
🔐 More secure By following this step-by-step guide, you can now:

✔ Create SQL functions
✔ Test them in Supabase
✔ Call them seamlessly from Flutter

🚀 Next Steps
Add pagination to your RPC functions
Use PostgreSQL joins inside functions
Explore Edge Functions vs RPC
Build reusable backend logic library
If you’re building scalable Flutter apps with Supabase, mastering RPC is a game changer 💥

🚀 Integrating Tamara Payment Gateway in a FlutterFlow Application

Codexlancers — Mon, 11 May 2026 12:30:00 +0000

In today’s digital ecosystem, integrating a reliable payment gateway is essential for delivering a smooth and secure user experience. However, building a payment system isn’t just about processing transactions — it’s about ensuring security, reliability, and compliance, all while maintaining a seamless user journey.

Recently, I worked on integrating the Tamara Payment Gateway into a FlutterFlow application, creating a complete end-to-end payment workflow — from initiating transactions to handling real-time updates.
💡 The Goal
The objective was to implement a secure and scalable payment flow that:

Enables users to complete payments smoothly
Handles transaction states reliably
Ensures compliance with Tamara’s payment standards
Works seamlessly across development and production environments 🛠️ The Implementation The integration involved connecting Tamara’s APIs with the FlutterFlow application and managing the full payment lifecycle.

⚙️ Key Features Implemented
🔹 Tamara Checkout API Integration
We used Tamara’s Checkout API to:

Initiate payment sessions
Redirect users to the hosted checkout page
Process transactions securely
🔐 Secure Payment Handling
Security was a top priority. The implementation ensured:
Proper API request validation
Safe handling of transaction data
Compliance with Tamara’s payment flow
🔔 Webhook Integration for Real-Time Updates
To keep track of payment status:
Implemented webhooks to receive real-time updates
Handled events such as:
Payment success
Payment failure
Transaction updates
This ensures the app always reflects the correct payment status.

💳 Payment Method Support
Enabled support for:

Visa cards
Mada cards This ensures compatibility with regional payment preferences.

🧪 Environment Configuration
Set up both environments:

Sandbox (Development) for testing
Production for live transactions
This separation ensures safe development and smooth deployment.

🔄 Reliable Request & Response Handling
Carefully managed API communication to:

Handle success and failure cases
Prevent duplicate transactions
Ensure consistency across the payment flow ⚠️ Key Challenge: Hosted Checkout Limitations One of the most interesting aspects of this integration was understanding the limitations of Tamara’s hosted checkout flow.

Unlike custom UI payment solutions:

The payment interface is controlled by Tamara
UI customization options are limited
💡 Why This Matters
At first, this might seem like a limitation, but it actually ensures:
✅ Higher security standards
✅ Compliance with payment regulations
✅ Reduced risk of implementation errors
Understanding these constraints helped align the integration with best practices recommended by Tamara.

📱 Final Result
The final implementation delivered:

A stable and secure payment experience
Smooth transaction processing
Accurate real-time payment updates
Full compliance with Tamara’s standards Users can now complete payments confidently, knowing the system is both secure and reliable.

🧠 Key Learnings
⚖️ Balancing UX and Security
Not all payment flows allow full UI control. Sometimes, prioritizing security and compliance is more important than customization.

🔄 Importance of Webhooks
Webhooks are critical for:

Real-time updates
Backend synchronization
Reliable transaction tracking
💻 Tech Stack
FlutterFlow
Dart
Tamara Payment Gateway APIs
Webhooks for real-time updates
🧠 Final Thoughts
This integration reinforced an important lesson:

👉 A great payment system is not just about UX — it’s about trust, security, and reliability.

By combining FlutterFlow with Tamara’s infrastructure, we were able to build a solution that meets both user expectations and industry standards.

If you’re working on payment integrations, always remember:

Understand platform limitations
Follow recommended flows
Prioritize security over customization

FlutterFlow #PaymentGateway #Tamara #Fintech #MobileDevelopment #APIIntegration #Webhooks

Google & Apple Sign-In in Flutter

Codexlancers — Mon, 11 May 2026 04:30:00 +0000

A production-grade walkthrough: clean auth service, real code from a real app, and integration patterns.

Introduction
Prerequisites
Dependencies & Setup
Getting the Server Client ID
The Clean AuthService
Platform Configuration
Common Errors & Fixes
UI Example
Conclusion

01 / Introduction

Why Social Sign-In Still Matters in 2026

Every additional step between a user opening your app and them being inside it is a drop-off point. Password flows are friction. Google and Apple Sign-In are the fastest path from “curious” to “engaged” — two taps and you’re in, no new password to forget.

💡 Who this is for

Flutter developers at any level who want latest Google and Apple Sign-In that actually works in production.

02 / Prerequisites

What You Need Before Starting

A Firebase project with Authentication enabled — Google and Apple providers turned on
FlutterFire CLI installed and flutterfire configure already run
For Apple Sign-In: an Apple Developer account with Sign In with Apple capability enabled
For Android Google Sign-In: SHA-1 fingerprint registered in Firebase Console

03 / Dependencies & Setup

Packages, pubspec, and Initialization

Add to pubspec.yaml

dependencies:
  flutter_dotenv: ^5.2.1
  firebase_core: ^3.10.1
  firebase_auth: ^5.5.1
  google_sign_in: ^7.2.0
  sign_in_with_apple: ^7.0.1

flutter:
  assets:
    - .env

Then run:

flutter pub get

Create your .env file

Store sensitive config outside of source code. Create a .env file in your project root and add it to .gitignore:

# Get this from Google Cloud Console → OAuth 2.0 → Web Client (see Section 4)
SERVER_CLIENT_ID=123456789-abcdefg.apps.googleusercontent.com

Initialize Firebase and Google Sign-In in main.dart

This is the most important step people miss, you must call GoogleSignIn.instance.initialize() before runApp(), after Firebase is ready:

import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:your_app/service/auth_service.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 1. Load environment variables
  await dotenv.load(fileName: '.env');

  // 2. Initialize Firebase
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );

  // 3. Initialize AuthService (which calls GoogleSignIn.instance.initialize)
  await AuthService().initialize();

  runApp(const MyApp());
}

🚨 Skip initialize() and you’ll get a StateError

If you call authenticate() or authorizationClient before initialize(), Flutter throws a StateError: instance not initialized. This crashes silently in release builds. Always initialize first.

04 / Google Cloud Configuration

Getting the Server Client ID (Web OAuth Client)

The serverClientId is the Web Client ID from Google Cloud Console — not the Android or iOS client. It is required for Google Sign-In on Android and enables server-side token verification. Here's exactly how to find it:

Google Cloud Console — Step-by-step walkthrough

Go to console.cloud.google.com and select your Firebase project (same project name as in Firebase Console)

2 . In the left sidebar, navigate to APIs & Services → Credentials

Under OAuth 2.0 Client IDs, look for the entry with type “Web application”. It is usually auto-created by Firebase and named something like “Web client (auto created by Google Service)”
Click the Web application entry to open its details
Copy the Client ID field — it ends in .apps.googleusercontent.com. This is your SERVER_CLIENT_ID.
Paste it into your .env file as SERVER_CLIENT_ID=your_id

💡 Can’t find the Web Client?

⚠️ Android vs iOS vs Web — use the Web client

05 / The Clean AuthService

Authentication Service Implementation

Here’s the authentication logic, cleaned up:

lib/service/auth_service.dart

import 'dart:developer' as log;
import 'dart:math';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:google_sign_in/google_sign_in.dart';
import 'package:sign_in_with_apple/sign_in_with_apple.dart';

/// Clean authentication service — auth logic only, no database concerns.
/// Use it as a foundation and add your own data layer on top.
class AuthService {
  // ─── Singleton ───────────────────────────────────────────
  static final AuthService _instance = AuthService._internal();
  factory AuthService() => _instance;
  AuthService._internal();

  // ─── Firebase + Google ────────────────────────────────────
  final FirebaseAuth _auth = FirebaseAuth.instance;
  final GoogleSignIn _googleSignIn = GoogleSignIn.instance;

  /// Web Client ID from Google Cloud Console → OAuth 2.0 → Web application
  String get _serverClientId => dotenv.env['SERVER_CLIENT_ID'] ?? '';

  // ─── Public Getters ───────────────────────────────────────
  User? get currentUser => _auth.currentUser;
  bool get isSignedIn => currentUser != null;

  // ─── Initialization ───────────────────────────────────────

  /// Call once at app startup, after Firebase.initializeApp().
  /// Required by google_sign_in v7+ before any sign-in call.
  Future<void> initialize() async {
    try {
      await _googleSignIn.initialize(serverClientId: _serverClientId);
      log.log('[AuthService] Google Sign-In initialized');
    } catch (e) {
      log.log('[AuthService] Google init error: $e');
      rethrow; // fail fast — misconfiguration should be caught at startup
    }
  }

  // ─── Google Sign-In ───────────────────────────────────────

  /// Signs in with Google and returns a Firebase [UserCredential].
  /// Throws on cancellation or error — catch in your controller/notifier.
  Future<UserCredential> signInWithGoogle() async {
    // Sign out first — ensures the account picker is always shown
    await _googleSignIn.signOut();

    // 1. Trigger Google authentication — shows the account picker
    final GoogleSignInAccount googleUser = await _googleSignIn.authenticate(scopeHint: ['email']);

    // 2. Get the ID token directly from the authenticated account
    final GoogleSignInAuthentication googleAuth = googleUser.authentication;

    // 3. Also get the access token from the authorization client (for scopes)
    final authClient = _googleSignIn.authorizationClient;
    final authorization = await authClient.authorizationForScopes(['email', 'profile']);

    // 4. Build the Firebase credential from both tokens
    final credential = GoogleAuthProvider.credential(
      idToken: googleAuth.idToken,
      accessToken: authorization?.accessToken,
    );

    // 5. Sign into Firebase — creates the user on first login automatically
    return _auth.signInWithCredential(credential);
  }

  // ─── Apple Sign-In ────────────────────────────────────────

  /// Signs in with Apple ID and returns a Firebase [UserCredential].
  /// Throws on cancellation or error — catch in your controller/notifier.
  Future<UserCredential> signInWithApple() async {
    // 1. Generate a cryptographically random nonce (replay-attack protection)
    final rawNonce = _generateNonce();

    // 2. Request Apple credential — opens the system Sign-In sheet
    final appleCredential =
        await SignInWithApple.getAppleIDCredential(
      scopes: [
        AppleIDAuthorizationScopes.email,
        AppleIDAuthorizationScopes.fullName,
      ],
    );

    // 3. Build the Firebase OAuthCredential using Apple's identity token
    final oAuthCredential = OAuthProvider('apple.com').credential(
      idToken: appleCredential.identityToken,
      rawNonce: rawNonce,
      accessToken: appleCredential.authorizationCode,
    );

    // 4. Sign into Firebase
    return _auth.signInWithCredential(oAuthCredential);
  }

  // ─── Sign Out ─────────────────────────────────────────────

  /// Signs out from both Firebase and Google simultaneously.
  Future<void> signOut() async {
    await Future.wait([
      _auth.signOut(),
      _googleSignIn.signOut(),
    ]);
  }

  // ─── Error Messages ───────────────────────────────────────

  /// Converts a FirebaseAuthException into a user-readable message.
  static String getFirebaseErrorMessage(FirebaseAuthException e) {
    switch (e.code) {
      case 'user-not-found':          return 'No account found with this email.';
      case 'wrong-password':          return 'Incorrect password.';
      case 'email-already-in-use':    return 'This email is already registered.';
      case 'invalid-email':           return 'Please enter a valid email.';
      case 'weak-password':           return 'Password is too weak.';
      case 'too-many-requests':       return 'Too many attempts. Try again later.';
      case 'network-request-failed':  return 'No internet connection.';
      case 'operation-not-allowed':   return 'This sign-in method is not enabled.';
      case 'account-exists-with-different-credential':
        return 'An account with this email exists with a different sign-in method.';
      default: return 'Authentication failed. Please try again.';
    }
  }

  // ─── Nonce Generator (Apple Sign-In) ─────────────────────

  /// Generates a cryptographically secure random string.
  /// Apple uses this to prevent replay attacks on the identity token.
  String _generateNonce([int length = 32]) {
    const charset = '0123456789ABCDEFGHIJKLMNOPQRSTUVXYZabcdefghijklmnopqrstuvwxyz-._';
    final random = Random.secure();
    return List.generate(length, (_) => charset[random.nextInt(charset.length)]).join();
  }
}

06 / Platform Configuration

Android & iOS Setup

Android — Google Sign-In

Get your SHA-1 fingerprint

# Debug keystore (development)
keytool -list -v \
  -keystore ~/.android/debug.keystore \
  -alias androiddebugkey \
  -storepass android -keypass android
# Copy the SHA1 line from the output, e.g.:
# SHA1: A1:B2:C3:D4:E5:F6:...

Add this SHA-1 in Firebase Console → Project Settings → Your Android app → Add fingerprint. Then re-download google-services.json and place it at android/app/google-services.json.

Become a Medium member

⚠️ Add both debug and release SHA-1

The debug SHA-1 works only during development. For production (Play Store), add the SHA-1 from yourupload keystore. Missing the release SHA-1 causes silent failures after publishing.

Verify build.gradle files

android/build.gradle

buildscript {
  dependencies {
    classpath 'com.google.gms:google-services:4.4.2'
  }
}

android/app/build.gradle

// Must be at the very bottom of the file
apply plugin: 'com.google.gms.google-services'

iOS — Google Sign-In

Add the reversed client ID URL scheme

Open GoogleService-Info.plist, find the REVERSED_CLIENT_ID value, then add it to ios/Runner/Info.plist:

ios/Runner/Info.plist

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <!-- REVERSED_CLIENT_ID from GoogleService-Info.plist -->
      <string>com.googleusercontent.apps.YOUR_REVERSED_CLIENT_ID</string>
    </array>
  </dict>
</array>

iOS — Apple Sign-In

Enable the capability in Xcode

Open ios/Runner.xcworkspace in Xcode → select Runner target → Signing & Capabilities → + Capability → Sign In with Apple.

Enable in Apple Developer Portal

Log into developer.apple.com → Identifiers → select your App ID → check Sign In with Apple → Save. Regenerate your provisioning profile.

Enable in Firebase Console

Firebase Console → Authentication → Sign-in method → Apple → Enable. Paste your App ID (e.g. com.company.app) as the Service ID.

Add the entitlement (if needed)

Xcode usually handles this automatically when you add the capability. Verify Runner.entitlements contains com.apple.developer.applesignin with value Default.

💡 Apple Sign-In on Android

07 / Debugging

Common Errors & Exact Fixes

StateError: instance not initialized
Root Cause: GoogleSignIn.instance is used before calling initialize()
Fix: Make sure to call and await AuthService().initialize() inside main() before runApp()
sign_in_failed (Android)
Root Cause: SHA-1 fingerprint is missing or incorrect
Fix: Add both debug and release SHA-1 in Firebase Console, then re-download google-services.json
PlatformException: sign_in_canceled
Root Cause: User closed the Google account picker
Fix: This is expected behavior — handle it silently without showing an error toast
operation-not-allowed
Root Cause: Google Sign-In is not enabled in Firebase
Fix: Go to Firebase Console → Authentication → Sign-in method → Enable Google
idToken is null
Root Cause: Authentication failed or was canceled silently
Fix: Always check googleAuth.idToken != null before creating credentials
Missing REVERSED_CLIENT_ID (iOS)
Root Cause: URL scheme is not configured in Info.plist
Fix: Add CFBundleURLSchemes using the REVERSED_CLIENT_ID from GoogleService-Info.plist
AuthorizationError: canceled (Apple)
Root Cause: User canceled Apple Sign-In
Fix: Catch SignInWithAppleAuthorizationException and ignore when e.code == AuthorizationErrorCode.canceled
Apple name is null (returning user)
Root Cause: Apple only provides the user’s name during the first sign-in
Fix: Save the name in your database when isNewUser == true and reuse it later
account-exists-with-different-credential
Root Cause: Same email is used with another authentication provider
Fix: Use fetchSignInMethodsForEmail() and guide the user to link accounts
Apple Sign-In not working on Simulator
Root Cause: iOS Simulator does not support Apple Sign-In
Fix: Always test Apple Sign-In on a real device

08 / UI Example

/// GOOGLE LOGIN
Future<void> loginWithGoogle() async {
  setState(() => isLoading = true);
  final result = await AuthService().signInWithGoogle();
  setState(() => isLoading = false);
  if (result.isSuccess) {
    _showMessage("Google Login Success ✅");
  } else {
    _showMessage(result.error ?? "Error");
  }
}

/// APPLE LOGIN
Future<void> loginWithApple() async {
  setState(() => isLoading = true);
  final result = await AuthService().signInWithApple();
  setState(() => isLoading = false);
  if (result.isSuccess) {
    _showMessage("Apple Login Success 🍎");
  } else {
    _showMessage(result.error ?? "Error");
  }
}

09 / Conclusion

Summary & Best Practices

Here’s the complete checklist for production-ready social sign-in:

Initialize once — call AuthService().initialize() in main() after Firebase and before runApp()
Server Client ID = Web Client — get the Web application client from Google Cloud Console, not Android or iOS
Sign out Google on each sign-in — call _googleSignIn.signOut() before authenticating so the picker always appears
Both tokens for Firebase — always pass both idToken and accessToken to GoogleAuthProvider.credential()
Use a secure nonce for Apple — generate it with Random.secure(), always pass rawNonce to the Firebase credential
Save Apple name immediately — it’s only available on the first sign-in; save it to your database right after isNewUser == true
Detect new vs returning users — use userCredential.additionalUserInfo?.isNewUser to branch your post-auth flow
Sign out from both — always call both _auth.signOut() and _googleSignIn.signOut() on logout
SHA-1: debug + release — add both fingerprints to Firebase or Google Sign-In breaks in production builds
Test Apple on a real device — iOS Simulator does not support Apple Sign-In.

🚀 FlutterFlow’s New Feature: App Events (A Game Changer for Scalable Apps)

Codexlancers — Sat, 09 May 2026 04:30:00 +0000

Building scalable applications in low-code platforms has always been a balance between speed and maintainability. While FlutterFlow makes UI development incredibly fast, managing communication between different parts of an app could sometimes become complex.

But with the introduction of App Events, FlutterFlow has taken a major step forward — bringing cleaner architecture, better performance, and a much more scalable approach to app development.

🤯 The Problem Before App Events
Before this update, handling communication between screens or components often involved:

❌ Passing multiple navigation parameters
❌ Managing complex global or local state
❌ Writing tightly coupled logic between screens
As apps grew larger, this approach became:
Hard to maintain
Difficult to debug
Less scalable
💡 What Are App Events?
App Events introduce a decoupled communication system inside FlutterFlow.

👉 Core Idea:

Trigger an event from anywhere in the app
Listen and respond to that event from anywhere

No direct connection between components is required.

This means your app becomes:

More modular
Easier to maintain
Much cleaner in terms of logic 🔄 How It Works (Simple Example) Let’s say a user adds an item to the cart 🛒

Without App Events:

Manually update cart badge
Refresh product list
Update summary screen
Pass state across multiple screens
With App Events:
Trigger event → “Cart Updated”
All relevant UI components automatically react
✨ That’s it. No messy logic.

🔑 Key Highlights
🌍 Global Events

App-level events
Handled across the entire application
Processed sequentially
Perfect for:
Authentication state changes
Analytics tracking
Logging
📍 Local Events
Scoped to specific pages or components
Support multiple listeners
Trigger instant UI updates
Perfect for:
UI refresh
Component communication
Dynamic interactions
🚀 Why This Feature Matters
App Events bring FlutterFlow closer to modern software architecture patterns, such as:
Event-driven systems
Loose coupling
Reactive UI updates
💥 Benefits:
Less complex code structure
Better performance
Easier debugging
Improved scalability
⚡ My Take
This is easily one of the most impactful updates in FlutterFlow in recent times.

It solves a real problem developers face when scaling apps and introduces a pattern that aligns with how modern applications are built.

🧩 Final Thoughts
FlutterFlow continues to evolve beyond just a UI builder — it’s becoming a serious development platform capable of handling complex applications.

App Events are a big step in that direction.

👉 If you haven’t explored it yet, now is the time.

FlutterFlow #NoCode #LowCode #AppDevelopment #MobileDevelopment #Firebase #UIUX #TechUpdate #Developers

🚀 1. How I Built a Production-Ready AI Chat App in FlutterFlow (With OpenAI + Firebase)

Codexlancers — Fri, 08 May 2026 04:30:00 +0000

Introduction
AI is everywhere in 2026 — but building a production-ready AI chat app is still challenging, especially when using low-code tools like FlutterFlow.

In this article, I’ll walk you through how I built a scalable AI chat system using FlutterFlow + Firebase + OpenAI API.

🧠 Architecture Overview
My setup looks like this:

Frontend → FlutterFlow UI
Backend → Firebase (Firestore + Cloud Functions)
AI Engine → OpenAI API
Storage → Chat history in Firestore

💬** Chat Data Structure**
Each message is stored like this:

{
"userId": "123",
"message": "Hello AI",
"response": "Hi, how can I help?",
"timestamp": "server_time"
}

👉 This allows:

Easy chat history retrieval
Real-time UI updates
Scalable structure 🔐 Securing OpenAI API Never expose your API key in the frontend.

Instead:

Use Firebase Cloud Functions
Send request → backend → OpenAI → return response This keeps your app secure.

⚡ Handling Token Usage (Cost Control)
AI APIs can get expensive.

What I did:

Limit message length
Store token usage
Restrict free users (daily limit)

🎯 UI Challenges & Solutions
Problem:

Chat UI lag with many messages
Solution:
Pagination
Lazy loading
Efficient Firestore queries

🚀 Final Result

Real-time AI chat
Scalable backend
Controlled cost
Smooth UI 💡 Final Thoughts FlutterFlow is powerful — but combining it with backend logic is the real game-changer.

FlutterFlow + RevenueCat: Complete Guide to Subscription Apps

Codexlancers — Thu, 07 May 2026 04:30:00 +0000

Introduction
If you’re building a SaaS or premium mobile app, subscriptions are one of the most reliable monetization models.

But implementing subscriptions correctly is not just about adding a payment button — it involves:

Secure validation
Real-time status updates
Handling edge cases (expiry, restore, refunds) In this guide, I’ll walk you through how I implemented a production-ready subscription system using FlutterFlow + RevenueCat + Firebase.

💰 Why RevenueCat?
Instead of directly handling App Store / Play Store billing, I used RevenueCat because it simplifies everything.

Key Benefits:

✅ Single integration for both iOS & Android
✅ Handles receipts, validation, and renewals
✅ Real-time subscription status via webhooks
✅ Reduces development complexity 👉 Without RevenueCat, managing subscriptions manually becomes very complex.

🏗️ System Architecture (Simple View)
Here’s how the system works:

FlutterFlow App (Frontend)
→ User interacts with UI (Upgrade, Restore)
RevenueCat SDK
→ Handles purchase flow
RevenueCat Server
→ Validates transactions
Firebase (Firestore + Cloud Functions)
→ Stores subscription status & triggers updates

🔄 Complete Subscription Flow
Here’s the exact flow I implemented:

1. User Action
User clicks “Upgrade to Premium”

2. Purchase Trigger
RevenueCat SDK opens native purchase screen (App Store / Play Store)

3. Payment Processing
Payment handled securely by Apple/Google
RevenueCat validates purchase
4. Webhook Trigger
RevenueCat sends event → Firebase Cloud Function

5. Firestore Update
User document is updated:

{
"isPremium": true,
"plan": "monthly",
"expiryDate": "timestamp"
}

6. UI Update

FlutterFlow listens to Firestore
Premium features unlock instantly 🧾 Firestore Database Structure To keep things scalable and clean, I used this structure:

🔹 users collection

{
"userId": "123",
"isPremium": true,
"plan": "yearly",
"expiryDate": "timestamp"
}

🔹 subscriptions collection

{
"planId": "monthly_001",
"price": 9.99,
"duration": "1 month"
}

🔹 events collection (VERY IMPORTANT)

{
"userId": "123",
"eventType": "PURCHASE",
"timestamp": "server_time"
}

👉 This helps in:

Tracking revenue
Debugging issues
Analytics ⚠️ Handling Edge Cases (Most Developers Miss This) This is where most apps fail ❌

1. Expired Subscription

Check expiryDate regularly
Disable premium access automatically
2. Restore Purchases
Add Restore button
Sync with RevenueCat
Update Firestore again

3. Cancelled Subscription

User cancels from App Store
RevenueCat webhook updates backend
Access removed after expiry
4. Refunds
RevenueCat sends refund event
Immediately update user access
🔐 Backend Validation (CRITICAL)
Never trust frontend logic ❌

Always validate subscription from backend using:

RevenueCat webhooks
Firebase Cloud Functions
👉 Why?
Prevents fake unlock hacks
Ensures real subscription status
Keeps your app secure
⚡ Performance & Cost Optimization
Here’s what I optimized:

🔹 Avoid Excessive Reads

Store only required subscription fields
Don’t fetch full history every time
🔹 Use Real-Time Listeners Smartly
Listen only to user document
Avoid unnecessary listeners
🔹 Cache Subscription Status
Reduce repeated API calls
🎯 UI Best Practices (Conversion Focused)
Subscription UI is not just design — it impacts revenue 💰

What worked for me:

Highlight best plan (yearly)
Show discount badge (Save 30%)
Clear CTA: “Upgrade Now”
Add trust elements (secure payment, cancel anytime)

🚀 Final Result
After implementing this system:

✅ Smooth and secure purchase flow
✅ Real-time subscription updates
✅ Scalable backend architecture
✅ Reduced bugs and edge case failures

💡 Final Thoughts
FlutterFlow + RevenueCat is a powerful combination for building subscription-based apps quickly.

But the real difference comes from:

Proper backend validation
Clean database design
Handling real-world edge cases 👉 That’s what turns a basic app into a production-ready SaaS product.

🚀 Flutter Performance Optimization: 10 Proven Tips to Make Your App Faster

Codexlancers — Wed, 06 May 2026 12:30:00 +0000

Flutter makes it incredibly easy to build beautiful cross-platform apps. But as your app grows, performance can quickly become a bottleneck — laggy UI, dropped frames, slow builds… and frustrated users.

In today’s competitive app ecosystem, performance is not optional. Users expect smooth animations, fast load times, and responsive interactions. Even a delay of a few milliseconds can impact user retention.

In this guide, we’ll explore 10 practical and proven tips to optimize your Flutter app performance — with clear explanations and code examples where needed.
🔧 1. Minimize Unnecessary Widget Rebuilds
Why it matters:
Frequent widget rebuilds can slow down your app and cause UI lag.

Best Practices

Use const widgets wherever possible
Use efficient builders like:
ValueListenableBuilder
Selector (Provider)
Obx (GetX)

Example:

ValueListenableBuilder<int>(
  valueListenable: counter,
  builder: (context, value, child) {
    return Text('$value');
  },
);

const Text("Hello Flutter");

Benefit:

Reduces unnecessary rebuilds
Improves rendering performance 🧠 2. Choose the Right State Management Why it matters: Poor state management = unnecessary UI updates.

Recommended:

GetX → lightweight, fast
Riverpod → scalable
Provider → simple apps Tip: Avoid calling setState() for large widgets.

🚀 3. Offload Heavy Tasks Using compute() (Multithreading)
Why it matters
Running heavy tasks on the main thread causes UI freezes and dropped frames.

Solution
Use compute() to run expensive operations in a separate isolate.

Example:

import 'package:flutter/foundation.dart';

int heavyTask(int value) {
  return value * 2;
}

final result = await compute(heavyTask, 10);

Benefit:

Smooth UI performance
Prevents frame drops
Better user experience 🖼️ 4. Optimize Images Why it matters: Large images = memory + performance issues.

Best Practices:

Use compressed images
Use cacheWidth / cacheHeight Example:

Image.network(
  imageUrl,
  cacheWidth: 300,
);

Bonus:
Use cached_network_image for caching.

⚡ 5. Use ListView.builder for Large Lists
Why it matters:
Rendering all items at once is expensive.

Example:

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return Text(items[index]);
  },
);

Benefit:

Lazy loading
Better memory usage

🎯 6. Avoid Heavy Work in build() Method
Why it matters:
build() runs frequently — keep it lightweight.

❌ Bad:

Widget build(BuildContext context) {
  final data = fetchData(); // expensive
  return Text(data);
}

✅ Good:

Future<String>? data;

@override
void initState() {
  super.initState();
  data = fetchData();
}

🎞️ 7. Use RepaintBoundary to Reduce Repaints
Why it matters:
Prevents unnecessary repainting of UI parts.

Example:

RepaintBoundary(
  child: YourWidget(),
);

Use Case:

Complex UI
Animations
Charts ⏳ 8. Optimize Animations Why it matters: Poor animations = dropped frames.

Tips:
Use AnimatedContainer instead of manual animation
Avoid rebuilding parent widgets during animation
Example:

AnimatedContainer(
  duration: Duration(milliseconds: 300),
  width: isExpanded ? 200 : 100,
);

📦 9. Reduce Widget Tree Depth
Why it matters:
Deep widget trees increase layout calculation time.

Tip:
Avoid unnecessary nesting
Use helper widgets
❌ Bad:

Container(
  child: Padding(
    child: Align(
      child: Text("Hello"),
    ),
  ),
);

✅ Good:

Padding(
  padding: EdgeInsets.all(8),
  child: Text("Hello"),
);

🧪 10. Use Flutter DevTools for Profiling
Why it matters:
You can’t fix what you can’t measure.

Tools:

Performance tab
Memory tab
Widget rebuild stats Command:

flutter run --profile

What to check:

Frame rendering time (16ms target)
Jank (frame drops)
Memory usage

🏁 Conclusion
Optimizing Flutter performance isn’t about one magic trick — it’s about small, consistent improvements across your app.

Key Takeaways:

Use const and avoid unnecessary rebuilds
Optimize images and lists
Keep build() clean
Use proper state management
Measure performance using DevTools

If you apply even 5–6 of these tips, you’ll already notice a huge improvement in your app’s speed and smoothness.

🚀 FF Designer: AI-Powered UI Generation for FlutterFlow Builders

Codexlancers — Wed, 06 May 2026 04:30:00 +0000

💡 Introduction
If you’re building apps with FlutterFlow, there’s an exciting new tool you should definitely explore —** FF Designer**.

It’s an AI-powered design tool that can generate high-quality app screens in seconds, while still giving you full control to edit and customize everything.

In this article, let’s take a quick look at what FF Designer offers and why it’s a game-changer for developers and designers.

✨ What is FF Designer?
FF Designer is a newly launched tool by FlutterFlow that uses AI to generate UI screens from natural language prompts.

Instead of manually designing every screen, you can simply describe what you want — and the tool creates a ready-to-use UI instantly.

👉 Think of it as combining design + AI + FlutterFlow workflow into one powerful experience.

🔥 Key Features
🧠 AI-Powered UI Generation
Create complete app screens using simple prompts like:

“Create a fitness dashboard with stats and progress charts”

Within seconds, FF Designer generates a structured, visually appealing layout.

🎨 Visual Editing (Like FlutterFlow)
You can:

Modify components visually
Adjust layouts, colors, and spacing
Customize elements just like you would in FlutterFlow No learning curve — it feels familiar and intuitive.

🔗 Easy Integration with FlutterFlow

Import generated designs directly into your FlutterFlow project
Export assets for other workflows This makes it easy to move from idea → design → development seamlessly.

🚀 Why This Matters
This launch reflects a bigger shift:
👉 AI is no longer just experimental — it’s becoming a practical productivity tool.

With FF Designer:

⚡ Designers can prototype faster
🧑‍💻 Developers can skip repetitive UI work
🚀 Teams can move from idea to execution much quicker 🧪 Inspired by Dreamflow FF Designer builds on concepts introduced in Dreamflow, showing how AI can assist in real-world development workflows — not just generate ideas, but actually help build usable UI.

🎯 Who Should Use It?
FF Designer is perfect for:

📱 App developers using FlutterFlow
🎨 UI/UX designers
🚀 Startup founders building MVPs
🧪 Anyone prototyping ideas quickly

🔗 Try It Yourself
You can explore FF Designer here:
👉 https://designer.flutterflow.io/

🔚 Conclusion
FF Designer is a strong step toward the future of app development — where AI assists creativity instead of replacing it.

If you’re already using FlutterFlow, this tool can significantly speed up your workflow and help you build better UI faster.

✨ Final Thoughts
Low-code is evolving.
AI is accelerating it.

And tools like FF Designer are bringing both together in a powerful way.

FlutterFlow #AI #Mobile Development #UI Design #No Code