DEV Community: Terence Faid JABO

🔓 Unlock Your App's Potential: Master A/B Testing in Flutter with Firebase Remote Config!

Terence Faid JABO — Sat, 05 Jul 2025 12:52:21 +0000

Ever wondered why Instagram shows you one button color while your friend sees another? That's A/B testing in action – and you can add this superpower to your Flutter app too!

What Exactly is A/B Testing?

Think of A/B testing as running a friendly experiment with your app users. Instead of guessing what color button works best, you show half your users a blue button and half a green button. Then you measure which one gets more clicks. It's like having a crystal ball for app decisions!

Real example: Netflix famously tested their "Continue Watching" button placement and increased viewing time by 15% just by moving it to a different spot on the screen.

Why Should You Care About A/B Testing?

Let's be honest – we've all made app design decisions based on our personal preferences. "I like purple, so the app should be purple!" But what if your users actually prefer orange? A/B testing takes the guesswork out of these decisions.

The benefits are huge:

Better user experience: Your users get features they actually want
Higher engagement: More people use your app when it's optimized for them
Smart decisions: No more arguing about button colors in team meetings
Real data: You'll know exactly what works and what doesn't

The Magic Behind the Scenes: Firebase Remote Config

Here's where it gets exciting. Firebase Remote Config is like having a remote control for your app. You can change colors, text, or even entire features without asking users to update their apps.

Imagine you're running a food delivery app. With Remote Config, you could:

Change the "Order Now" button from blue to red for half your users
Test different promotional messages on the home screen
Switch between different layouts instantly
All without users downloading a new app version!

Building Your First A/B Test: A Step-by-Step Story

Let me walk you through creating your first A/B test with a simple example. We'll test different theme colors to see which one keeps users more engaged.

Step 1: Setting Up Your Testing Lab

First, you'll need to connect your Flutter app to Firebase. Think of Firebase as your testing control center where you'll monitor everything that happens.

Add these essential tools to your Flutter project:

# pubspec.yaml
dependencies:
  firebase_core: ^3.6.0
  firebase_remote_config: ^5.1.3
  firebase_analytics: ^11.3.3
  flutter_riverpod: ^2.6.1

What each tool does:

Firebase Remote Config: Your remote control for app changes
Firebase Analytics: Your detective for tracking user behavior
Riverpod: Your assistant for updating the app instantly when changes happen

Step 2: Creating the Smart App

Here's where the magic happens. Your app will be smart enough to:

Check Firebase for the latest settings when it starts
Update its appearance instantly when you change things remotely
Track how users interact with different versions
Keep working even if the internet is slow

First, let's define our A/B test parameters using enums for better code organization:

// Define your Remote Config parameters as enums for type safety
enum RemoteConfigKey {
  primaryColor('primaryColor'),
  buttonText('buttonText'),
  welcomeMessage('welcomeMessage');

  const RemoteConfigKey(this.key);
  final String key;
}

// Define possible values for better validation
enum ThemeColor {
  blue('blue'),
  green('green'),
  red('red');

  const ThemeColor(this.value);
  final String value;

  Color get color {
    switch (this) {
      case ThemeColor.blue: return Colors.blue;
      case ThemeColor.green: return Colors.green;
      case ThemeColor.red: return Colors.red;
    }
  }
}

Now here's the core code that makes this work:

// Set up your Remote Config with default values using enums
await remoteConfig.setDefaults({
  RemoteConfigKey.primaryColor.key: ThemeColor.blue.value,
  RemoteConfigKey.buttonText.key: 'Click Me!',
  RemoteConfigKey.welcomeMessage.key: 'Welcome to our app!',
});

// Get the latest configuration from Firebase
await remoteConfig.fetchAndActivate();

// Use the values in your app with type safety
String buttonText = remoteConfig.getString(RemoteConfigKey.buttonText.key);
String colorName = remoteConfig.getString(RemoteConfigKey.primaryColor.key);
ThemeColor themeColor = ThemeColor.values.firstWhere(
  (color) => color.value == colorName,
  orElse: () => ThemeColor.blue, // Safe fallback
);

Your app will automatically check Firebase for updates and apply them instantly. If a user has the app open and you change the button text from "Click Me!" to "Tap Here!" in Firebase, they'll see the change immediately!

Tracking user behavior is just as simple:

// Track when users click buttons with enum safety
await FirebaseAnalytics.instance.logEvent(
  name: 'button_clicked',
  parameters: {
    'button_variant': buttonText,
    'color_variant': themeColor.value, // Using enum value
  },
);

The beautiful part? Users never know they're part of an experiment. The app just works, and you get valuable insights about what they prefer.

Step 3: Setting Up Your First Experiment

In your Firebase dashboard (think of it as mission control), you'll create your experiment. Here's how it looks in practice:

Experiment Name: "Theme Color Test"
Question: "Do users click more buttons when the app is blue or green?"

Setting up targeting (who sees your test):

Defining your success goals (what you want to measure):

Creating different variants (the different versions users will see):

Your test will use these Remote Config parameters:

primaryColor: Controls the app's theme color (blue, green, red)
buttonText: Changes button labels ("Click Me!", "Tap Here!", "Press This!")
welcomeMessage: Tests different welcome messages for new users

Firebase will automatically split your users into these groups and track their behavior.

Once you've configured your experiment with the right targeting, goals, and variants, you'll hit the Publish button to make your A/B test go live. Then the magic begins – Firebase automatically starts showing different versions to different users while tracking their behavior.

Step 4: Watching the Results Roll In

This is the fun part! As users interact with your app, you'll see real-time data showing:

How many people clicked the button in each group
How long people spent in the app
Which version led to more purchases or sign-ups

Real-World Success Stories

Spotify used A/B testing to optimize their music discovery features. They found that showing album artwork 23% larger increased music exploration by 8%.

Airbnb tested different search result layouts and increased bookings by 12% simply by changing how photos were displayed.

Instagram tested story viewer interfaces and found that subtle changes in swipe gestures improved user retention by 6%.

Setting Up Your Testing Dashboard

Your Firebase console becomes your command center where you can:

Monitor live experiments: See results as they happen
Switch between versions: Turn features on or off instantly
Track user behavior: Understand what users really do (not what they say they do)
Make data-driven decisions: No more guessing games

What Makes a Great A/B Test?

Smart Test Ideas:

Button colors and text: "Click Me!" vs "Tap Here!" vs "Press This!"
Theme colors: Blue vs green vs red app themes (using our ThemeColor enum)
Welcome messages: Different greetings for new users
Layout changes: Horizontal vs vertical menu layouts
Feature placement: Where should the search bar go?

Test Setup Best Practices:

Start small: Test one thing at a time
Be patient: Let tests run long enough to get meaningful results
Think about your users: What actually matters to them?
Use enums for consistency: Define your test variants clearly to avoid typos
Have a backup plan: Always have a default version that works

The Smart Way to Deploy

When you're ready to go live, start small:

Test with 10% of users first: Make sure everything works smoothly
Monitor closely: Watch for any unexpected behavior
Scale gradually: Slowly increase to more users
Keep fallbacks ready: Always have a way to revert changes quickly

Here's how to set up safe testing intervals:

// For testing - quick updates
await remoteConfig.setConfigSettings(RemoteConfigSettings(
  fetchTimeout: const Duration(seconds: 10),
  minimumFetchInterval: const Duration(seconds: 30),
));

// For production - slower, more stable
await remoteConfig.setConfigSettings(RemoteConfigSettings(
  fetchTimeout: const Duration(seconds: 10),
  minimumFetchInterval: const Duration(hours: 1),
));

