In this post, we will explore how to call native code directly using Dart FFI (for C/iOS) and JNI (for Kotlin/Android). We will use code generators (ffigen and jnigen) to automate the binding process, and then wrap them in a clean, platform-agnostic Dart interface.

To demonstrate this, we will implement a simple “Caesar Cipher” encryption utility.

1. The Native Implementations

First, let’s look at the native code we want to access.

Android (Kotlin)

On the Android side, we have a simple class EncryptionUtil that performs character shifting.

// android/src/main/kotlin/com/example/dart_native_bindings/EncryptionUtil.kt
class EncryptionUtil {
    fun encrypt(input: String, shift: Int): String {
        val result = StringBuilder()
        for (character in input.toCharArray()) {
            if (character != ' ') {
                val originalAlphabetPosition = character.code - 'a'.code
                val newAlphabetPosition = (originalAlphabetPosition + shift) % 26
                val newCharacter = ('a'.code + newAlphabetPosition).toChar()
                result.append(newCharacter)
            } else {
                result.append(character)
            }
        }
        return result.toString()
    }
}

iOS (C)

For iOS, we are using C to interact with Dart FFI. Note that this function manually allocates memory for the result, which we will need to manage carefully in Dart.

// ios/Classes/encryption.c
#include <string.h>
#include <stdlib.h>

char* encrypt(char* input, int shift) {
    int length = strlen(input);
    char* result = (char*)malloc(length + 1); 
    
    for(int i = 0; i < length; i++) {
        char ch = input[i];
        if(ch >= 'a' && ch <= 'z'){
            ch = ch + shift;
            if(ch > 'z'){
                ch = ch - 26;
            }
            result[i] = ch;
        } else {
            result[i] = ch;
        }
    }
    result[length] = '\0'; // Null terminator
    return result;
}

2. Generating Bindings

Writing the Dart boilerplate to talk to these languages manually is error-prone. We use ffigen and jnigen to generate the bindings automatically.

Configuring ffigen (iOS)

ffigen scans C header files and creates Dart FFI bindings.

ffigen.yaml

headers:
  entry-points:
    - 'ios/Classes/*.c'
output: 'lib/ios_bindings.dart'

Configuring jnigen (Android)

jnigen works similarly but for Java/Kotlin classes via JNI.

jnigen.yaml

android_sdk_config:
  add_gradle_deps: true

output:
  dart:
    path: lib/android_bindings.dart
    structure: single_file

source_path:
  - "android/src/main/kotlin"
classes:
  - "com.example.dart_native_bindings.EncryptionUtil"

Once configured, running the generation commands (e.g., dart run ffigen --config ffigen.yaml and dart run jnigen --config jnigen.yaml) will produce ios_bindings.dart and android_bindings.dart.

3. The Unified Dart Interface

Now for the fun part: abstracting away the platform differences. We want our Flutter UI to simply call encrypt() without worrying about whether it’s running on Android or iOS.

We will create a CommonEncryptor class that employs the Strategy pattern.

The Code

import 'dart:ffi' as ffi;
import 'dart:io';

import 'package:dart_native_bindings/android_bindings.dart';
import 'package:dart_native_bindings/ios_bindings.dart';
import 'package:ffi/ffi.dart';
import 'package:jni/jni.dart';

/// Provides a single encryption API regardless of platform.
class CommonEncryptor {
  CommonEncryptor() : _delegate = _createDelegate();

  final _PlatformEncryptor _delegate;

  String encrypt(String input, int shift) => _delegate.encrypt(input, shift);

  static _PlatformEncryptor _createDelegate() {
    if (Platform.isAndroid) {
      return _AndroidEncryptor();
    }
    if (Platform.isIOS) {
      return _IosEncryptor();
    }
    throw UnsupportedError('Unsupported platform');
  }
}

abstract interface class _PlatformEncryptor {
  String encrypt(String input, int shift);
}

The Android Implementation (JNI)

Here we interact with the generated EncryptionUtil class.

Key Note on Memory: When using JNI, we must convert Dart strings to JNI strings (toJString()). After the operation, it is crucial to call .release() on JNI objects to prevent memory leaks in the Java Native Interface.

class _AndroidEncryptor implements _PlatformEncryptor {
  _AndroidEncryptor() : _util = EncryptionUtil();

  final EncryptionUtil _util;

  @override
  String encrypt(String input, int shift) {
    // 1. Convert Dart String to Java String
    final inputJString = input.toJString();
    
    // 2. Call the native method
    final encrypted = _util.encrypt(inputJString, shift);
    
    // 3. Convert back to Dart String
    final result = encrypted.toDartString();
    
    // 4. Clean up JNI references
    encrypted.release();
    inputJString.release();
    
    return result;
  }
}

The iOS Implementation (FFI)

Here we use the NativeLibrary generated by ffigen.

