DEV Community: Codexlancers

🔔 Flutter Push Notifications (Foreground, Background, Terminated) — Complete Fix Guide

Codexlancers — Tue, 02 Jun 2026 06:07:09 +0000

Push notifications in Flutter look easy…
until you actually try to implement them.

Everything seems fine - until:

Notifications don't show in foreground
Background handlers never trigger
And terminated state? Completely broken.

If you've been there… yeah, same

We've faced all of this while working on a production app, and this guide is the exact setup that finally worked.

First - Understand Notification States (This is where most people go wrong)
Before writing a single line of code, you need to understand this:

👉 Each state behaves differently. And if you treat them the same, things will break.

Basic Setup

1. Add dependencies

// pubspec.yaml

firebase_core: ^4.6.0
firebase_messaging: ^16.1.3
flutter_local_notifications: ^21.0.0

2. Initialize Firebase

Before using FCM, initialize Firebase when your app starts:

await Firebase.initializeApp();

3. Request Notification Permission

This step is mandatory on iOS and Android 13+.

FirebaseMessaging messaging = FirebaseMessaging.instance;

await messaging.requestPermission(
  alert: true,
  badge: true,
  sound: true,
);

Why is this important?

Starting from Android 13, Android requires explicit notification permission, similar to iOS.

If permission is not granted, notifications won't appear.

Android Notification Channel (Must for Android)

Without this, notifications may not show or may appear silently.

const AndroidNotificationChannel channel = AndroidNotificationChannel(
  'high_importance_channel',
  'High Importance Notifications',
  description: 'This channel is used for important notifications.',
  importance: Importance.high,
);

final FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
    FlutterLocalNotificationsPlugin();

await flutterLocalNotificationsPlugin
    .resolvePlatformSpecificImplementation<
        AndroidFlutterLocalNotificationsPlugin>()
    ?.createNotificationChannel(channel);

iOS Foreground Notification Setup

iOS requires this to properly show notifications in foreground:

await FirebaseMessaging.instance
    .setForegroundNotificationPresentationOptions(
  alert: true,
  badge: true,
  sound: true,
);

👉 Without this, notifications may not appear even if everything else is correct.

Foreground Notifications (Most Common Confusion)

The problem

You send a notification and nothing shows when the app is open.
Feels like it's broken, right?

The reality

FCM does NOT display notifications in foreground.

The fix

You must show it manually using local notifications:

FirebaseMessaging.onMessage.listen((RemoteMessage message) {
  showLocalNotification(message);
});

💡 This is where most developers get stuck initially.

Background Notifications

This is where things start working automatically, but only if you do it right.

Works automatically IF your payload includes:

{
  "notification": {
    "title": "Hello",
    "body": "World"
  }
}

⚠️ Using data-only payload?

Then you MUST handle it manually:

FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);

Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  await Firebase.initializeApp(); // Required in background isolate
  print("Handling background message");
}

👉 Also, this function must be top-level.
(Not inside a class - easy mistake.)

Terminated State (Most Confusing Part)

This is where most implementations fail.

The issue

User taps notification → app opens → but nothing happens.

The fix

Handle the initial message:

RemoteMessage? initialMessage =
    await FirebaseMessaging.instance.getInitialMessage();

if (initialMessage != null) {
  handleNotificationClick(initialMessage);
}

Also listen when app is opened from background:

FirebaseMessaging.onMessageOpenedApp.listen((message) {
  handleNotificationClick(message);
});

👉 Without this, deep linking or navigation won't work.

Navigation Tip

handleNotificationClick() should:

Read payload data
Navigate to a specific screen

Local Notification Setup (Required for Foreground)

Without this, your foreground notifications will never show.

FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
    FlutterLocalNotificationsPlugin();

void showLocalNotification(RemoteMessage message) async {
  var androidDetails = AndroidNotificationDetails(
    'channel_id',
    'channel_name',
    importance: Importance.max,
    priority: Priority.high,
  );

  var generalNotificationDetails =
      NotificationDetails(android: androidDetails);

  await flutterLocalNotificationsPlugin.show(
    0,
    message.notification?.title,
    message.notification?.body,
    generalNotificationDetails,
  );
}

Common Mistakes (From Real Experience)