Common Mistakes to Avoid

Don't test too many things at once: If you change the button color AND the text AND the layout, you won't know which change caused the improvement.

Don't end tests too early: Sometimes initial results are misleading. Give your test time to gather enough data.

Don't ignore small improvements: A 2% improvement might seem tiny, but across millions of users, that's huge!

Don't forget error handling: Always have fallback values in case Firebase is unavailable:

// Safe way to get Remote Config values using enums
ThemeColor getThemeColor() {
  try {
    String colorValue = remoteConfig.getString(RemoteConfigKey.primaryColor.key);
    return ThemeColor.values.firstWhere(
      (color) => color.value == colorValue,
      orElse: () => ThemeColor.blue, // Safe fallback
    );
  } catch (e) {
    return ThemeColor.blue; // Default fallback
  }
}

String getButtonText() {
  try {
    return remoteConfig.getString(RemoteConfigKey.buttonText.key);
  } catch (e) {
    return 'Click Me!'; // Safe fallback
  }
}

Don't test just for the sake of testing: Make sure your test could actually lead to better user experiences.

Your A/B Testing Toolkit

To get started, you'll need:

Flutter development environment: Your app-building workspace
Firebase account: Your testing control center (free to start)
Basic analytics knowledge: Understanding what metrics matter
Patience: Good experiments take time to show results

What's Next?

Once you've mastered basic A/B testing, you can explore:

Multivariate testing: Testing multiple elements simultaneously
Personalization: Showing different content based on user behavior
Advanced analytics: Deeper insights into user journeys
Automation: Automatically switching to winning variants

The Bottom Line

A/B testing isn't just for tech giants. With Flutter and Firebase, any developer can make data-driven decisions that improve user experiences. The best part? You don't need to be a statistics expert or have a huge budget.

Start with simple tests – maybe just changing a button color or testing different welcome messages. As you get comfortable with the process, you'll find yourself making smarter decisions and building apps that users truly love.

Ready to give it a try? Your users are waiting to show you what they really want – you just need to ask them the right way!

Have you tried A/B testing in your apps? What surprising results did you discover? Share your experiences in the comments – I'd love to hear your success stories!

📚 Resources and Source Code

Ready to start building? Here are the resources you need:

🔗 Complete Source Code: Flutter A/B Testing with Firebase - GitHub Repository

📖 Documentation Links:

🎯 Firebase Console Setup:

Flutter Deep Linking

Terence Faid JABO — Thu, 03 Jul 2025 11:50:42 +0000

Ever clicked a link and ended up exactly where you wanted to go? That's deep linking magic!

Imagine your friend finds a cool event on your app and wants to share it. Instead of texting you "Hey, search for Flutter Conference 2025 in that app," they just send a link. You tap it, and boom – you're looking at that exact event. No searching, no scrolling, no frustration.

That's what we're building today.

Why Deep Links Matter

Deep links are like shortcuts to specific parts of your app. They make your app feel connected to the rest of the digital world, not like a lonely island.

Here's what users get:

Instant access to shared content
No hunting through menus
Smooth experience from web to app

Here's what you get:

Better user experience (happy users stick around)
More effective marketing (links go straight to products)
Higher engagement (less friction = more action)

How Deep Links Work

Every deep link has parts, like a home address:

https://myapp.com/event/flutter-conference-2025

Breaking it down:

https:// - How to deliver the link
myapp.com - Your app's address
/event/flutter-conference-2025 - The specific page

You can also add extras:

?category=tech&date=2025 - Filters and options
#speakers - Jump to a specific section

Two Ways to Make Deep Links

Option 1: Custom Schemes (Easy Start)

myapp://event/flutter-conference

Good: Quick to set up, works without a website
Bad: Any app can steal your scheme, looks unprofessional

Option 2: HTTPS Links (Professional)

https://myapp.com/event/flutter-conference

Good: Secure, falls back to website, looks professional
Bad: Requires owning a domain, bit more setup

We recommend HTTPS links for real apps.

Setting Up Android

Step 1: Tell Android About Your Links

Open android/app/src/main/AndroidManifest.xml and add this inside your <activity> tag:

<intent-filter android:autoVerify="true">
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="https"
          android:host="myapp.com" />
</intent-filter>

Step 2: Prove You Own Your Domain

Create a file called assetlinks.json:

[
  {
    "relation": ["delegate_permission/common.handle_all_urls"],
    "target": {
      "namespace": "android_app",
      "package_name": "com.example.myapp",
      "sha256_cert_fingerprints": ["YOUR_SHA256_FINGERPRINT"]
    }
  }
]

Upload it to: https://myapp.com/.well-known/assetlinks.json

Step 3: Test It

adb shell am start -a android.intent.action.VIEW \
  -c android.intent.category.BROWSABLE \
  -d "https://myapp.com/event/flutter-conference" \
  com.example.myapp

Setting Up iOS

Step 1: Add Associated Domains

Open ios/Runner.xcworkspace in Xcode
Select Runner → Signing & Capabilities
Add "Associated Domains" capability
Add: applinks:myapp.com

Step 2: Create Apple's Verification File

Create apple-app-site-association (no file extension):

{
  "applinks": {
    "apps": [],
    "details": [
      {
        "appID": "TEAM_ID.com.example.myapp",
        "paths": ["/event/*", "/events"]
      }
    ]
  }
}

Upload to: https://myapp.com/.well-known/apple-app-site-association

Step 3: Test on iOS

xcrun simctl openurl booted "https://myapp.com/event/flutter-conference"

Flutter Code: Making It Work

Set Up GoRouter

import 'package:go_router/go_router.dart';

final router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => HomePage(),
    ),
    GoRoute(
      path: '/events',
      builder: (context, state) => EventsPage(),
    ),
    GoRoute(
      path: '/event/:eventId',
      builder: (context, state) {
        final eventId = state.pathParameters['eventId']!;
        return EventDetailsPage(eventId: eventId);
      },
    ),
  ],
);

Connect to Your App

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'My App',
      routerConfig: router,
    );
  }
}

Handle Missing Content

What if someone shares a link to an event that doesn't exist? Handle it gracefully:

class EventDetailsPage extends StatelessWidget {
  final String eventId;

  EventDetailsPage({required this.eventId});

  @override
  Widget build(BuildContext context) {
    // Try to find the event
    final event = findEventById(eventId);

    if (event == null) {
      return Scaffold(
        appBar: AppBar(title: Text('Oops!')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(Icons.event_busy, size: 64, color: Colors.grey),
              SizedBox(height: 16),
              Text('Event Not Found', 
                   style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
              Text('This event might have been moved or cancelled.'),
              SizedBox(height: 16),
              ElevatedButton(
                onPressed: () => context.go('/events'),
                child: Text('Browse All Events'),
              ),
            ],
          ),
        ),
      );
    }

    // Show the event details
    return Scaffold(
      appBar: AppBar(title: Text(event.title)),
      body: Column(
        children: [
          // Event details here
        ],
      ),
    );
  }
}

Adding Login Protection

Want to protect certain pages? Easy:

final router = GoRouter(
  redirect: (context, state) {
    final isLoggedIn = checkIfUserIsLoggedIn();
    final isLoginPage = state.matchedLocation == '/login';

    // Not logged in? Send to login
    if (!isLoggedIn && !isLoginPage) {
      return '/login?redirect=${state.matchedLocation}';
    }

    // Already logged in? Skip login page
    if (isLoggedIn && isLoginPage) {
      final redirectUrl = state.uri.queryParameters['redirect'];
      return redirectUrl ?? '/';
    }

    return null; // No redirect needed
  },
  routes: [
    // Your routes here
  ],
);