Key Note on Memory: Since our C code used malloc to allocate the result, we must use malloc.free in Dart to release that memory. Similarly, we allocate memory for the input string using toNativeUtf8(), which also requires freeing.

class _IosEncryptor implements _PlatformEncryptor {
  // Load the process symbol table
  _IosEncryptor() : _library = NativeLibrary(ffi.DynamicLibrary.process());

  final NativeLibrary _library;

  @override
  String encrypt(String input, int shift) {
    // 1. Allocate native memory for the string
    final inputPtr = input.toNativeUtf8();
    
    // 2. Call the C function
    final encryptedPtr = _library.encrypt(inputPtr.cast<ffi.Char>(), shift);
    
    // 3. Free the input pointer immediately
    malloc.free(inputPtr);
    
    // 4. Convert result to Dart string
    final result = encryptedPtr.cast<Utf8>().toDartString();
    
    // 5. Free the result pointer (allocated by C's malloc)
    malloc.free(encryptedPtr);
    
    return result;
  }
}

Conclusion

By combining jnigen and ffigen, we can leverage the full power of native platforms with strictly typed bindings. While manual memory management (releasing pointers and JNI references) requires care, the performance gains and direct access to native libraries make it a powerful tool in the Flutter developer’s arsenal.

Why Use PlatformView?

Flutter’s PlatformView API lets you embed native views (SwiftUI, UIKit, etc.) directly into your Flutter widget tree. This is perfect for using new iOS features before they’re available in Flutter.

Demo

Project Overview

• Flutter iOS-only app
• Custom SwiftUI view (LiquidGlassExampleView) with .glassEffect (iOS 26+)
• Integrated via PlatformView (UiKitView in Flutter)

Key Files

• lib/main.dart: Uses UiKitView to display the native SwiftUI view.
• ios/Runner/HelloSwiftUI.swift: Contains the SwiftUI view and PlatformView integration.
• ios/Runner/AppDelegate.swift: Registers the PlatformView for Flutter.

1. Create the SwiftUI View with Liquid Glass

struct LiquidGlassExampleView: View {
    var body: some View {
        Group {
            if #available(iOS 26.0, *) {
                GlassEffectContainer {
                    ContentBody()
                        .buttonStyle(.glass)
                }
            } else {
                ContentBody()
            }
        }
    }
}

struct ContentBody: View {
    @State private var offset: CGFloat = -10
    var body: some View {
        VStack {
            if #available(iOS 26.0, *) {
                Image(systemName: "globe")
                    .imageScale(.large)
                    .padding(16)
                    .foregroundStyle(.tint)
                    .glassEffect()
                Text("Liquid Glass")
                    .padding(16)
                    .glassEffect(in: .rect(cornerRadius: 8))
                    .offset(x: 0, y: offset)
            } else {
                // Fallback for earlier iOS versions
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundStyle(.tint)
                Text("Liquid Glass")
                    .padding(16)
                    .offset(x: 0, y: offset)
            }
            Button(action: {
                withAnimation(.linear(duration: 0.5)) {
                    offset = offset * -1
                }
            }) {
                Text("Animate")
            }
        }
        .padding()
    }
}

2. Expose the SwiftUI View to Flutter

class HelloSwiftUIViewFactory: NSObject, FlutterPlatformViewFactory {
    ...
    func create(withFrame frame: CGRect, viewIdentifier viewId: Int64, arguments args: Any?) -> any FlutterPlatformView {
        let view = HelloSwiftUIView()
        return view
    }
}

class HelloSwiftUIView: NSObject, FlutterPlatformView {
    private var hostingController: UIHostingController<LiquidGlassExampleView>
    ...
    override init() {
        let swiftUIView = LiquidGlassExampleView()
        hostingController = UIHostingController(rootView: swiftUIView)
        hostingController.view.backgroundColor = .clear
        ...
    }
    func view() -> UIView {
        return hostingController.view
    }
}

3. Register the PlatformView in AppDelegate

override func application(
  _ application: UIApplication,
  didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
  ...
  let factory = HelloSwiftUIViewFactory(messenger: registrar.messenger())
  registrar.register(factory, withId: "HelloSwiftUIView")
  ...
}

4. Use the PlatformView in Flutter

UiKitView(
  viewType: 'HelloSwiftUIView',
  layoutDirection: TextDirection.ltr,
  creationParams: null,
  creationParamsCodec: StandardMessageCodec(),
)

You can layer this over any Flutter widget, such as an image background:

Stack(
  children: [
    Positioned.fill(
      child: DecoratedBox(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/melaka.jpeg'),
            fit: BoxFit.cover,
          ),
        ),
      ),
    ),
    UiKitView(...),
  ],
)

Conclusion

With just a few steps, you can bring the latest iOS 26 visual effects to your Flutter app using SwiftUI and PlatformView. This approach lets you stay on the cutting edge of iOS design while keeping the productivity of Flutter.