Not asking notification permission (Android 13+ especially)
Expecting foreground notifications to show automatically
Using only data payload and expecting UI
Background handler inside a class (won't work)
Forgetting getInitialMessage()

👉 We've personally hit almost all of these 😅

Final Thoughts

Push notifications in Flutter are not plug-and-play.
They require:

Proper setup
Understanding of app states
Correct payload structure

Key Takeaway

If your notifications are not working, 90% of the time:
👉 You didn't handle foreground manually
👉 OR your payload is wrong

If your notifications are not working on iOS or APNs token is not generating, check this:
👉 Flutter APNs Token Not Generating (Complete Fix Guide)

If this saved you hours of debugging, consider following for more Flutter deep dives.

HeyGen vs Tavus vs Anam

Codexlancers — Mon, 25 May 2026 11:12:25 +0000

The Real Difference Nobody Explains Properly
The AI avatar industry is exploding right now.

Every week, a new “AI human” platform appears online claiming:

➪ realistic avatars
➪ live conversations
➪ AI agents
➪ emotional interaction
➪ digital humans

But here’s the problem:

Most people compare platforms like:

➪ HeyGen
➪ Tavus
➪ Anam

as if they are the same type of product.

They are NOT.

And this confusion causes many startups and mobile app builders to choose the wrong platform.

Because in reality:

➪ HeyGen is mainly an AI video generation platform
➪ Tavus is a full conversational AI avatar platform
➪ Anam is primarily an avatar rendering platform

That distinction changes everything.

The Simplest Explanation
HeyGen → Creates AI videos
Tavus → Provides full AI conversation system with avatar
Anam → Provides realistic avatar rendering only

This is the most important thing to understand before integrating any of them into a mobile app.

1. HeyGen — Best for AI Video Generation
HeyGen Official Website

HeyGen became popular because it made AI avatars easy for everyone.

You simply:

➪ Type a script
➪ Choose an avatar
➪ Generate a video

And within minutes, you get a professional-looking AI spokesperson.

What HeyGen Is Actually Good At
HeyGen is excellent for:

➪ marketing videos
➪ training videos
➪ YouTube content
➪ onboarding videos
➪ multilingual content
➪ AI presentations

And honestly, for content creation, it’s one of the easiest platforms available.

2. Tavus — A Complete Conversational AI Human Platform
Tavus Official Website

This is where things become very different.Tavus is NOT just an avatar platform.

It’s a:
full conversational AI human system.

That means Tavus handles much more than just showing a face on screen.

What Tavus Actually Provides
Tavus provides:

➪ live face-to-face AI conversations
➪ real-time interaction
➪ conversational flow
➪ interruption handling
➪ session management
➪ memory systems
➪ AI orchestration
➪ conversational behaviors
➪ streaming infrastructure

This is a huge difference compared to simple avatar platforms.

Tavus Feels Like Talking to an AI Person
With Tavus:

➪ users can speak naturally
➪ the AI responds live
➪ conversations feel dynamic
➪ the avatar reacts in real time
➪ interactions feel more human

Instead of:

watching an AI video
it feels closer to:
talking with an AI human on a video call.

Tavus Includes AI Conversation Logic
This is the part many people misunderstand.Tavus is not just rendering a face.

It also helps manage:

➪ conversation sessions
➪ interaction timing
➪ response behavior
➪ live communication flow
➪ conversational experience

So developers do not need to build everything from scratch.

3. Anam — Mainly an Avatar Rendering Platform
Anam Official Website

Now let’s talk about Anam.
Anam is actually very impressive visually.

The avatars often look:

➪ cinematic
➪ premium
➪ realistic
➪ high-quality

But here’s the important distinction:
Anam mainly focuses on:
avatar rendering and visual experience.

Not full conversational AI infrastructure.

What Anam Actually Provides
Anam mainly provides:

➪ realistic avatar rendering
➪ facial animation
➪ lip sync
➪ digital human visuals
➪ avatar streaming

It focuses heavily on: how the AI human looks.

What Anam Does NOT Fully Handle
Compared to Tavus, Anam does NOT fully provide:

➪ advanced session management
➪ built-in conversational memory
➪ complete AI orchestration
➪ full conversational flow systems
➪ trained AI behavior systems
➪ ready-made conversational infrastructure

This means:
developers usually need to build these systems separately.

The REAL Comparison

So Which One Should You Choose?
Choose HeyGen If…
You mainly want:

➪ AI videos
➪ marketing content
➪ training videos
➪ social media content

Choose Tavus If…
You want:

➪ real-time AI conversations
➪ AI companions
➪ AI tutors
➪ AI support agents
➪ conversational AI humans

because Tavus provides:

➪ session handling
➪ conversational systems
➪ memory support
➪ interaction infrastructure

not just avatars.

Choose Anam If…
You want:

➪ highly realistic avatar visuals
➪ premium digital humans
➪ custom AI workflows
➪ your own backend AI system

and you are comfortable building:

➪ memory systems
➪ conversational orchestration
➪ session management
➪ AI logic

yourself.

Struggling with Twilio Voice Call Integration in Flutter? twilio_voice_flutter Solves It!

Codexlancers — Wed, 20 May 2026 12:50:00 +0000

The twilio_voice_flutter plugin simplifies integration with Twilio’s Programmable Voice SDK, enabling VoIP calling within your Flutter apps. It supports both iOS and Android, offering an easy-to-use API for managing calls. Ideal for customer service, communication, or any app needing real-time voice, it leverages Twilio’s reliable infrastructure to deliver high-quality VoIP features.

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

dependencies:
  twilio_voice_flutter: ^0.0.3

And import package into your class file

import 'package:twilio_voice_flutter/twilio_voice_flutter.dart';

Important Note
⚠️ This plugin requires Firebase setup for Twilio voice calls! It uses FCM tokens for handling calls on Android 📲 and VoIP notifications for iOS 📞. Ensure both platforms are properly configured for smooth call functionality. ⚠️

Platform Setup
Android
To integrate the Twilio Voice plugin into your Android project, follow these steps:

Open your project’s AndroidManifest.xml file.
Add the following service declaration inside the tag:

<application>
    ...
    <service
        android:name="com.twilio.voice.flutter.fcm.VoiceFirebaseMessagingService"
        android:exported="false"
        android:stopWithTask="false">
        <intent-filter> 
            <action android:name="com.google.firebase.MESSAGING_EVENT" />
        </intent-filter> 
    </service>
    ...
</application>

iOS
To configure your iOS project to support VoIP calls, follow these steps:

Open your project in Xcode.
Select your project from the Project Navigator.
Go to the Signing & Capabilities tab.
Enable the following Background Modes:
Audio, AirPlay, and Picture in Picture: Allows your app to continue playing audio while in the background.
Voice over IP: Enables your app to receive incoming VoIP calls while in the background.
Ensure that your Info.plist file includes the required keys:

<key>UIBackgroundModes</key>
<array>
    <string>audio</string>
    <string>voip</string>
</array>

🔑 Twilio Voice Call Access Token Setup
This plugin supports Twilio voice calls for both Android and iOS. To generate the access token and enable Twilio calls, follow the steps in the official Twilio repositories:

https://github.com/twilio/voice-quickstart-android
https://github.com/twilio/voice-quickstart-ios

These repositories provide detailed instructions for generating access tokens and making voice calls through Twilio on both Android and iOS platforms. ⚡ Make sure to follow the steps outlined to successfully integrate Twilio voice functionality into your application.

Setting Up Twilio Token
The setTwilioToken function is used to register a user's identity with Twilio Voice using the provided access token. This function handles the retrieval of the Firebase Cloud Messaging (FCM) token on Android devices and registers the user with Twilio Voice.

static Future<bool> setTwilioToken(String identity, String accessToken) async {
    try{
      String accessToken = await _getAccessToken(identity);
      if (Platform.isAndroid) {
        String? fcmToken = await FirebaseMessaging.instance.getToken() ?? "";
        await TwilioVoiceFlutter.register(
            identity: identity, accessToken: accessToken, fcmToken: fcmToken);
      } else {
        await TwilioVoiceFlutter.register(
            identity: identity, accessToken: accessToken, fcmToken: "");
      }
      return true;
    }catch(_){
      return false;
    }
}

🔗 Visit example for more info… 😊

Features
The Twilio Voice Plugin for Flutter enables seamless integration of voice-over-IP (VoIP) calling into your Flutter applications. Below are the key features supported by this plugin:

1. VoIP Call Management
Initiate Calls: Easily start a VoIP call to any recipient using the makeCall method, with the ability to pass custom call data.

Initiate Calls: Easily start a VoIP call to any recipient using the makeCall method, with the ability to pass custom call data.
Receive Incoming Calls: Handle incoming call invites via push notifications, and answer calls using built-in CallKit support on iOS.
Call Status Notifications: Stay updated on call status changes such as ringing, connecting, and disconnecting through Flutter MethodChannel callbacks.

2. In-Call Controls
Mute/Unmute Calls: Toggle the mute status of the ongoing call using the toggleMute method. Check if the call is currently muted with the isMuted method.
Speakerphone Control: Switch between the device’s built-in speaker and receiver during an ongoing call using toggleSpeaker. Verify the current audio route with isSpeaker.

3. CallKit Integration for iOS
CallKit Support: Utilize native CallKit functionality on iOS for managing incoming and outgoing VoIP calls, ensuring a familiar user experience.
Incoming Call Handling: Report incoming calls to CallKit, allowing the system to display the native call UI and handle interruptions correctly.
Background VoIP Support: Ensure your app can receive VoIP calls while in the background by enabling the necessary background modes and configuring the Info.plist accordingly.

4. Push Notification Support
VoIP Push Notifications: Register and handle VoIP push notifications via Firebase Cloud Messaging (FCM) on Android and Apple Push Notification service (APNs) on iOS.
Push Credential Management: Manage device and access tokens required for receiving VoIP push notifications, ensuring reliable communication.

5. DTMF (Dual-tone Multi-frequency) Signaling
Send DTMF Digits: During an active call, send DTMF tones (e.g., for interacting with automated phone systems) using the sendDigits method.

6. Contact Management
Custom Contact Data: Store and retrieve custom contact data (like display names and photo URLs) to enhance the calling experience with personalized information.

7. Persistent Data Storage
Token and Contact Data Persistence: Securely store and retrieve access tokens and contact data using UserDefaults on iOS to maintain state across app sessions.

8. Call Handling with Error Management
Graceful Error Handling: Comprehensive error handling ensures that issues like token expiration or failed call connections are managed and reported to the user effectively.
With these features, the Twilio Voice Plugin provides a robust foundation for integrating voice communication into your Flutter applications, supporting a wide range of use cases from customer support to in-app

Function Overview
registerTwilio(): Registers the device with Twilio using the access token and device token for VoIP push notifications.
unregisterTwilio(): Unregisters the device from Twilio VoIP push notifications, removing the access token and device token.
makeCall(String to): Initiates a voice call to the specified recipient. If an active call exists, it returns an error.
toggleMute(): Toggles the mute status of the ongoing call. Notifies the Flutter side of the change.
isMuted(): Returns the current mute status of the ongoing call.
toggleSpeaker(): Toggles the speaker mode during an ongoing call. Notifies the Flutter side of the change.
isSpeaker() -> Bool: Checks if the speaker mode is currently active.
hangUp(): Ends the current call. If no active call exists, it clears the call-related data.
activeCall(): Returns details of the active call if one exists.
sendDigits(String digits): Sends DTMF digits during an active call.
For more information, check out the below link

twilio_voice_flutter | Flutter package

Voice SDK to allow adding voice-over-IP (VoIP) calling into your Flutter applications.

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!

Struggling with Icloud Data Sync Issues? Let iCloud_Storage_Sync Handle It!

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

In the ever-evolving world of mobile app development, providing a seamless user experience across multiple devices is no longer a luxury — it’s a necessity. Enter the iCloud_Storage_Sync plugin, a game-changing solution for Flutter developers looking to harness the power of iCloud in their iOS applications. This comprehensive guide will walk you through everything you need to know about this powerful tool and how it can elevate your app to new heights.

🛠 Setting Up iCloud Container: A Step-by-Step Guide
Before diving into the features and implementation of the iCloud_Storage_Sync plugin, it’s crucial to properly set up your iCloud Container. Here’s a detailed walkthrough:

👤 Access Your Apple Developer Account Log in and navigate to ‘Certificates, IDs & Profiles’.
🆔 Create Necessary IDs Set up an App ID (if you haven’t already) and create an iCloud Containers ID.

🔗 Link iCloud Container to Your App Assign the iCloud Container to your App ID in the Apple Developer portal.

💻 Configure Xcode Enable the iCloud capability in your Xcode project and select your container.

Following these steps ensures that your app is properly set up to use iCloud storage, paving the way for seamless integration with the iCloud_Storage_Sync plugin.

🌟 Introduction: Bridging Flutter and iCloud
The iCloud_Storage_Sync plugin is designed to simplify the integration of iCloud storage capabilities into your Flutter iOS apps. By leveraging this plugin, you can offer your users:

🔄 Effortless backup and synchronization of app data
📱💻 A consistent user experience across all their Apple devices
🔒 Secure storage and retrieval of important information
☁️ Seamless integration with the iCloud ecosystem

Whether you’re building a note-taking app, a photo storage solution, or any application that benefits from cloud synchronization, iCloud_Storage_Sync provides the tools you need to create a robust, user-friendly experience.

✨ Features: A Deep Dive
Let’s explore the core features that make iCloud_Storage_Sync a must-have for your Flutter iOS project:

📂** Get iCloud Files**
Retrieve files stored in iCloud with ease. This feature allows your app to access user data across devices, ensuring a consistent experience no matter where they log in.
⬆️** Upload Files to iCloud**
Empower your users to store their important files securely in the cloud. With simple upload functionality, you can offer peace of mind and accessibility.
✏️ Rename iCloud Files
Provide users with the flexibility to organize their cloud storage. The ability to rename files directly within your app adds a layer of convenience to file management.
🗑️ Delete iCloud Files
Keep cloud storage tidy with straightforward file deletion. This feature ensures users can manage their storage space efficiently.
↔️ Move iCloud Files
Enhance file organization by allowing users to move files between folders in their iCloud storage, all from within your app.

These features combine to create a comprehensive iCloud management system within your Flutter app, offering users the full power of cloud storage at their fingertips.

🚀 Getting Started: From Installation to Implementation
Step 1: 🛠️ Installation
Begin by adding the iCloud_Storage_Sync plugin to your ‘pubspec.yaml’ file:

dependencies:
 icloud_storage_sync: ^0.0.1

Step 2: ⚙️ Install the Plugin
Run the following command in your terminal:

“flutter pub get”

Step 3: 💻 Usage in Your Dart Code
Import the plugin in your Dart files:

import 'package:icloud_storage_sync/icloud_storage_sync.dart';

With these simple steps, you’re ready to start integrating iCloud functionality into your Flutter app.

📋 Prerequisites: Setting the Stage for Success
Before diving into implementation, ensure you have the following in place:

☑️ An active Apple Developer account
☑️ A registered App ID and iCloud Container ID
☑️ iCloud capability enabled and assigned to your app
☑️ iCloud capability properly configured in Xcode

🧰 API Examples: Bringing iCloud to Life in Your App
Let’s explore how to implement each of the core features in your Flutter app:

📥 Getting iCloud Files
Retrieve a list of files stored in iCloud:

Future<List<CloudFiles>> getCloudFiles({required String containerId}) async {
 return await icloudSyncPlugin.getCloudFiles(containerId: containerId);
}

📤 Uploading Files to iCloud
Upload files to iCloud with progress tracking:

Future<void> upload({
 required String containerId,
 required String filePath,
 String? destinationRelativePath,
 StreamHandler<double>? onProgress,
}) async {
 await icloudSyncPlugin.upload(
 containerId: containerId,
 filePath: filePath,
 destinationRelativePath: destinationRelativePath,
 onProgress: onProgress,
 );
}

🏷️ Renaming iCloud Files
Allow users to rename their files in iCloud:

Future<void> rename({
 required String containerId,
 required String relativePath, 
 required String newName,
}) async {
 await icloudSyncPlugin.rename(
 containerId: containerId,
 relativePath: relativePath,
 newName: newName,
 ); 
}

🗑️ Deleting iCloud Files
Implement file deletion functionality:

Future<void> delete({
 required String containerId,
 required String relativePath,
}) async {
 await icloudSyncPlugin.delete(
 containerId: containerId,
 relativePath: relativePath,
 );
}

🔀 Moving iCloud Files
Enable users to organize their files by moving them within iCloud:

Future<void> move({
 required String containerId, 
 required String fromRelativePath,
 required String toRelativePath, 
}) async {
 await IcloudSyncPlatform.instance.move(
 containerId: containerId,
 fromRelativePath: fromRelativePath,
 toRelativePath: toRelativePath,
 );
}

These code snippets demonstrate the simplicity and power of the iCloud_Storage_Sync plugin. With just a few lines of code, you can implement robust cloud storage features in your Flutter app.

🚀 Real-World Applications: Unleashing the Potential
The iCloud_Storage_Sync plugin opens up a world of possibilities for your Flutter iOS app. Here are some practical applications:

📝 Note-Taking Apps: Sync notes across devices, ensuring users always have access to their latest thoughts.
📸 Photo Storage Solutions: Offer seamless backup and access to photos across all Apple devices.
📚 Document Management: Create a robust system for storing, organizing, and accessing important documents in the cloud.
🎮 Game Progress Sync: Keep game saves and progress in sync, allowing users to pick up where they left off on any device.
📅 Productivity Apps: Synchronize tasks, calendars, and reminders to keep users organized across their Apple ecosystem.

By implementing iCloud sync, you’re not just adding a feature — you’re enhancing the overall user experience and adding significant value to your app.

🤝** Contributing: Join the Community**
The iCloud_Storage_Sync plugin is an open-source project, and we welcome contributions from the developer community. Whether you’re fixing bugs, improving documentation, or adding new features, your input is valuable.

Check out our [GitHub repository]

icloud_storage_sync to get started. Don’t forget to review our contribution guidelines to ensure a smooth collaboration process.

🌟** Conclusion: Elevate Your Flutter App with iCloud Integration**
The iCloud_Storage_Sync plugin represents a significant leap forward for Flutter developers looking to create seamless, cloud-connected iOS applications. By leveraging the power of iCloud, you can offer your users a premium experience that keeps their data secure, accessible, and in sync across all their Apple devices.

From simple file storage to complex data synchronization, this plugin provides the tools you need to take your app to the next level. As the mobile app landscape continues to evolve, staying ahead of the curve with features like cloud integration is crucial for success.

We invite you to explore the iCloud_Storage_Sync plugin, integrate it into your projects, and experience firsthand the power of seamless cloud synchronization in your Flutter iOS apps. Your users — and your app’s success — will thank you.

Ready to get started? Download the plugin now and join the ranks of developers offering top-tier cloud integration in their Flutter apps!

For more information, check out the below link

icloud_storage_sync | Flutter package

Easily sync and secure your app's data with the iCloud Sync Flutter plugin for seamless iCloud integration.

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!

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.

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?

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

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

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

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.

DEV Community: Codexlancers

🔔 Flutter Push Notifications (Foreground, Background, Terminated) — Complete Fix Guide

Basic Setup

1. Add dependencies

2. Initialize Firebase

3. Request Notification Permission

Why is this important?

Android Notification Channel (Must for Android)

iOS Foreground Notification Setup

Foreground Notifications (Most Common Confusion)

The problem

The reality

The fix

Background Notifications

Works automatically IF your payload includes:

⚠️ Using data-only payload?

Terminated State (Most Confusing Part)

The issue

The fix

Navigation Tip

Local Notification Setup (Required for Foreground)

Common Mistakes (From Real Experience)

Final Thoughts

Key Takeaway

HeyGen vs Tavus vs Anam

Struggling with Twilio Voice Call Integration in Flutter? twilio_voice_flutter Solves It!

twilio_voice_flutter | Flutter package

Struggling with Icloud Data Sync Issues? Let iCloud_Storage_Sync Handle It!

icloud_storage_sync | Flutter package

Effortless Dart Coding with dart_extensions_pro

dart_extensions_pro | Flutter package

Flutter Zoom Meeting Wrapper

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

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

🚀 Integrating Tamara Payment Gateway in a FlutterFlow Application

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

Google & Apple Sign-In in Flutter

Table of Contents

01 / Introduction

Why Social Sign-In Still Matters in 2026

02 / Prerequisites

What You Need Before Starting

03 / Dependencies & Setup

Packages, pubspec, and Initialization

Create your .env file

Initialize Firebase and Google Sign-In in main.dart

04 / Google Cloud Configuration

Getting the Server Client ID (Web OAuth Client)

Google Cloud Console — Step-by-step walkthrough

05 / The Clean AuthService

Authentication Service Implementation

06 / Platform Configuration

Android — Google Sign-In

iOS — Google Sign-In

iOS — Apple Sign-In

07 / Debugging

Common Errors & Exact Fixes

08 / UI Example

09 / Conclusion

Summary & Best Practices

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

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

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