Testing Your Links

Simple Tests

Android:

adb shell am start -a android.intent.action.VIEW \
  -c android.intent.category.BROWSABLE \
  -d "https://myapp.com/event/flutter-conference" \
  com.example.myapp

iOS:

xcrun simctl openurl booted "https://myapp.com/event/flutter-conference"

Real-World Tests

Send the link via WhatsApp or Messages
Create a simple webpage with your link
Share on social media and test
Test with and without your app installed

Common Problems and Fixes

Problem: App opens inside another app

Fix: Add android:launchMode="singleTask" to your activity in AndroidManifest.xml

Problem: Link opens in browser instead of app

Fix: Check your domain verification files are uploaded correctly

Problem: Multiple apps claim the same URL

Fix: Make sure android:autoVerify="true" is set and your verification files are correct

Pro Tips

Keep URLs simple: myapp.com/event/flutter-summit is better than myapp.com/e/fs2025/details
Plan your structure: Think about how users will share and remember links
Handle errors gracefully: Always plan for missing content and network issues
Test everything: Test on different devices, with and without your app installed
Track performance: Use analytics to see how users interact with your links

Demo: See It in Action

Let's walk through the complete deep linking experience step by step:

1. Our App's Home Screen

First, here's what our EventSpot app looks like when users open it normally:

2. Events List Screen

Users can browse all available events from our events screen:

3. Deep Link in Action - Browser Entry

Now here's the magic! When someone shares a deep link, users can enter it directly in their browser:

4. App Permission Request

iOS asks for permission to open the link in our app instead of staying in the browser:

5. Direct Navigation Success!

And voilà! The user lands directly on the specific event details screen, skipping all the navigation:

6. Demo Video!

Your browser does not support the video tag.

This seamless transition from web link to specific app content is what makes deep linking so powerful for user experience!

Source Code and Resources

Get the complete source code:

GitHub Repository - Flutter Deep Linking Example

Additional Resources:

Wrapping Up

Deep linking transforms your Flutter app from an isolated island into a connected part of the digital world. Users can share content effortlessly, your marketing becomes more effective, and the overall experience gets much better.

Questions? Found a bug? Let me know in the comments below!

Adding Flavors to Your Flutter App: From One Codebase to Multiple Experiences

Terence Faid JABO — Mon, 30 Jun 2025 13:49:40 +0000

You're building a Flutter app. Your client wants three versions: development for testing, staging for final checks, and production for real users. Each needs different settings—different API URLs, app names, even colors.

Your first thought might be: "I'll create three separate projects."

Don't. There's a better way.

What Are Flutter Flavors?

Flutter flavors let you build multiple versions of your app from one codebase. Think of it like a restaurant kitchen making different dishes from the same ingredients.

One codebase → Multiple app versions

Each flavor can have its own:

App name and icon
API endpoints
Colors and branding
Feature toggles
Configuration settings

The Problem Flavors Solve

Without flavors, developers face these headaches:

Environment Mix-ups: Accidentally testing against production data, breaking real user experiences.

Manual Switching: Constantly changing API URLs and settings in code, leading to errors and messy commits.

Code Duplication: Maintaining separate codebases for different clients or environments.

Deployment Confusion: Forgetting which configuration is active before releasing.

The Solution in Action

With flavors, switching environments becomes effortless:

# Launch development version
flutter run --flavor dev

# staging version  
flutter run --flavor staging

# production version
flutter run --flavor prod

Each command launches a completely different app configuration. Same code, different behavior.

Real Benefits You'll See Immediately

Faster Development: No more manually changing configurations. Switch environments with one command.

Fewer Bugs: Each environment is isolated. No more production accidents during development.

Easier Testing: QA team gets their own staging environment. Developers can experiment freely in dev.

Client Customization: Build white-label apps for multiple clients without duplicating code.

Setting Up Flavors: Choose Your Approach

Option 1: Manual Setup (Full Control)

Perfect when you need complete customization or want to understand the underlying mechanics.

Step 1: Configure Android Flavors

Create android/app/build.gradle:

android {
    flavorDimensions "default"

    productFlavors {
        dev {
            dimension "default"
            applicationIdSuffix ".dev"
            versionNameSuffix "-dev"
            resValue "string", "app_name", "MyApp Dev"
        }

        staging {
            dimension "default"
            applicationIdSuffix ".staging"
            versionNameSuffix "-staging"
            resValue "string", "app_name", "MyApp Staging"
        }

        prod {
            dimension "default"
            resValue "string", "app_name", "MyApp"
        }
    }
}

Step 2: Configure iOS Flavors

Create build configurations in Xcode:

Open ios/Runner.xcworkspace
Select Runner project → Info tab
Duplicate existing configurations
Create: Debug-dev, Debug-staging, Debug-prod, Release-dev, Release-staging, Release-prod

Step 3: Create Dart Configuration Files

Create lib/config/app_config.dart:

class AppConfig {
  static const String appName = String.fromEnvironment('APP_NAME');
  static const String apiUrl = String.fromEnvironment('API_URL');
  static const String flavor = String.fromEnvironment('FLAVOR');

  static bool get isDevelopment => flavor == 'dev';
  static bool get isStaging => flavor == 'staging';
  static bool get isProduction => flavor == 'prod';
}

Create flavor-specific entry points:

lib/main_dev.dart:

import 'main.dart' as app;

void main() {
  app.main();
}

Option 2: Very Good CLI (Quick Setup)

Great for rapid prototyping and standard configurations.

# Install the CLI
dart pub global activate very_good_cli

# Create project with flavors pre-configured
very_good create flutter_app my_app

You get development, staging, and production flavors ready to use with proper native configurations.

Option 3: Flavorizr Package (Automated Setup)

Ideal for existing projects that need flavors added quickly.

# Add to pubspec.yaml
dev_dependencies:
  flavorizr: ^2.2.1

# Create flavorizr.yaml configuration
flutter packages pub run flavorizr

Adding Custom Flavors

Need more than dev/staging/prod? Here's how to add custom flavors:

Adding a "Demo" Flavor

Update Android Configuration

Add to android/app/build.gradle:

productFlavors {
    // existing flavors...

    demo {
        dimension "default"
        applicationIdSuffix ".demo"
        versionNameSuffix "-demo"
        resValue "string", "app_name", "MyApp Demo"
    }
}

Update iOS Configuration

In Xcode, duplicate existing configurations
Create Debug-demo and Release-demo
Update build settings for demo-specific values

Create Dart Entry Point

Create lib/main_demo.dart:

import 'package:flutter/material.dart';
import 'main.dart' as app;

void main() {
  const String.fromEnvironment('FLAVOR', defaultValue: 'demo');
  app.main();
}

Update Launch Configuration

Create .vscode/launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Demo",
            "request": "launch",
            "type": "dart",
            "program": "lib/main_demo.dart",
            "args": ["--flavor", "demo", "--dart-define", "FLAVOR=demo"]
        }
    ]
}

Advanced Flavor Configurations

Environment-Specific Features

class FeatureFlags {
  static bool get debugMode => AppConfig.isDevelopment;
  static bool get analyticsEnabled => !AppConfig.isDevelopment;
  static bool get crashReporting => AppConfig.isProduction;
}

Different Themes Per Flavor

class FlavorTheme {
  static ThemeData get theme {
    switch (AppConfig.flavor) {
      case 'dev':
        return ThemeData(primarySwatch: Colors.red);
      case 'staging':
        return ThemeData(primarySwatch: Colors.orange);
      case 'demo':
        return ThemeData(primarySwatch: Colors.purple);
      default:
        return ThemeData(primarySwatch: Colors.blue);
    }
  }
}