Happy coding with Flutter and iOS!

In the world of Flutter development, Dart mixins are a powerful feature that allows developers to share code between classes without using inheritance. This guide will explore what mixins are, how to use them and their advantages in Flutter applications.

What are Mixins?

Mixins are a way to reuse code in multiple classes without the need for inheritance. They allow you to define methods and properties that can be shared across different classes, promoting code reusability and reducing duplication.

Syntax of Mixins

Mixins are defined using the mixin keyword, followed by the mixin name. Here’s a simple example:

Mixin

mixin Logger {  
  void log(String message) {  
    print('Log: $message');  
  }  
}

Mixin classes

Mixin classes can be used to add functionality to other classes without creating a complex inheritance hierarchy. These can be used both as a class and a mixin. The mixin keyword is used to define a mixin, while the mixin class keyword is used to define a mixin that can be used as a superclass.

mixin class MyMixin {  
  void greet() {  
    print('Hello from MyMixin!');  
  }  
}

Using Mixins in Classes

To use a mixin in a class, you simply use the with keyword followed by the mixin name. Here’s how you can use the Logger mixin in a class:

class MyClass with Logger {  
  void performAction() {  
    log('Action performed');  
  }  
}

Extending mixins

class MyPowerfulLogger extends Logger {  
  void logWithTimestamp(String message) {  
    final timestamp = DateTime.now();  
    print('[$timestamp] Log: $message');  
  }  
}

Advantages of Using Mixins

• Code Reusability: Mixins allow you to define common functionality in one place and reuse it across multiple classes.
• Cleaner Code: By using mixins, you can keep your classes clean and focused on their primary responsibilities.
• Flexibility: Mixins can be combined with other classes and mixins, allowing for flexible class designs.

  Common Use Cases for Mixins

• Logging: Mixins are often used for logging purposes, allowing you to add logging functionality to multiple classes without duplicating code.
• Analytics: You can create mixins for analytics tracking, allowing you to track events across different classes.
• User Authentication: Mixins can be used to handle user authentication logic, making it easy to add authentication features to different classes.

  Best Practices for Using Mixins

• Keep Mixins Focused: Each mixin should have a single responsibility. Avoid creating large mixins that do too much.
• Avoid Overusing Mixins: While mixins are powerful, overusing them can lead to complex class hierarchies. Use them judiciously.
• Document Your Mixins: Provide clear documentation for your mixins to help other developers understand their purpose and usage.

  Conclusion

  Dart mixins are a powerful feature that can greatly enhance your Flutter development experience. By understanding how to use mixins effectively, you can write cleaner, more maintainable code and promote code reusability in your applications. Whether you’re logging events, tracking analytics or handling user authentication, mixins can help you achieve your goals with ease.

  Further Reading

• Dart Language Tour: Mixins
• Flutter Documentation: Mixins
• Effective Dart: Mixins

  Feedback

  I hope this guide has helped you understand Dart mixins better. If you have any questions or feedback, feel free to reach out to me!

Solution

Add a minimum display delay to your loader. This ensures the loader only appears if the operation takes longer than expected. Have a look at the screenshot to understand it better.

Timer? _loaderTimer;  
bool _isLoading = false;  

Future<void> _fetchData() async {  
  // Schedule the loader to appear after 500ms  
  _loaderTimer = Timer(const Duration(milliseconds: 500), () {  
    if (!_isLoading) setState(() => _isLoading = true);  
  });  

  try {  
    await yourAsyncOperation();  
  } finally {  
    // Cancel the timer (if it hasn’t triggered yet)  
    _loaderTimer?.cancel();  
    setState(() => _isLoading = false);  
  }  
} 

Why This example works:

• No flicker: If the task finishes before 500ms, the loader never appears.
• Smooth UX: For longer tasks, the loader shows after the delay, avoiding abrupt transitions

Did you know you don’t need to setup a web hosting service to deploy your Flutter web app?

That’s right! When I wanted to create a quick preview for one of my Flutter apps to share with others, I wasn’t ready to go through the hassle of setting up a new site with a traditional web hosting service.

After exploring my options, I found several ways to host a Flutter Web app:

1. GitHub Pages
2. Firebase Hosting
3. Traditional web hosting

For a quick prototype or portfolio piece, GitHub Pages seemed ideal. In this guide, I’ll walk you through the complete process of deploying your Flutter web app to GitHub Pages.

Prerequisites

Before we start, make sure you have:

• A Flutter project with web support enabled
• Your GitHub Repository is public

Setup

Add Web Support to Your Flutter Project

If your project doesn’t already support web, you can add web support by running:

flutter create --platforms=web .

You can verify web support is enabled with:

flutter devices

You should see “Chrome” web browser listed in the available devices.