Client-Specific Configurations

class ClientConfig {
  static const String clientName = String.fromEnvironment('CLIENT_NAME');
  static const String brandColor = String.fromEnvironment('BRAND_COLOR');

  static Color get primaryColor {
    switch (clientName) {
      case 'client_a':
        return Colors.blue;
      case 'client_b':
        return Colors.green;
      default:
        return Colors.grey;
    }
  }
}

Running Your Flavored App

Command Line

# Development
flutter run --flavor dev --dart-define=FLAVOR=dev

# Staging
flutter run --flavor staging --dart-define=FLAVOR=staging

# Custom demo flavor
flutter run --flavor demo --dart-define=FLAVOR=demo

Building for Release

# Build production APK
flutter build apk --flavor prod --dart-define=FLAVOR=prod

# Build staging iOS
flutter build ios --flavor staging --dart-define=FLAVOR=staging

Best Practices

Keep Configurations Organized

lib/
├── config/
│   ├── app_config.dart
│   ├── dev_config.dart
│   ├── staging_config.dart
│   └── prod_config.dart
├── main.dart
├── main_dev.dart
├── main_staging.dart
└── main_prod.dart

Use Build-Time Constants

class AppConstants {
  static const String apiUrl = String.fromEnvironment(
    'API_URL',
    defaultValue: 'https://api.example.com',
  );

  static const bool enableLogging = bool.fromEnvironment(
    'ENABLE_LOGGING',
    defaultValue: false,
  );
}

Version Control Considerations

Never commit sensitive data like API keys directly. Use environment variables:

class Secrets {
  static const String apiKey = String.fromEnvironment('API_KEY');
  static const String databaseUrl = String.fromEnvironment('DATABASE_URL');
}

Your Development Workflow Transformed

Before flavors:

Change API URL in code
Update app name manually
Switch configuration files
Hope you didn't miss anything
Commit changes (cluttering git history)

With flavors:

Run flutter run --flavor dev
Done.

Troubleshooting Common Issues

iOS Build Errors

Make sure all configurations exist in Xcode and schemes are properly configured.

Android Namespace Conflicts

Ensure each flavor has a unique applicationIdSuffix.

Missing Dependencies

Some flavors might need specific dependencies. Use flavor-specific dependency injection.

Start Using Flavors Today

If you're managing multiple environments or building for different clients, flavors aren't optional—they're essential.

Set them up once, save time forever.

Your codebase stays clean. Your deployments become predictable. Your team stays focused on building features, not managing configurations.

Choose the setup method that works best for your project and team—whether that's manual configuration for maximum control, Very Good CLI for quick setup, or Flavorizr for existing projects.

Flutter Dos and Don'ts: Writing Clean and Efficient Code

Terence Faid JABO — Mon, 30 Jun 2025 13:27:25 +0000

So, you're building apps with Flutter? That's awesome! Flutter is a fantastic tool for creating beautiful apps for phones, computers, and the web using just one code.

But how do you go from just making an app to making a great app? It's like cooking: anyone can follow a recipe, but a great chef knows the little secrets that make the food amazing. This guide will share those secrets for Flutter. We'll look at some simple "Dos" and "Don'ts" to help you write code that is clean, fast, and easy to work with.

1. Do: Break Down Your Screen into Small Pieces

The Don't: Don't put the code for your entire screen in one giant piece. It gets messy, hard to read, and if you change one tiny thing, the whole screen has to reload, which is slow.

// Don't do this! It's one giant piece of code.
class ProfileScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          CircleAvatar(radius: 50),
          Text('John Doe', style: TextStyle(fontSize: 24)),
          Text('About Me: I love Flutter!'),
          Text('Location: Kigali, Rwanda'),
          ElevatedButton(onPressed: () {}, child: Text('Edit')),
        ],
      ),
    );
  }
}

The Do: Break your screen into smaller, reusable widgets. This keeps your code clean and helps your app run faster because Flutter only reloads the small piece that changes.

// Do this! It's organized into small pieces.
class ProfileScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          ProfileHeader(),
          UserDetails(),
          ActionButtons(),
        ],
      ),
    );
  }
}

// Each piece is separate and reusable
class ProfileHeader extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        CircleAvatar(radius: 50),
        Text('John Doe', style: TextStyle(fontSize: 24)),
      ],
    );
  }
}

2. Do: Handle Your App's Memory with Care

Imagine your app has a "memory" or "state," like the score in a game or a list of items in a shopping cart. When that memory changes, your screen needs to update.

The Don't: Don't just call setState() every time something changes. setState() is like a panic button that tells your entire screen, "Everyone, update now!" Even parts of the screen that didn't change have to do work, which is inefficient.

The Do: Use a proper state management tool (like Provider or Riverpod). Think of it as a smart manager. Instead of yelling at everyone, the manager just taps the specific worker (widget) on the shoulder that needs to update. This is much more efficient.

Here's a simple idea of how Provider works for a counter app:

// This class holds the count data.
class Counter extends ChangeNotifier {
  int _value = 0;
  int get value => _value;

  void increment() {
    _value++;
    notifyListeners(); // This tells the smart manager to update only what's needed.
  }
}

// In the UI, you just "watch" for changes.
// Only this Text widget will update when the count changes!
Text('The count is: ${context.watch<Counter>().value}')

3. Do: Use const to Give Your App a Break

Some parts of your app never, ever change. For example, a color, a title text, or the padding around a button.

The Don't: Don't let Flutter rebuild things that are never going to change. It's a waste of your phone's battery and processing power.

The Do: Add the word const in front of any widget that is constant. This is a signal to Flutter that says, "Hey, this piece is finished. You never have to build it again." It's one of the easiest ways to make your app faster.

// Don't do this:
Padding(
  padding: EdgeInsets.all(16.0),
  child: Text('Hello, Kigali!'),
);

// Do this! Add `const`.
const Padding(
  padding: EdgeInsets.all(16.0),
  child: Text('Hello, Kigali!'),
);

It's a small change that makes a big difference.

4. Do: Make Your App Look Good on All Screens

Your app will be used on tiny phones, huge tablets, and everything in between. You need to make sure it looks good on all of them!

The Don't: Don't hardcode sizes using fixed numbers. When you write SizedBox(height: 20), that 20 pixels might look perfect on your phone, but it could be too tiny on a tablet or too big on a small phone.

// Don't: Fixed sizes don't adapt
Column(
  children: [
    Text('Welcome!'),
    SizedBox(height: 20), // Always 20 pixels
    SizedBox(height: 40), // Always 40 pixels
    ElevatedButton(onPressed: () {}, child: Text('Click')),
  ],
);

The Do: Use MediaQuery to make your sizes responsive. Think of MediaQuery as a measuring tape that tells you how big the screen is, so you can adjust accordingly.

// Do: Responsive sizes
Column(
  children: [
    Text('Welcome!'),
    SizedBox(height: MediaQuery.of(context).size.height * 0.02), // 2% of screen
    SizedBox(height: MediaQuery.of(context).size.height * 0.05), // 5% of screen
    ElevatedButton(onPressed: () {}, child: Text('Click')),
  ],
);

// Pro tip: Create a helper
double screenHeight(BuildContext context) => MediaQuery.of(context).size.height;
// Then use: SizedBox(height: screenHeight(context) * 0.02)

5. Do: Keep Your Styles Consistent with Themes

Imagine if every page in a book used a different font, size, and color. It would be chaos! The same goes for your app.

The Don't: Don't write the same style code over and over again throughout your app. This is like copying and pasting – if you want to change the color later, you'll have to hunt down every single place you used it.

// Don't: Inline styles everywhere
Column(
  children: [
    Text('Welcome!', style: TextStyle(fontSize: 24, color: Colors.blue)),
    Text('Profile', style: TextStyle(fontSize: 24, color: Colors.blue)),
    Text('Settings', style: TextStyle(fontSize: 18, color: Colors.grey)),
    Text('About', style: TextStyle(fontSize: 18, color: Colors.grey)),
  ],
);

The Do: Define your styles once in your app's theme, then use them everywhere. It's like having a style guide that your whole app follows. Want to change all your headings from blue to green? Just change it in one place!

// Do: Define theme once
MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      headlineMedium: TextStyle(fontSize: 24, color: Colors.blue),
      bodyLarge: TextStyle(fontSize: 18, color: Colors.grey[600]),
    ),
  ),
);

// Use theme everywhere
Column(
  children: [
    Text('Welcome!', style: Theme.of(context).textTheme.headlineMedium),
    Text('Profile', style: Theme.of(context).textTheme.headlineMedium),
    Text('Settings', style: Theme.of(context).textTheme.bodyLarge),
    Text('About', style: Theme.of(context).textTheme.bodyLarge),
  ],
);

6. Do: Navigate Like a Pro with Named Routes

Navigation is like the roads in your app – users need clear paths to get where they're going. Let's make sure they don't get lost!

The Don't: Don't use direct navigation with anonymous routes everywhere. It's like giving directions by saying "turn left, then right, then left again" instead of using street names.

// Don't: Anonymous routes everywhere
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => ProfileScreen()),
);

// Later in another file...
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => ProfileScreen()),
);

The Do: Use named routes or even better, a routing package like go_router. It's like having a GPS for your app!

Option 1: Named Routes (Built-in)

// Define routes once in your app
MaterialApp(
  routes: {
    '/': (context) => HomeScreen(),
    '/profile': (context) => ProfileScreen(),
    '/settings': (context) => SettingsScreen(),
  },
);

// Navigate using names
Navigator.pushNamed(context, '/profile');

Option 2: go_router (Recommended for larger apps)

// Define your router
final router = GoRouter(
  routes: [
    GoRoute(path: '/', builder: (context, state) => HomeScreen()),
    GoRoute(path: '/profile/:id', builder: (context, state) => 
      ProfileScreen(userId: state.pathParameters['id']!)),
    GoRoute(path: '/settings', builder: (context, state) => SettingsScreen()),
  ],
);

// Use it in your app
MaterialApp.router(routerConfig: router);

// Navigate with parameters
context.go('/profile/123');
context.push('/settings');

Why go_router is awesome:

URL-based navigation (great for web apps)
Easy parameter passing
Deep linking support
Navigation guards for authentication

// Pro tip: Protect routes with guards
GoRoute(
  path: '/admin',
  redirect: (context, state) {
    final isLoggedIn = checkAuth(); // Auth check
    return isLoggedIn ? null : '/login';
  },
  builder: (context, state) => AdminScreen(),
),

Wrapping Up

These simple "Dos" and "Don'ts" will help you write Flutter code that is:

Clean: Easy to read and maintain
Fast: Efficient and responsive
Scalable: Works on all screen sizes
Consistent: Looks professional and polished

Remember, great apps aren't just about what users see – they're also about the quality of the code behind the scenes.

#flutter #firebase

Terence Faid JABO — Mon, 03 Mar 2025 13:33:32 +0000

CRUD Operation - Flutter , Firebase Auth & Firestore

Terence Faid JABO ・ Mar 3

CRUD Operation - Flutter , Firebase Auth & Firestore

Terence Faid JABO — Mon, 03 Mar 2025 13:25:21 +0000

This guide walks you through building a basic note-taking app. Users can sign up or log in with their email and password and then add/view their own notes. The app uses Flutter for the UI, Firebase Authentication for user sign in/up, and Firestore to store notes.

Understanding

Flutter is an open-source UI software development kit created by Google. It can be used to develop cross platform applications from a single codebase for the web, Android, iOS, Linux, macOS, and Windows.
Firebase is a set of backend clouding computing services and application development platforms provided by Google.

Why Flutter over other options?

It doesn't rely on web browser technology nor the set of widgets that ship with each device. Instead, Flutter uses its own high-performance rendering engine to draw widgets.

When to use Firebase ?

Small to medium-sized projects
Real-time Operations
Authentication and User Management

When not use Firebase ?

Complex Backend Logic
Large-Scale Enterprise Applications

Requirements

Flutter: Install Flutter by following the Flutter Installation Guide.
Firebase Account: Sign up at the Firebase Console.
Code Editor: Use VS Code, Android Studio, or any editor of your choice.
Node: Make sure node is installed globally on your device.

Step 1: Create a New Flutter Project

Open your terminal.
Run the command:
```
flutter create simple_note_app
```
Navigate into your project folder:
```
cd simple_note_app
```
Open the project in your code editor.

Step 2: Set Up Firebase

Go to the Firebase Console.
Click "Add Project" and follow the instructions.
Add a new app to your project:
- For mobile apps, select the Android/iOS option as needed.
Enable Authentication:
- In the Firebase Console, go to Authentication and enable the Email/Password sign-in method.

Step 3: Set Up Firebase & FlutterFire CLI Tools

These commands help you manage Firebase projects and configure your Flutter project to use Firebase.

Install Firebase CLI Globally

npm install -g firebase-tools

This command installs the Firebase CLI globally using Node Package Manager (npm)
Log in to Firebase
firebase login

Activate FlutterFire CLI

dart pub global activate flutterfire_cli

This command activates the FlutterFire CLI globally using Dart's package manager.
Configure FlutterFire in Your Project

flutterfire configure

This command configures your Flutter project with your Firebase project. It generates the necessary configuration files and links your app to Firebase.

Step 4: Add Firebase Dependencies

Open terminal in your Flutter project.

Add these dependencies

flutter pub add firebase_core firebase_auth cloud_firestore

firebase_core:

This is the main package for connecting your app to Firebase. It initializes Firebase services and is required by other Firebase plugins.
firebase_auth:

This package allows you to add user authentication to your app.
cloud_firestore:

This package provides access to Cloud Firestore, a flexible, real-time NoSQL database from Firebase. It lets you store, sync, and retrieve user notes easily.

Step 5 : Create Re-usable compose

cd lib && mkdir components

Text Input

import 'package:flutter/material.dart';

class Customtextfield extends StatelessWidget {
  final String hintText;
  final bool obscureText;
  final TextEditingController textEditingController;
  const Customtextfield({
    super.key,
    required this.hintText,
    required this.obscureText,
    required this.textEditingController,
  });

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: textEditingController,
      obscureText: obscureText,
      decoration: InputDecoration(
        hintText: hintText,
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(10)),
      ),
    );
  }
}

TextEditingController in Flutter:

Manages the text within a TextField.
Allows you to get, set, and listen to changes in that text.
It is the tool that allows you to control the text field.
Button

import 'package:flutter/material.dart';