Build the Project for Web

We need to build the web app using this command:

flutter build web --release --base-href=/YOUR_REPOSITORY_NAME_HERE/

Replace YOUR_REPOSITORY_NAME_HERE with your actual repository name.

For instance, if your repository name is flutter-playground, the command will be:

flutter build web --release --base-href=/flutter-playground/

Understanding the base-href Parameter

The --base-href flag is crucial because:

• GitHub Pages serves your site from a subdirectory (yourusername.github.io/repository-name)
• Without this parameter, your app would try to load assets from the root domain
• This flag ensures all relative URLs in your app are correctly prefixed with your repository path

After running the build command, your compiled web app will be generated in the build/web/ directory.

Prepare for GitHub Pages

GitHub Pages can serve content from either:

• The root directory
• The /docs folder in your main branch
• A dedicated branch (typically called gh-pages)

For this guide, we’ll use the /docs approach as it’s straightforward and keeps everything in one branch.

Create a docs/ directory in the root of your project and copy all contents from build/web/. This can be done manually or using below command:

mkdir -p docs
cp -R build/web/* docs/

Commit and Push to GitHub

Add, commit and push the changes to your GitHub repository: This can be done using your favorite git tool or using below command:

git add docs/
git commit -m "Add web build for GitHub Pages"
git push origin main

Configure GitHub Pages Settings

1. Go to your GitHub repository in a web browser
2. Click on “Settings” tab
3. Scroll down to the “Pages” section
4. For “Branch”, select the main or master branch and /docs folder
5. Click “Save”

GitHub will provide you with the URL where your site is published (typically https://username.github.io/repository-name).

Access Your Deployed App

After a few minutes, your Flutter web app will be available at:

https://username.github.io/repository-name

Automating the Deployment Process

Using a Script From Local Machine

Manually copying files and commiting can become tedious. We can automate this process with a shell script.

Create a file named deployment.sh in your project root:

#!/bin/bash

set -e

BUILD_DIRECTORY="build/web"
DEPLOY_DIRECTORY="docs"
COMMIT_MESSAGE="Deploy On Pages"
BASE_HREF="YOUR_REPO_NAME"

build_flutter_web() {
echo "Building Web application..."

    rm -rf "$BUILD_DIRECTORY"
    
    if ! flutter build web \
        --base-href=$BASE_HREF \
        --release; then
        echo "Flutter build failed"
        exit 1
    fi

}

deploy_to_pages() {
echo "Deploying to GitHub Pages..."

    mkdir -p "$DEPLOY_DIRECTORY"
    
    rm -rf "${DEPLOY_DIRECTORY:?}/"*
    
    if ! cp -r "$BUILD_DIRECTORY"/* "$DEPLOY_DIRECTORY"; then
        echo "Failed to copy build files"
        exit 1
    fi

    if git add .; then
        git commit -m "$COMMIT_MESSAGE" && git push
    else
        echo "Git operations failed"
        exit 1
    fi
    
    echo "Deployment completed successfully!"
    echo "Please ensure GitHub Pages is configured to serve from the $DEPLOY_DIRECTORY folder"

}

build_flutter_web
deploy_to_pages

Make the script executable:

chmod +x deployment.sh

Now, whenever you want to update your deployed app, simply run:

./deploy.sh

Setting Up GitHub Actions for CI/CD

For even more automation, you can set up GitHub Actions to automatically build and deploy your Flutter web app whenever you push changes to your repository.

Create a file at .github/workflows/deploy.yml:

name: Deploy to GitHub Pages

on:
workflow_dispatch:  # Allows manual triggering from GitHub UI

jobs:
build-and-deploy:
runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3
        with:
          fetch-depth: 0

      - name: Set up Flutter
        uses: subosito/flutter-action@v2
        with:
          flutter-version: '3.29.1'

      - name: Install dependencies
        run: flutter pub get

      - name: Configure Git
        run: |
          git config --global user.name "GitHub Actions"
          git config --global user.email "actions@github.com"

      - name: Run deployment script
        run: |
          chmod +x ./deployment.sh
          ./deployment.sh

With this workflow, GitHub will automatically build and deploy your app when you push to the main branch.

Conclusion

I have this setup in my Playground Repository. You can have a look for inspiration. Also, I created a gist for the deployment script

P.S. If you found this helpful, don’t forget to check out my other Flutter articles and give a star to my Flutter Playground Repository for more practical examples.

What is Flutter?

Flutter is a free tool from Google that lets you build apps using one set of code. You can make apps for phones, web, and computers all at once. I started using Flutter in 2021 and found it much better than other tools I had tried before.

With Flutter, you write code once and deploy it to multiple platforms:

• iOS
• Android
• Web
• Desktop (Windows, macOS, Linux)

Why I Choose Flutter

After writing native Android code for 4 years, here’s why I switched to Flutter:

1. One Codebase: Write once, use everywhere - saves 30-50% development time
2. Fast Updates: See changes right away while coding - no more waiting
3. Nice Looking UI: Make good-looking apps that feel natural on any device
4. Fast Apps: Flutter makes apps that run as fast as native apps
5. Helpful Community: Get help from other developers and use 30,000+ ready-made packages
6. Many Ready Widgets: Use pre-made buttons, screens, and other parts
7. Custom Designs: Create your own unique look for your apps

Setting Up Your Development Environment

There are two ways to install Flutter: using FVM (recommended) or direct installation. I’ll show you both methods.

1. Install Flutter using FVM (Recommended)

FVM (Flutter Version Management) is a tool that helps you:

• Manage multiple Flutter versions
• Switch between versions easily
• Keep consistent Flutter versions across your team
• Install Flutter versions per project

Here’s how to set up FVM:

1. Install FVM using Homebrew (Mac):

brew tap leoafarias/fvm
brew install fvm

Or using pub (all platforms):

dart pub global activate fvm

1. Install Flutter using FVM:

# Install latest a specific version

fvm install 3.29.0

1. Set up an existing project with FVM:

# Go to project directory
cd my_flutter_app

# Use a specific Flutter version
fvm use 3.29.0

# Verify configuration for this project

fvm flutter --version

Fvm will create .fvmrc configuration file. Do include this file in version control. For more detailed uses, have a look at FVM Docs

Alternative: Direct Flutter Installation

If you prefer installing Flutter directly:

1. Go to Flutter’s download page
2. Download Flutter for your OS
3. Extract to a folder with a simple path

For Mac users:

# Make a folder for Flutter

mkdir ~/development
cd ~/development

# Unzip Flutter

unzip ~/Downloads/flutter_macos_arm64_3.29.0-stable.zip

2. Add Flutter to Your Path

If using FVM, it handles the PATH automatically.

For direct installation, add Flutter to your path:

For Mac/Linux, add to ~/.zshrc or ~/.bashrc:

export PATH="$PATH:$HOME/development/flutter/bin"

For Windows, add Flutter’s bin folder to your Path in System Properties.

3. Set Up Your IDE

Choose an editor for coding Flutter:

• Android Studio
  • Go to Plugins → Browse
  • Install “Flutter” plugin
  • Install “Dart” plugin
  • Restart
• VS Code
  • Install “Flutter” extension
  • Install “Dart” extension
  • Reload VS Code

4. Check Your Setup

Run this command to see if everything works:

flutter doctor

If you see X marks, here’s what to do:

• ❌ Android toolchain: Install Android Studio
• ❌ Xcode (Mac only): Install from App Store
• ❌ Chrome: Install Chrome browser
• ❌ VS Code/Android Studio: Install missing plugins

Just follow what flutter doctor tells you to fix these issues.

Creating Your First Flutter App

Make your first app with these simple commands:

flutter create my_first_app  # Makes a new app
cd my_first_app             # Go to app folder
flutter run                 # Start the app

This is what the main code looks like:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());  // App starts here
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My First Flutter App',    // App name
      theme: ThemeData(
        primarySwatch: Colors.blue,     // Main color
        useMaterial3: true,             // Modern look
      ),
      home: const MyHomePage(title: 'My First Flutter App'),  // First screen
    );
  }
}

Hot Reload and Hot Restart

Flutter has two great features that make coding faster:

Hot Reload:

• Updates your app in under 1 second
• Keeps your app’s current state
• Great for small UI changes
• Press r in terminal to use it

Hot Restart:

• Starts your app fresh (takes 3-5 seconds)
• Resets everything
• Use when Hot Reload doesn’t work
• Press R in terminal to use it

I use Hot Reload at least 20 times every hour - it saves so much time!

Essential Flutter Concepts

1. Widgets

Everything in Flutter is a widget. The main types are:

• StatelessWidget: For parts of the app that don’t change
• StatefulWidget: For parts that need to change

Here’s a simple example:

class WelcomeMessage extends StatelessWidget {
  final String message;  // Input data
  
  const WelcomeMessage({super.key, required this.message});
  
  @override
  Widget build(BuildContext context) {
    // How it looks
    return Text(
      message,
      style: Theme.of(context).textTheme.headlineMedium,
    );
  }
}

// How to use it:
WelcomeMessage(message: "Welcome to Flutter!")

2. State Management

I pick different ways to manage state based on app size:

• setState: For small apps

  // Simple counter
  void _incrementCounter() {
    setState(() {
      _counter++;  // This updates the screen
    });
  }
  

• Provider: For medium apps
• Bloc/Cubit: For large apps

3. Basic Layout Widgets

These are the most important layout widgets I use all the time:

• Container: For styling (padding, margin, color, etc.)
• Row: For side-by-side items
• Column: For top-to-bottom items
• Stack: For putting things on top of each other
• ListView: For scrollable lists

Debugging Flutter Apps

Here are the ways to fix problems in Flutter apps:

1. Print Statements

The simplest way to see what’s happening:

print('Got user data: $userData');  // Show data in console

// Or with a logging package:
log.info('Got user data', userData);

2. Flutter DevTools

Flutter’s special debugging tool that lets you:

• See how widgets are arranged
• Check app performance
• Watch network requests
• Fix layout problems

Start it by running:

flutter run

Then press ‘d’ in the terminal.

3. Breakpoints

Stop your code at certain points to check what’s happening:

1. Click next to a line of code in your editor
2. Run in debug mode
3. When the app stops at that point, check all variables
4. Step through code line by line

Best Practices

1. Widget Tree Structure

• Break big screens into smaller parts (under 100 lines)
• Reuse widgets when you see the same UI more than once

2. Performance Tips

• Use ListView.builder for long lists
• Make widgets const when they don’t change
• Put RepaintBoundary around complex animations

3. Code Organization

• Keep UI code separate from logic code
• Organize by feature, not by file type
• Name things clearly (camelCase for variables, PascalCase for classes)

Common Mistakes To Avoid

1. Too Many Nested Widgets
   • Bad: Putting 10+ widgets inside each other
   • Good: Break into separate widget classes
   • Example: Split a form into FormHeader, FormFields, and FormButtons
2. Not Using Keys
   • Bad: Lists that rearrange items without keys
   • Good: Add keys to list items
   • Example: ListView.builder(itemBuilder: (context, index) => MyWidget(key: ValueKey(index)))
3. Slow Code in Main Thread
   • Bad: Heavy work in build methods
   • Good: Do heavy work outside the UI
   • Example: Use compute(parseJson, jsonString) for parsing
4. Rebuilding Too Much
   • Bad: Uncessesary rebuild of the widget tree
   • Good: Only update the specific widgets that change
   • Example: Use Provider.of(context, listen: false) to avoid extra rebuilds

Resources For Learning More

1. Flutter Docs
2. Flutter YouTube
3. Flutter Discord
4. Flutter Packages

What to Try Next

Try building these simple apps:

1. Todo App: Make a list of tasks (Tutorial)
   • Learn basic state management
   • Practice forms
   • Save data locally
2. Weather App: Show weather forecasts
   • Learn to use APIs
   • Handle loading states
   • Make multiple screens
3. Profile Page: Create a user profile
   • Build complex layouts
   • Add animations
   • Load and cache images

P.S. If you found this helpful, don’t forget to check out my other Flutter articles!

What is State?

In Flutter, “state” refers to any data that can change during the lifetime of your application. This could be:

• User data
• UI state (loading indicators, form inputs)
• Application configuration
• Navigation state

Types of State

1. Ephemeral (Local) State

Ephemeral state is local to a single widget. It’s simple to manage using setState(). Here’s an example:

class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $_counter'),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

2. App State (Global State)

App state needs to be accessed by multiple widgets and screens. Let’s look at a simple example using Provider:

First, create your state model:

class CartModel extends ChangeNotifier {
  final List<String> _items = [];

  List<String> get items => _items;
  int get itemCount => _items.length;

  void addItem(String item) {
    _items.add(item);
    notifyListeners();
  }

  void removeItem(String item) {
    _items.remove(item);
    notifyListeners();
  }
}

Then, set up the provider in your app:

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => CartModel(),
      child: MyApp(),
    ),
  );
}

Use the state in your widgets:

class CartWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<CartModel>(
      builder: (context, cart, child) {
        return Column(
          children: [
            Text('Cart Items: ${cart.itemCount}'),
            ListView.builder(
              itemCount: cart.items.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(cart.items[index]),
                  trailing: IconButton(
                    icon: Icon(Icons.remove_circle),
                    onPressed: () {
                      cart.removeItem(cart.items[index]);
                    },
                  ),
                );
              },
            ),
          ],
        );
      },
    );
  }
}

Best Practices for State Management

1. Choose the Right Approach
   • Use setState() for simple, local state
   • Use state management solutions (Provider, Riverpod, Bloc) for complex app state
2. Keep State Simple

// Good: Simple and focused state
class UserState {
  final String name;
  final String email;
  
  UserState({required this.name, required this.email});
}

// Bad: Too much unrelated state
class AppState {
  final String userName;
  final List<Product> products;
  final bool isDarkMode;
  final int cartItemCount;
  // ... too many different concerns
}

1. Immutable State

// Good: Immutable state
@immutable
class TodoItem {
  final String id;
  final String title;
  final bool isCompleted;

  const TodoItem({
    required this.id,
    required this.title,
    this.isCompleted = false,
  });

  TodoItem copyWith({
    String? id,
    String? title,
    bool? isCompleted,
  }) {
    return TodoItem(
      id: id ?? this.id,
      title: title ?? this.title,
      isCompleted: isCompleted ?? this.isCompleted,
    );
  }
}

1. State Location

// Good: State is close to where it's used
class ProductListScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => ProductListModel(),
      child: ProductList(),
    );
  }
}

// Bad: State is too high in the widget tree
void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => ProductListModel()),
        ChangeNotifierProvider(create: (_) => CartModel()),
        ChangeNotifierProvider(create: (_) => UserModel()),
        // ... too many providers at app root
      ],
      child: MyApp(),
    ),
  );
}

Debugging State

Flutter provides great tools for debugging state:

class DebuggableCartModel extends ChangeNotifier {
  final List<String> _items = [];

  @override
  void notifyListeners() {
    print('Cart state changed: $_items'); // Debug print
    super.notifyListeners();
  }

  void addItem(String item) {
    assert(item.isNotEmpty, 'Item cannot be empty');
    _items.add(item);
    notifyListeners();
  }
}

Conclusion

State management is a crucial skill in Flutter development. Start with simple solutions like setState() for local state, and gradually move to more complex solutions like Provider or Bloc as your app grows. Remember to keep your state organized, immutable, and close to where it’s used.

Stay tuned for more detailed posts about specific state management solutions in Flutter!

P.S. If you found this helpful, don’t forget to check out my other Flutter articles!

Today I will share more about FutureBuilder in Flutter - an essential widget for handling asynchronous operations in your UI. Whether you’re fetching data from an API, reading files or performing complex calculations, FutureBuilder can come in handy.

Understanding Future

Before we dive into FutureBuilder, let’s quickly understand what Future<T> is. In Flutter/Dart, Future<T> represents a value that will be available at some point in the future. It’s the foundation for asynchronous programming, allowing you to perform async operations.

Future<UserData> fetchUserData() async {
    // Simulating API call
    await Future.delayed(const Duration(seconds: 2));
    return UserData(name: 'John Doe', age: 30);
}

Introduction to FutureBuilder

FutureBuilder is a widget that makes it easy to work with Future<T> in your UI. It helps to handle different states of the future:

• Loading state (when the future is running)
• Success state (when the future completes successfully)
• Error state (when the future throws an error)

Here’s a basic example:

FutureBuilder<UserData>(
    future: fetchUserData(),
    builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
        }
        
        if (snapshot.hasError) {
            return Center(
                child: Text('Error: ${snapshot.error}'),
            );
        }
        
        if (snapshot.hasData) {
            final user = snapshot.data!;
            return UserProfileWidget(user: user);
        }
        
        return const SizedBox(); // Fallback for initial state
    },
)

Best Practices

1. Avoid Creating Futures in build()

One common mistake is creating the future directly in the build method. This can cause unnecessary future executions and potential infinite loops.

❌ Don’t do this:

FutureBuilder<UserData>(
    future: fetchUserData(), // Don't create future here!
    builder: (context, snapshot) {
        // ...
    },
)

✅ Do this instead:

class _MyWidgetState extends State<MyWidget> {
    late final Future<UserData> _userDataFuture;

    @override
    void initState() {
        super.initState();
        _userDataFuture = fetchUserData();
    }

    @override
    Widget build(BuildContext context) {
        return FutureBuilder<UserData>(
            future: _userDataFuture,
            builder: (context, snapshot) {
                // ...
            },
        );
    }
}

2. Proper Error Handling

Always provide meaningful error feedback to your users:

FutureBuilder<UserData>(
    future: _userDataFuture,
    builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
            return const LoadingWidget();
        }
        
        if (snapshot.hasError) {
            return ErrorWidget(
                error: snapshot.error,
                onRetry: () {
                    setState(() {
                        _userDataFuture = fetchUserData();
                    });
                },
            );
        }
        
        final user = snapshot.data!;
        return UserProfileWidget(user: user);
    },
)

3. Handle All Connection States

FutureBuilder provides different connection states that you should handle appropriately:

FutureBuilder<UserData>(
    future: _userDataFuture,
    builder: (context, snapshot) {
        switch (snapshot.connectionState) {
            case ConnectionState.none:
                return const Text('No future to execute');
                
            case ConnectionState.waiting:
                return const LoadingWidget();
                
            case ConnectionState.active:
                // This state occurs when the Future is still active but has yielded a value
                // It's more common with StreamBuilder, but can occur with certain Future implementations
                return Column(
                  children: [
                    if (snapshot.hasData)
                      UserProfileWidget(user: snapshot.data!),
                    const LinearProgressIndicator(),
                  ],
                );
                
            case ConnectionState.done:
                if (snapshot.hasError) {
                    return ErrorWidget(
                        error: snapshot.error,
                        onRetry: _retryFetch,
                    );
                }
                
                return UserProfileWidget(user: snapshot.data!);
        }
    },
)

Advanced Usage

1. Refreshable Future

Here’s how to implement a pull-to-refresh functionality with FutureBuilder:

RefreshIndicator(
    onRefresh: () async {
        setState(() {
            _userDataFuture = fetchUserData();
        });
    },
    child: FutureBuilder<UserData>(
        future: _userDataFuture,
        builder: (context, snapshot) {
            // ... your builder logic
        },
    ),
)

2. Caching Results

You can cache the future’s result to avoid unnecessary API calls:

class _MyWidgetState extends State<MyWidget> {
    late Future<UserData> _userDataFuture;
    UserData? _cachedData;

    @override
    void initState() {
        super.initState();
        _userDataFuture = fetchUserData().then((data) {
            _cachedData = data;
            return data;
        });
    }

    Future<void> _refreshData() async {
        setState(() {
            _userDataFuture = fetchUserData().then((data) {
                _cachedData = data;
                return data;
            });
        });
    }

    @override
    Widget build(BuildContext context) {
        return FutureBuilder<UserData>(
            future: _userDataFuture,
            builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.waiting && _cachedData != null) {
                    // Show cached data while refreshing
                    return UserProfileWidget(user: _cachedData!);
                }
                
                // ... rest of your builder logic
            },
        );
    }
}

Remember

• Avoid creating new futures in the build method
• Initialize futures in initState
• Cancel any ongoing operations in dispose()
• Handle all possible states
• Provide meaningful error feedback
• Consider caching for better UX
• Use proper type parameters

Example Code

Visit my Flutter Playground App repository for a complete example

Conclusion

Choose FutureBuilder for simpler scenarios, and explore options like Provider, Bloc or Riverpod for more complex state management needs.

P.S. If you found this helpful, don’t forget to check out my other Flutter articles!

Understanding the Default Error Handling

Flutter handles build phase errors differently depending on the app’s mode:

• In Debug Mode: Shows a red screen (the infamous “Red Screen of Death”) with detailed error information, stack traces, and debugging options
• In Release Mode: Displays a plain grey screen without any context, leaving users confused about what went wrong

Here’s what users see when errors occur:

Error In Debug Mode	Error in Release Mode

The Problem

Default error screens present three major challenges:

1. Poor User Experience

2. Developer Challenges

3. Business Impact

The Solution

Let’s implement a better error handling system. We’ll explore two approaches:

1. Basic Error Widget Customization

This approach is simple yet effective. We’ll override Flutter’s default error widget at the app’s entry point:

void main() {
  // Override the default error widget
  ErrorWidget.builder = (FlutterErrorDetails details) {
    // Return a custom error widget that matches your brand
    return Container(
      padding: const EdgeInsets.all(16.0),
      alignment: Alignment.center,
      child: Text(
        'Error\n${details.exception}',
        style: const TextStyle(color: Colors.red),
        textAlign: TextAlign.center,
      ),
    );
  };
  
  runApp(const MyApp());
}

2. Advanced Error Handling

For production apps, we can use MaterialApp’s builder parameter for more sophisticated error handling:

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, widget) {
        Widget errorWidget = const Text(
          'Uh oh! Something is not right!',
          style: TextStyle(color: Colors.red),
        );

        // Handle different widget types
        if (widget is Scaffold || widget is Navigator) {
          errorWidget = Scaffold(
            appBar: AppBar(title: const Text('Error!')),
            body: Center(child: error),
          );
        }

        ErrorWidget.builder = (_) => errorWidget;

        // Return the original widget if no errors
        if (widget != null) return widget;
        throw Exception('widget is null');
      },
      home: const MyHomeScreen(),
    );
  }
}

The Result

After implementing custom error handling, users see this instead:

Pro Tip: In production apps, move the error handling logic to a dedicated widget or utility class for better maintainability and reusability across different screens.

Key Benefits

1. Better User Experience

2. Improved Development

3. Business Advantages

Implementation Tips

1. Error Messages
   • Keep language simple and clear
   • Provide specific next steps
   • Stay positive and helpful
   • Avoid technical jargon
2. Visual Design
   • Follow your app’s theme consistently
   • Use appropriate icons and colors
   • Maintain brand identity
   • Ensure accessibility standards
3. Error Handling
   • Implement comprehensive logging
   • Add meaningful retry options
   • Handle offline scenarios gracefully
   • Consider various error types
4. Testing
   • Verify all error scenarios
   • Test error tracking systems
   • Check different device sizes
   • Validate accessibility features

Conclusion

Good error handling is about turning potential frustrations into opportunities to showcase your app’s professionalism. By implementing these strategies, you can create a more resilient app that handles errors gracefully and maintains user trust.

Want to dive deeper? Check out my other articles about Flutter development and best practices.