class CustomButton extends StatelessWidget {
  final String text;
  final void Function() onPressed;
  const CustomButton({super.key, required this.text, required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onPressed,
      child: Container(
        decoration: BoxDecoration(
          color: Colors.black54,
          borderRadius: BorderRadius.circular(10),
        ),
        padding: const EdgeInsets.all(25),
        child: Center(
          child: Text(
            text,
            style: const TextStyle(
              color: Colors.white,
              fontSize: 20,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    );
  }
}

Message Util

import 'package:flutter/material.dart';

void displayMessageToUser(BuildContext context, String message, Color color) {
  final snackBar = SnackBar(content: Text(message), backgroundColor: color);
  ScaffoldMessenger.of(context).showSnackBar(snackBar);
}

StatelessWidget:

Use cases: Displaying static content, simple UI elements.

StatefulWidget:

Use cases: Handling user interactions, displaying dynamic content, managing data.

Step 6: Initialize Firebase in Your App

Open lib/main.dart.
Update the main function to:

import 'package:firebase_core/firebase_core.dart';
import 'package:project_name/firebase_options.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
  runApp(const MyApp());
}

Step 7 : Create the Login and Register Screen

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:flutter_simple_auth/components/custom_button.dart';
import 'package:flutter_simple_auth/components/custom_text_field.dart';
import 'package:flutter_simple_auth/utils/display_message_user_util.dart';

class LoginScreen extends StatefulWidget {
  final Function()? onTap;
  const LoginScreen({super.key, this.onTap});

  @override
  State<LoginScreen> createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  final TextEditingController emailController = TextEditingController();

  final TextEditingController passwordController = TextEditingController();

  void loginUser() async {
    // show a loader
    showDialog(
      context: context,
      builder: (context) => Center(child: CircularProgressIndicator()),
    );

    try {
      if (passwordController.text.isEmpty || emailController.text.isEmpty) {
        // pop loader
        if (mounted) {
          Navigator.pop(context);
        }

        // show error message
        displayMessageToUser(context, "Please fill all fields", Colors.red);
        return;
      }

      await FirebaseAuth.instance.signInWithEmailAndPassword(
        email: emailController.text,
        password: passwordController.text,
      );

      // pop loader
      if (!mounted) return;
      Navigator.pop(context);
    } on FirebaseAuthException catch (e) {
      // pop loader
      if (!mounted) return;
      Navigator.pop(context);

      // show error message
      if (mounted) {
        displayMessageToUser(
          context,
          e.message ?? "An error occurred",
          Colors.red,
        );
      }
    } catch (e) {
      // pop loader
      if (!mounted) return;
      Navigator.pop(context);

      // show error message
      if (mounted) {
        displayMessageToUser(context, e.toString(), Colors.red);
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(25),
          child: Column(
            spacing: 25,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(Icons.person, size: 80),
              // app name
              Text("C O D E X", style: TextStyle(fontSize: 20)),

              // email field
              Customtextfield(
                hintText: "Email",
                obscureText: false,
                textEditingController: emailController,
              ),

              // Password
              Customtextfield(
                hintText: "Password",
                obscureText: true,
                textEditingController: passwordController,
              ),

              CustomButton(text: "Login", onPressed: loginUser),

              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                spacing: 8,
                children: [
                  Text("Don't have an account?"),
                  GestureDetector(
                    onTap: widget.onTap,
                    child: Text(
                      "Sign Up",
                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}


import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:flutter_simple_auth/components/custom_button.dart';
import 'package:flutter_simple_auth/components/custom_text_field.dart';
import 'package:flutter_simple_auth/utils/display_message_user_util.dart';

class RegisterScreen extends StatefulWidget {
  final Function()? onTap;
  const RegisterScreen({super.key, this.onTap});

  @override
  State<RegisterScreen> createState() => _RegisterScreenState();
}

class _RegisterScreenState extends State<RegisterScreen> {
  final TextEditingController emailController = TextEditingController();

  final TextEditingController usernameController = TextEditingController();

  final TextEditingController passwordController = TextEditingController();

  final TextEditingController confirmPasswordController =
      TextEditingController();

  // function to register a user
  void registerUser() async {
    // show a loader
    showDialog(
      context: context,
      builder: (context) => Center(child: CircularProgressIndicator()),
    );

    // check password match
    if (passwordController.text != confirmPasswordController.text) {
      // show error message
      displayMessageToUser(context, "Passwords do not match", Colors.red);
    } else {
      // create user
      try {
        await FirebaseAuth.instance.createUserWithEmailAndPassword(
          email: emailController.text,
          password: passwordController.text,
        );

        // pop loader
        Navigator.pop(context);
      } on FirebaseAuthException catch (e) {
        // pop loader
        Navigator.pop(context);

        // show error message
        displayMessageToUser(
          context,
          e.message ?? "An error occurred",
          Colors.red,
        );
      } catch (e) {
        // pop loader
        Navigator.pop(context);

        // show error message
        displayMessageToUser(
          context,
          "An unexpected error occurred",
          Colors.red,
        );
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(25),
          child: Column(
            spacing: 25,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(Icons.person, size: 80),
              // app name
              Text("C O D E X", style: TextStyle(fontSize: 20)),

              // email field
              Customtextfield(
                hintText: "Email",
                obscureText: false,
                textEditingController: emailController,
              ),

              // username
              Customtextfield(
                hintText: "Username",
                obscureText: false,
                textEditingController: usernameController,
              ),
              // Password
              Customtextfield(
                hintText: "Password",
                obscureText: true,
                textEditingController: passwordController,
              ),

              // Confirm Password field
              Customtextfield(
                hintText: "Confirm Password",
                obscureText: true,
                textEditingController: confirmPasswordController,
              ),

              CustomButton(text: "Register", onPressed: registerUser),

              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                spacing: 8,
                children: [
                  Text("""Already have an account?"""),
                  GestureDetector(
                    onTap: widget.onTap,
                    child: Text(
                      "Login",
                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Step 8 :

The AuthHelper helps to toggle between Login and Register pages.

cd lib && mkdir auth && touch/auth_helper.dart


class AuthHelper extends StatefulWidget {
  const AuthHelper({super.key});

  @override
  State<AuthHelper> createState() => _AuthHelperState();
}

class _AuthHelperState extends State<AuthHelper> {
  // initially show login page

  bool showLogin = true;

  // function to toggle between login and register page

  void toggleView() {
    setState(() {
      showLogin = !showLogin;
    });
  }

  @override
  Widget build(BuildContext context) {
    return showLogin
        ? LoginScreen(onTap: toggleView)
        : RegisterScreen(onTap: toggleView);
  }
}

Step 9 :

cd lib/auth && touch/firebase_navigator_helper.dart


class FirebaseNavigatorHelper extends StatelessWidget {
  const FirebaseNavigatorHelper({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StreamBuilder(
        stream: FirebaseAuth.instance.authStateChanges(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          } else if (snapshot.hasData) {
            return WelcomeScreen();
          } else if (snapshot.hasError) {
            return const Center(child: Text("An error occurred"));
          } else {
            return AuthHelper();
          }
        },
      ),
    );
  }
}

PART TWO :

Notes CRUD Operation

Step 1 :

cd lib && mkdir services && touch firestore_notes_service.dart

class FirestoreNotesServices {
  // get collection for notes

  final CollectionReference notesCollection = FirebaseFirestore.instance
      .collection('notes');

  final currentUser = FirebaseAuth.instance.currentUser;

  // CREATE with logged in user
  Future<void> createNote(String note) {
    return notesCollection.add({
      'note': note,
      'ownerId': currentUser?.uid,
      'createdAt': Timestamp.now(),
    });
  }

  // retrieve notes for logged in user
  Stream<QuerySnapshot> getNotes() {
    return notesCollection
        .where('ownerId', isEqualTo: currentUser?.uid)
        .snapshots();
  }

  // Update note

  Future<void> updateNote(String note, String id) {
    return notesCollection.doc(id).update({'note': note});
  }

  // Delete note

  Future<void> deleteNotes(String id) {
    return notesCollection.doc(id).delete();
  }
}

Step 2 : Integration

cd lib/components && touch note_list.dart


class NotesList extends StatelessWidget {
  final List notes;
  final FirestoreNotesServices firestoreNotesServices;
  final Function(String noteId, String currentNote) onUpdateNote;

  const NotesList({
    super.key,
    required this.notes,
    required this.firestoreNotesServices,
    required this.onUpdateNote,
  });

  @override
  Widget build(BuildContext context) {
    if (notes.isEmpty) {
      return Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(Icons.note_add, size: 64, color: Colors.grey[400]),
            const SizedBox(height: 16),
            Text(
              "No notes found",
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
                color: Colors.grey[600],
              ),
            ),
            const SizedBox(height: 8),
            Text(
              "Tap the + button to add your first note!",
              style: TextStyle(fontSize: 14, color: Colors.grey[500]),
            ),
          ],
        ),
      );
    }

    return ListView.builder(
      itemCount: notes.length,
      itemBuilder: (context, index) {
        return NoteCard(
          note: notes[index]['note'],
          noteId: notes[index].id,
          firestoreNotesServices: firestoreNotesServices,
          onUpdateNote: onUpdateNote,
        );
      },
    );
  }
}

class NoteCard extends StatelessWidget {
  final String note;
  final String noteId;
  final FirestoreNotesServices firestoreNotesServices;
  final Function(String noteId, String currentNote) onUpdateNote;

  const NoteCard({
    super.key,
    required this.note,
    required this.noteId,
    required this.firestoreNotesServices,
    required this.onUpdateNote,
  });

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 8.0),
      child: Card(
        elevation: 2,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
        child: ListTile(
          contentPadding: const EdgeInsets.symmetric(
            horizontal: 16,
            vertical: 8,
          ),
          title: Text(note, style: const TextStyle(fontSize: 16)),
          trailing: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              IconButton(
                icon: const Icon(Icons.edit, color: Colors.blue),
                onPressed: () => onUpdateNote(noteId, note),
              ),
              IconButton(
                icon: const Icon(Icons.delete, color: Colors.red),
                onPressed: () {
                  _showDeleteConfirmation(context);
                },
              ),
            ],
          ),
          onTap: () => onUpdateNote(noteId, note),
        ),
      ),
    );
  }

  void _showDeleteConfirmation(BuildContext context) {
    showDialog(
      context: context,
      builder:
          (context) => AlertDialog(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(16),
            ),
            title: const Text("Delete Note"),
            content: const Text("Are you sure you want to delete this note?"),
            actions: [
              TextButton(
                onPressed: () => Navigator.pop(context),
                child: const Text(
                  "Cancel",
                  style: TextStyle(color: Colors.grey),
                ),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.red,
                  foregroundColor: Colors.white,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(8),
                  ),
                ),
                onPressed: () {
                  firestoreNotesServices.deleteNotes(noteId);
                  Navigator.pop(context);
                },
                child: const Text("Delete"),
              ),
            ],
          ),
    );
  }
}

Lastly , create a home Screen
to display logged in user notes

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  // note controller
  final TextEditingController noteController = TextEditingController();

  // firebase instance
  final currentUser = FirebaseAuth.instance.currentUser;
  final FirestoreNotesServices firestoreNotesServices =
      FirestoreNotesServices();

  void logout() {
    FirebaseAuth.instance.signOut();
  }

  // open a dialog to add note
  void addNoteDialog() {
    showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(16),
          ),
          title: const Text(
            "Add Note",
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
          content: Customtextfield(
            hintText: "Enter Note",
            obscureText: false,
            textEditingController: noteController,
          ),
          actions: [
            TextButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: const Text("Cancel", style: TextStyle(color: Colors.grey)),
            ),
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.black87,
                foregroundColor: Colors.white,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(8),
                ),
              ),
              onPressed: () {
                firestoreNotesServices.createNote(noteController.text);
                noteController.clear();
                Navigator.pop(context);
              },
              child: const Text("Add"),
            ),
          ],
        );
      },
    );
  }

  // Dialog for updating notes
  void updateNoteDialog(String noteId, String currentNote) {
    noteController.text = currentNote;
    showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(16),
          ),
          title: const Text(
            "Update Note",
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
          content: Customtextfield(
            hintText: "Enter Note",
            obscureText: false,
            textEditingController: noteController,
          ),
          actions: [
            TextButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: const Text("Cancel", style: TextStyle(color: Colors.grey)),
            ),
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.black87,
                foregroundColor: Colors.white,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(8),
                ),
              ),
              onPressed: () {
                firestoreNotesServices.updateNote(noteController.text, noteId);
                noteController.clear();
                Navigator.pop(context);
              },
              child: const Text("Update"),
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[100],
      appBar: AppBar(
        backgroundColor: Colors.black87,
        foregroundColor: Colors.white,
        elevation: 0,
        centerTitle: true,
        title: const Text(
          "Notes App",
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
        actions: [
          IconButton(
            onPressed: () {
              logout();
            },
            icon: const Icon(Icons.logout),
            tooltip: "Logout",
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          addNoteDialog();
        },
        backgroundColor: Colors.black87,
        child: const Icon(Icons.add, color: Colors.white),
      ),
      body: Padding(
        padding: const EdgeInsets.all(12.0),
        child: StreamBuilder(
          stream: firestoreNotesServices.getNotes(),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return const Center(
                child: CircularProgressIndicator(color: Colors.black87),
              );
            }

            if (snapshot.hasError) {
              return Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    const Icon(
                      Icons.error_outline,
                      size: 48,
                      color: Colors.red,
                    ),
                    const SizedBox(height: 16),
                    Text(
                      "Error: ${snapshot.error}",
                      style: const TextStyle(fontSize: 16),
                    ),
                  ],
                ),
              );
            }

            // Check if we have data
            if (snapshot.hasData) {
              List notes = snapshot.data!.docs;

              return NotesList(
                notes: notes,
                firestoreNotesServices: firestoreNotesServices,
                onUpdateNote: updateNoteDialog,
              );
            } else {
              return const Center(child: Text("No notes available"));
            }
          },
        ),
      ),
    );
  }
}

Best Practices for Branch Naming Conventions and Effective Commit Messages

Terence Faid JABO — Thu, 29 Feb 2024 20:44:48 +0000

In the world of software development, maintaining clear and organized workflows is essential for effective collaboration and code management. Two key aspects that greatly contribute to this are branch naming conventions and writing good commit messages. Let's explore some best practices for both.

Branch Naming Conventions:

Be Descriptive: Branch names should be descriptive and indicative of the task or feature being worked on. A clear and concise name can save time and reduce confusion for team members. For example, feature/user-authentication or bugfix/issue-123-fix.

Prefixes for Categorization: Prefixes such as feature/, bugfix/, hotfix/, release/, refactor/, and docs/ can categorize branches based on their purpose. This standardizes naming conventions and makes it easier to identify the type of work associated with each branch.

Inclusion of Ticket or Issue Numbers: Including ticket or issue numbers in branch names helps establish traceability between code changes and specific tasks or bug reports. This practice fosters transparency and facilitates collaboration among team members. For example, feature/PROJ-123-add-user-registration.

Consistency is Key: Consistency in naming conventions is paramount for effective communication and collaboration. Establishing a team-wide standard ensures that everyone understands and adheres to the same naming conventions.

Keep it Concise: While descriptive, branch names should also be kept concise to avoid unnecessary complexity. Long branch names can be unwieldy and may get truncated in certain interfaces or tools.

Good Commit Messages:

Commit messages provide valuable context and insight into the changes made to a codebase. They serve as documentation for future reference and help developers understand the reasoning behind specific code alterations. Here are some guidelines for crafting effective commit messages:

Start with a Prefix: Some teams use prefixes like "feat" for new features or "chore" for maintenance tasks and other non-feature changes. This helps quickly identify the nature of the commit at a glance.

Follow with a Verb: After the prefix, include a verb that succinctly describes the action taken in the commit. For example, use "Add," "Fix," "Update," "Remove," or "Refactor."

Be Specific: Provide clear and specific details in your commit message to explain what was changed and why it was changed. This clarity aids in understanding the purpose and impact of each commit.

Limit Line Length: Keep commit messages concise and limit line length to around 50-72 characters. This ensures they are easily readable in various contexts, such as terminal outputs or version control tools.

Use the Imperative Mood: Write commit messages in the imperative mood, as if you are giving a command. For example, "Fix bug" rather than "Fixed bug" or "Fixes bug."

Reference Relevant Issues: If your commit resolves a specific issue or relates to a particular task, reference the corresponding issue or ticket number in the commit message. This helps establish a clear connection between code changes and project issues.

Good Branch Names Examples:

feature/user-authentication: This branch focuses on implementing user authentication functionality.
bugfix/issue-123-fix: Addressing a specific bug identified in issue 123.
refactor/database-schema-update: Updating the database schema to improve performance.
chore/update-dependencies: Routine maintenance task to update project dependencies.
release/version-1.2.0: Branch for preparing the release of version 1.2.0 of the software.

Good Commit Messages Examples:

feat: Implement user registration functionality
Description: Adds user registration feature with email verification.
chore: Update package dependencies
Description: Updates project dependencies to latest versions for security and performance improvements.
fix: Resolve issue with form validation
Description: Fixes bug where form validation was not handling edge cases correctly.
refactor: Optimize database query performance
Description: Rewrites database queries to improve response times and reduce server load.
docs: Update README with installation instructions
Description: Adds detailed instructions for setting up and running the application in the README file.
These examples demonstrate how to create informative branch names and commit messages that provide clarity about the purpose and content of each branch and commit.

By following these best practices for branch naming and commit messages, you can enhance clarity, transparency, and collaboration within your development team. Clear communication through well-defined branches and informative commit messages ultimately leads to smoother workflows and better-maintained codebases.

~ Terence Faid J!

Implementing an Auth Guard with JWT tokens in Nest.js

Terence Faid JABO — Sat, 24 Feb 2024 19:28:39 +0000

Authentication guards allow you to control access to routes and controllers in a NestJS application based on user authentication. An Auth Guard is very similar to middlewares in Express.js

The Auth Guard which is applied to an endpoint/api or a controller in Nest.js only allows authenticated users to access those routes. A token is attached in the incoming request headers, Auth Guard extracts and validates the token, and uses the extracted information to determine whether to process the request further or not.

In this blog, we will look at how to implement basic authentication guards using JWT tokens to protect routes in a NestJS app.

I have created a basic Nest.js CRUD application for demonstration which looks likes this:

There is student controller which has basic read/write operations (GET, POST requests) on which we shall apply our auth guard.

Create an auth.guard.ts file and let’s start creating an auth guard. First, lets have the necessary imports

auth.guard.ts

import { CanActivate, ExecutionContext, Injectable, UnauthorizedException, 
ForbiddenException,} from '@nestjs/common';

import { AuthService } from './auth.service';

auth.guard.ts

@Injectable()
export class AuthGuard implements CanActivate {
    async canActivate(context: ExecutionContext): Promise<boolean> {
      try {
        const request = context.switchToHttp().getRequest();
        return true;
      } catch (error) {
        console.log('auth error - ', error.message);
      }
    }
  }

Authentication guards are classes that implement the CanActivate interface from @nestjs/common. This interface requires a canActivate method/function that returns a boolean. Here we access the incoming request using context.switchToHttp().getRequest() method.

const { authorization }: any = request.headers;
if (!authorization || authorization.trim() === '') {
    throw new UnauthorizedException('Please provide token');
}
const authToken = authorization.replace(/bearer/gim, '').trim();

We extract the token from Authorization headers in the request. If there is no Authorization header or no token in the Authorization Header, it throws and error to provide token.

const resp = await this.authService.validateToken(authToken);
request.decodedData = resp;
return true;

We have created a function in AuthService to validate our jwt token which if valid then attaches the decodedData i.e payload(user data by which we create our jwt token) to the request and returns true to further process the request. And if token isnt’t valid, then throws an error.

constructor(private readonly authService: AuthService) {}

As we are using AuthService, lets import it as a dependency injection in our AuthGuard’s class constructor.

Let’s have a look at validateToken() function in AuthService.

import { Injectable } from '@nestjs/common';
import { JwtService } from '@nestjs/jwt';

@Injectable()
export class AuthService {
    constructor(private readonly jwtServ: JwtService) {}

    validateToken(token: string) {
        return this.jwtServ.verify(token, {
            secret : process.env.JWT_SECRET_KEY
        });
    }
}

We are using JwtService from Nest.js and also using it as a dependency injection in our class’s constructor to use its function to validate our jwt token. We use verify() function which takes token and secret key to verify the token. This would be the same secret key to create our jwt token in the sign-in & sign-up API’s. Use a .env file to store our JWT_SECRET_KEY.

auth.guard.ts

import { CanActivate, ExecutionContext, Injectable, UnauthorizedException, 
ForbiddenException,} from '@nestjs/common';
import { AuthService } from './auth.service';

  @Injectable()
  export class AuthGuard implements CanActivate {
    constructor(private readonly authService: AuthService) {}

    async canActivate(context: ExecutionContext): Promise<boolean> {
      try {
        const request = context.switchToHttp().getRequest();
        const { authorization }: any = request.headers;
        if (!authorization || authorization.trim() === '') {
          throw new UnauthorizedException('Please provide token');
        }
        const authToken = authorization.replace(/bearer/gim, '').trim();
        const resp = await this.authService.validateToken(authToken);
        request.decodedData = resp;
        return true;
      } catch (error) {
        console.log('auth error - ', error.message);
        throw new ForbiddenException(error.message || 'session expired! Please sign In');
      }
    }
  }

Lets apply our Auth guard to our Api routes.

student.controller.ts

import { AuthGuard } from 'src/auth/auth.guard';

@Controller('student')
export class StudentController {
    constructor(private readonly studentService: StudentService) { }

    @Get()
    async getStudents(@Res() response) {
        try {
            const studentData = await this.studentService.getAllStudents();
            return response.status(HttpStatus.OK).json({
                message: 'All students data found successfully', studentData,
            });
        } catch (err) {
            return response.status(err.status).json(err.response);
        }
    }

    @UseGuards(AuthGuard)
    @Get('/:id')
    async getStudentById(@Res() response, @Param('id') studentId: string) {
        try {
            const existingStudent = await this.studentService.getStudent(studentId);
            return response.status(HttpStatus.OK).json({
                message: 'Student found successfully', existingStudent,
            });
        } catch (err) {
            return response.status(err.status).json(err.response);
        }
    }
}

We have 2 routes getStudents() to get all students which is an open route and getStudentById() to get a specific student details which is a protected route. We use @UseGuards(AuthGuard) decorator and pass our AuthGuard to it which protects the getStudentById() route.

We can also attach the AuthGuard to an entire controller rather than specific routes which makes the entire Controller as Protected Controller.

@UseGuards(AuthGuard)
@Controller('student')

Now test your endpoints using postman or thunderclient