DEV Community: Sohanuzzaman Soad

🚀 Flutter Riverpod Clean Architecture: The Ultimate Production-Ready Template for Scalable Apps

Sohanuzzaman Soad — Mon, 16 Jun 2025 08:05:24 +0000

Hi Flutter devs! 👋

Are you tired of wrestling with messy codebases, unclear folder structures, and state management headaches? I’ve been there too. That’s why I built the Flutter Riverpod Clean Architecture template—a modern, production-ready starter kit that helps you build robust, scalable, and maintainable Flutter apps, faster than ever.

🏆 What Makes This Template Stand Out?

1. Clean Architecture, Done Right

Separation of Concerns: Features, core logic, and infrastructure are clearly separated.
Feature-First Structure: Each feature is isolated, making it easy to add, remove, or refactor without breaking the rest of your app.
Testability: Business logic is decoupled from UI, so you can write meaningful unit and integration tests.

2. Riverpod 2.0+ for State Management

Modern & Robust: Riverpod is the go-to for scalable, testable, and reactive state management.
Provider Organization: All providers are organized by feature, not by type, for maximum clarity.
Async & Sync Support: Easily handle both synchronous and asynchronous state.

3. Localization & Theming

Built-in Localization: Add new languages in minutes. All strings are externalized and ready for translation.
Dark/Light Mode: The template comes with beautiful, accessible themes for both light and dark users.

4. Production-Ready Out of the Box

CI/CD Scripts: Automated scripts for building, testing, and generating documentation.
Modern Documentation: The docs site uses glassmorphism, gradients, and dark mode for a stunning developer experience.
Example Features: Real-world examples (auth, onboarding, etc.) to help you get started.

5. Comprehensive Testing

Unit, Widget, and Integration Tests: Examples included for every layer.
Mocking & Dependency Injection: Easily swap out implementations for testing.

🗂️ Folder Structure Overview

lib/
├── core/         # Shared services, utilities, and cross-cutting concerns (e.g., networking, error handling, theming)
├── features/     # Each app feature in its own folder, fully isolated
│   └── feature_name/
│       ├── data/         # Data sources, models, and repositories (API, DB, etc.)
│       ├── domain/       # Business logic: entities, repositories, use cases
│       └── presentation/ # UI widgets, screens, and Riverpod providers
├── examples/     # Example implementations and UI showcases
├── l10n/         # Localization files and delegates
├── gen/          # Generated code (if any)
└── main.dart     # App entry point

✨ Key Features at a Glance

✅ Riverpod 2.0+: Modern, robust state management
✅ Clean Architecture: Feature-first, scalable structure
✅ Localization: Easy multi-language support
✅ Dark/Light Themes: Beautiful, accessible UI
✅ Comprehensive Testing: Unit, widget, and integration
✅ CI/CD Ready: Automated scripts and workflows
✅ Modern Docs: Beautiful, accessible, and interactive

🚦 Quick Start

git clone https://github.com/ssoad/flutter_riverpod_clean_architecture.git
cd flutter_riverpod_clean_architecture
flutter pub get

📸 Documentation Preview

The documentation landing page is designed for clarity and beauty, with bold gradients, glassmorphism, and full dark mode support.

Code Generation Tools

The template includes several powerful CLI tools to automate repetitive tasks. Let's explore each one with practical examples.

1. Feature Generator (`generate_feature.sh`)

The feature generator is the most versatile tool, allowing you to scaffold new features with different architectural patterns.

Basic Usage

./generate_feature.sh --name user_profile

This creates a complete feature with Clean Architecture layers:

Data layer (repositories, data sources, models)
Domain layer (entities, repository interfaces, use cases)
Presentation layer (screens, widgets, UI providers)
Tests for each layer
Documentation

Different Feature Types

The generator supports various feature types to match your needs:

Clean Architecture Feature (Default)

./generate_feature.sh --name user_auth

This creates:

lib/features/user_auth/
├── data/
│   ├── datasources/
│   │   ├── user_auth_remote_datasource.dart
│   │   └── user_auth_local_datasource.dart
│   ├── models/
│   │   └── user_auth_model.dart
│   └── repositories/
│       └── user_auth_repository_impl.dart
├── domain/
│   ├── entities/
│   │   └── user_auth_entity.dart
│   ├── repositories/
│   │   └── user_auth_repository.dart
│   └── usecases/
│       ├── get_all_user_auths.dart
│       └── get_user_auth_by_id.dart
├── presentation/
│   ├── providers/
│   │   └── user_auth_ui_providers.dart
│   ├── screens/
│   │   ├── user_auth_list_screen.dart
│   │   └── user_auth_detail_screen.dart
│   └── widgets/
│       └── user_auth_list_item.dart
└── providers/
    └── user_auth_providers.dart

Simplified Feature (No Repository Pattern)

./generate_feature.sh --name theme_switcher --no-repository

This creates a simpler structure without the repository pattern:

lib/features/theme_switcher/
├── models/
│   └── theme_switcher_model.dart
├── presentation/
│   ├── providers/
│   │   └── theme_switcher_ui_providers.dart
│   ├── screens/
│   │   └── theme_switcher_screen.dart
│   └── widgets/
│       └── theme_switcher_widget.dart
└── providers/
    └── theme_switcher_providers.dart

UI Component Only

./generate_feature.sh --name custom_button --ui-only

Perfect for reusable UI components:

lib/features/custom_button/
├── models/
│   └── custom_button_model.dart
├── presentation/
│   ├── providers/
│   │   └── custom_button_ui_providers.dart
│   └── widgets/
│       └── custom_button_widget.dart
└── providers/
    └── custom_button_providers.dart

Service Only

./generate_feature.sh --name analytics_service --service-only

Ideal for utility services:

lib/features/analytics_service/
├── models/
│   └── analytics_service_model.dart
├── services/
│   └── analytics_service_service.dart
└── providers/
    └── analytics_service_providers.dart

Additional Options

You can combine options to customize the generated feature:

# Generate without UI (for background services)
./generate_feature.sh --name notification_handler --no-ui

# Skip test files generation
./generate_feature.sh --name quick_prototype --no-tests

# Skip documentation generation
./generate_feature.sh --name internal_utility --no-docs

# Minimal feature (no UI, tests, or docs)
./generate_feature.sh --name formatter --no-ui --no-tests --no-docs

2. Test Generator (`test_generator.sh`)

The test generator automates testing workflows and generates coverage reports.

Running All Tests with Coverage

./test_generator.sh

This command:

Runs all Flutter tests in the project
Generates a coverage report
Opens the HTML coverage report in your browser

Testing Specific Features

# Test only the auth feature
./test_generator.sh --target test/features/auth/

# Test a specific file
./test_generator.sh --target test/features/auth/domain/usecases/login_test.dart

Test Options

# Run tests without coverage (faster)
./test_generator.sh --no-coverage

# Generate coverage but don't open the report
./test_generator.sh --no-report

3. Language Generator (`generate_language.sh`)

The language generator helps manage translations and internationalization.

Adding a New Language

# Add Spanish localization
./generate_language.sh --lang es

# Add multiple languages
./generate_language.sh --lang fr,de,ja

This will:

Set up translation files in lib/l10n/ for each language
Create necessary configuration for Flutter's localization system
Generate boilerplate translation keys based on existing languages

Extracting Translation Keys

# Extract all translatable strings from the codebase
./generate_language.sh --extract

This scans your codebase for strings wrapped in context.tr() calls and updates your translation files with new keys.

Generating Translations

# Generate the localization files
./generate_language.sh --generate

This creates the necessary Dart classes for accessing translations in your code.

4. App Renamer (`rename_app.sh`)

The app renamer makes it easy to customize the app name, package name, and bundle ID across all platforms.

App Renaming

# Update app name and bundle ID
./rename_app.sh --name "My Awesome App" --bundle com.mycompany.awesomeapp

This updates:

App name in all platform-specific files
Package/bundle identifiers in Android and iOS
Various configuration files

Platform-Specific Options

# Update only certain platforms
./rename_app.sh --name "My Awesome App" --bundle com.mycompany.awesomeapp --platforms android,ios

# Change the iOS bundle ID only
./rename_app.sh --ios-bundle com.mycompany.iosapp

# Change the Android package name only
./rename_app.sh --android-package com.mycompany.androidapp

Real-World Examples

Let's see how these tools work together in a real-world development flow:

Creating a New Feature with Full Testing

# 1. Generate the feature
./generate_feature.sh --name shopping_cart

# 2. Run specific tests for the new feature
./test_generator.sh --target test/features/shopping_cart/

# 3. Add new translations for the feature
./generate_language.sh --extract

Quickly Prototyping a UI Component

# 1. Generate a UI-only component
./generate_feature.sh --name gradient_card --ui-only

# 2. Skip tests during initial development
./test_generator.sh --no-coverage

Adding a New Service with Multiple Language Support

# 1. Generate a service-only feature
./generate_feature.sh --name analytics_tracker --service-only

# 2. Add support for multiple languages
./generate_language.sh --lang fr,de,es,ja

# 3. Run tests for the service
./test_generator.sh --target test/features/analytics_tracker/

Tips and Best Practices

Use the right feature type: Choose the appropriate feature structure based on complexity:

Full Clean Architecture for complex business features
No-repository for simpler features
UI-only for reusable UI components
Service-only for utility services

Run tests frequently: The test generator makes it easy to run tests as you develop:

   ./test_generator.sh --target test/features/your_feature/

Generate documentation: Always generate documentation for features to keep the codebase easily maintainable:

   # Generate a feature with documentation
   ./generate_feature.sh --name feature_name

Extract translations early: Extract translatable strings frequently to avoid missing any:

   ./generate_language.sh --extract

Combine commands in scripts: Create custom scripts that combine these tools for your workflow:

   # Example: create_and_test_feature.sh
   #!/bin/bash
   ./generate_feature.sh --name $1
   ./test_generator.sh --target test/features/$1/
   ./generate_language.sh --extract

💡 Why Use Clean Architecture + Riverpod?

Maintainability: Add features and refactor with confidence.
Testability: Write meaningful tests for every layer.
Scalability: Grow your app and your team without chaos.
Community-Driven: Built with real-world feedback and best practices.

🤝 Contribute & Connect

I’d love your feedback, issues, and PRs!

If you find this template useful, please ⭐ the repo and share your thoughts.

Ready to build your next Flutter app?

Start with a foundation that scales. Try the Flutter Riverpod Clean Architecture template today!

Drop your questions, suggestions, or clean architecture tips in the comments!

Let me know if you want to highlight any specific feature, add more code samples, or further customize this post!

This is part of a series on Flutter Riverpod Clean Architecture. Check out the full repository on GitHub.

🚀 Master Flutter CI/CD: Automate App Deployment with GitHub Actions

Sohanuzzaman Soad — Tue, 04 Feb 2025 08:58:04 +0000

Are you tired of manually deploying your Flutter apps every time you make a change? It’s time to level up your CI/CD game with GitHub Actions! 💡

GitHub Actions offers a seamless way to automate your Flutter app’s build, test, and deployment processes for both Android and iOS, saving you time and effort. With just a few lines of YAML, you can create workflows that:

✅ Automatically build your Flutter app when you push to a specific branch.
✅ Run tests to ensure your app remains rock solid.
✅ Deploy APKs to Google Play Store or TestFlight for iOS with minimal manual intervention.

Why Automate Deployment?

Manual deployment is prone to errors, repetitive, and time-consuming. Automation ensures:

Consistency: Every build follows the same steps, leaving no room for missed configurations.
Speed: Focus on coding while GitHub Actions handles deployment.
Confidence: Continuous testing ensures every release is bug-free.

Setting Up GitHub Actions for Flutter

Here’s a step-by-step guide to setting up GitHub Actions for your Flutter app:

1. Create a Workflow File

Navigate to your project repository and create the directory .github/workflows/. Inside this directory, create a file named deploy.yml. This file will define the steps for automating your app deployment.

2. Define Workflow Triggers

Specify when the workflow should run, for example, on a push to the main branch:

on:
  push:
    branches:
      - main

This ensures the workflow runs whenever new changes are pushed to the main branch.

3. Setup Flutter Environment

Install and configure Flutter in your workflow using the subosito/flutter-action:

- name: Setup Flutter
  uses: subosito/flutter-action@v2
  with:
    flutter-version: 'stable'

4. Install Dependencies
Ensure all required packages are fetched:

- name: Install Dependencies
  run: flutter pub get

5. Run Tests
Add a step to execute tests and validate the app:

- name: Run Tests
  run: flutter test

6. Build the App
Build the APK (For Android):

- name: Build APK
  run: flutter build apk

But in most cases we need Signed APK.
For Signed APK:

- name: Decode Keystore File
  run: echo "${{ secrets.ANDROID_KEYSTORE }}" | base64 --decode > android/app/keystore.jks

- name: Decode Keystore Credentials
  run: |
    echo "${{ secrets.KEYSTORE_ALIAS }}" | base64 --decode > keystore_alias.txt
    echo "${{ secrets.KEYSTORE_PASSWORD }}" | base64 --decode > keystore_password.txt
    echo "${{ secrets.KEY_PASSWORD }}" | base64 --decode > key_password.txt

- name: Build Signed APK
  run: |
    flutter build apk --release \
      --dart-define=KEYSTORE_PATH=android/app/keystore.jks \
      --dart-define=KEYSTORE_ALIAS=$(cat keystore_alias.txt) \
      --dart-define=KEYSTORE_PASSWORD=$(cat keystore_password.txt) \
      --dart-define=KEY_PASSWORD=$(cat key_password.txt)

For iOS apps:

- name: Build iOS
  run: flutter build ios --no-codesign

7. Deploy Automatically
Use deployment tools or scripts to upload your build to the respective platforms. Here’s an example for deploying to Google Play:

- name: Deploy to Google Play
  uses: r0adkll/upload-google-play@v1
  with:
    serviceAccountJson: ${{ secrets.GOOGLE_PLAY_SERVICE_ACCOUNT }}
    packageName: com.example.yourapp
    releaseFiles: build/app/outputs/flutter-apk/app-release.apk

For iOS, you can use fastlane or similar tools to deploy to TestFlight. I'll write another post about iOS deployments in depth.

Full Sample Workflow

Here’s a complete workflow example for Flutter deployment with a signed APK and Base64-encoded secrets:

name: Flutter Deployment

on:
  push:
    branches:
      - main

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

    steps:
    - name: Checkout Repository
      uses: actions/checkout@v3

    - name: Setup Flutter
      uses: subosito/flutter-action@v2
      with:
        flutter-version: 'stable'

    - name: Install Dependencies
      run: flutter pub get

    - name: Run Tests
      run: flutter test

    - name: Decode Keystore File
      run: echo "${{ secrets.ANDROID_KEYSTORE }}" | base64 --decode > android/app/keystore.jks

    - name: Decode Keystore Credentials
      run: |
        echo "${{ secrets.KEYSTORE_ALIAS }}" | base64 --decode > keystore_alias.txt
        echo "${{ secrets.KEYSTORE_PASSWORD }}" | base64 --decode > keystore_password.txt
        echo "${{ secrets.KEY_PASSWORD }}" | base64 --decode > key_password.txt

    - name: Build Signed APK
      run: |
        flutter build apk --release \
          --dart-define=KEYSTORE_PATH=android/app/keystore.jks \
          --dart-define=KEYSTORE_ALIAS=$(cat keystore_alias.txt) \
          --dart-define=KEYSTORE_PASSWORD=$(cat keystore_password.txt) \
          --dart-define=KEY_PASSWORD=$(cat key_password.txt)

    - name: Deploy to Google Play
      uses: r0adkll/upload-google-play@v1
      with:
        serviceAccountJson: ${{ secrets.GOOGLE_PLAY_SERVICE_ACCOUNT }}
        packageName: com.example.yourapp
        releaseFiles: build/app/outputs/flutter-apk/app-release.apk

Wrapping Up

By automating Flutter app deployment with GitHub Actions, ensuring signed APKs, and securely storing secrets in Base64, you save valuable time and minimize errors. A solid CI/CD pipeline ensures every release is reliable and reaches your users faster. 🌟

What challenges have you faced while setting up GitHub Actions? Let us know in the comments below! 💬

Create Different Type of Flavor on Flutter Application

Sohanuzzaman Soad — Thu, 09 Jan 2025 11:14:03 +0000

Flutter is a versatile framework that empowers developers to build cross-platform applications with ease. One of its powerful features is the ability to create multiple flavors of your app. This is particularly useful when you want to manage different environments (e.g., development, staging, production) or create white-labeled versions of your application for different clients.

In this post, we’ll explore how to set up and manage flavors in a Flutter 3.27.1 project step by step, leveraging the latest features and updates in this version.

What Are Flavors in Flutter?

In the context of Flutter, flavors are essentially different configurations of your app that may vary in API endpoints, app names, icons, or any other environment-specific settings. These configurations allow you to:

Use different app names, package IDs, and icons.

Target different API environments (development, staging, production).

Customize app behavior for specific use cases.

Flutter 3.27.1 enhances flavor support with better integration in the build system, making the setup smoother than ever.

Setting Up Flavors in Flutter 3.27.1

Let’s create multiple flavors for a Flutter app. For this guide, we’ll set up development, staging, and production flavors.

Step 1: Configure Android Flavors

Update android/app/build.gradle: Add the flavor configurations under the android block. Flutter 3.27.1 ensures better support for Gradle versions.

android {
    ...
    flavorDimensions "default"
    productFlavors {
        dev {
            dimension "default"
            applicationIdSuffix ".dev"
            versionNameSuffix "-dev"
        }
        staging {
            dimension "default"
            applicationIdSuffix ".staging"
            versionNameSuffix "-staging"
        }
        prod {
            dimension "default"
        }
    }
}

Create Separate Resources for Each Flavor:
Place different icons and configurations in directories like res/mipmap-dev, res/mipmap-staging, and res/mipmap-prod. Flutter 3.27.1’s build system ensures seamless resource handling.
Update android/app/src/main/AndroidManifest.xml:
Use placeholders for app-specific values:

<application
    android:label="@string/app_name"
    android:icon="@mipmap/ic_launcher">
</application>

Step 2: Configure iOS Schemes

Create New Schemes:
Open the iOS project in Xcode.
Go to Product > Scheme > Manage Schemes and duplicate the existing scheme for dev, staging, and prod.
Add Configurations in ios/Runner.xcodeproj:
Select the project in Xcode and go to the Info tab.
Add configurations for Debug-dev, Release-staging, and so on.
Set Build Settings for Each Flavor:
Update Bundle Identifier (e.g., com.example.app.dev, com.example.app.staging, com.example.app).
Use different xcassets for app icons and splash screens. Flutter 3.27.1 improves asset handling for iOS.

Step 3: Use Environment-Specific Configurations in Dart

Create a Dart Configuration File: Create a flavors.dart file to define environment-specific variables:

class FlavorConfig {
  final String name;
  final String baseUrl;

  static FlavorConfig? _instance;

  FlavorConfig._internal({required this.name, required this.baseUrl});

  static void initialize({required String name, required String baseUrl}) {
    _instance = FlavorConfig._internal(name: name, baseUrl: baseUrl);
  }

  static FlavorConfig get instance => _instance!;
}

Initialize the Flavor: Update the main method to initialize the flavor:

void main() {
  FlavorConfig.initialize(
    name: "Development",
    baseUrl: "https://dev.api.example.com",
  );
  runApp(MyApp());
}

Pass the Flavor During Build: Use the flutter run command with --flavor:

flutter run --flavor dev -t lib/main_dev.dart
flutter run --flavor staging -t lib/main_staging.dart
flutter run --flavor prod -t lib/main_prod.dart

Benefits of Using Flavors in Flutter 3.27.1

Streamlined Development and Testing: Quickly switch between environments without modifying the codebase. Flutter 3.27.1 makes environment transitions smoother.
Customization: Easily differentiate app branding for different clients or use cases.
Scalability: Manage multiple app versions in a single codebase efficiently.
Improved Performance: The enhanced build process in Flutter 3.27.1 optimizes flavor-specific builds, reducing build times.

Best Practices for Flavor Management

Use Environment Files: Maintain separate environment files for each flavor to manage configurations effectively.
Automate Builds: Use CI/CD tools like GitHub Actions or Bitrise to automate flavor builds.
Document Flavors: Clearly document the purpose and configurations of each flavor for your team.

Conclusion

Setting up flavors in a Flutter app with version 3.27.1 is more efficient and powerful than ever. By leveraging its enhanced build tools and configurations, you can create and manage multiple app versions tailored to your needs effortlessly.

If you found this guide helpful, feel free to connect with me for more insights and discussions:

GitHub: Sohanuzzaman Soad

LinkedIn: Sohanuzzaman Soad

Happy coding! 🚀

What’s New in Flutter 3.27.1: In-Depth Look with Code Examples

Sohanuzzaman Soad — Tue, 31 Dec 2024 08:27:30 +0000

Flutter 3.27.1 brings a host of new features, enhancements, and updates that improve both the developer experience and application performance. This version continues Flutter's mission of providing a seamless development experience across platforms while ensuring robust performance and modern UI capabilities. The improvements range from significant updates to Cupertino and Material Design widgets, better rendering engines for Android and iOS, to improved web performance with WebAssembly compatibility. Additionally, Flutter 3.27.1 introduces various framework and tooling enhancements that empower developers to build dynamic, accessible, and visually appealing applications with greater efficiency. Here’s a detailed exploration of the major changes, complete with code examples.

1. Cupertino Widget Enhancements

CupertinoCheckbox and CupertinoRadio

These widgets have been updated with new sizes, colors, stroke widths, and press behaviors. They now support mouse cursors, semantic labels, thumb images, and fill colors, making them more versatile and customizable.

Example:

CupertinoCheckbox(
  value: true,
  onChanged: (bool? newValue) {
    print('Checkbox clicked');
  },
  mouseCursor: SystemMouseCursors.click,
  semanticLabel: 'Enable notifications',
  fillColor: CupertinoColors.activeGreen,
)

CupertinoRadio<String>(
  value: 'option1',
  groupValue: selectedOption,
  onChanged: (String? newValue) {
    setState(() {
      selectedOption = newValue;
    });
  },
)

CupertinoSlidingSegmentedControl

Visual and functional improvements include proportional layouts based on segment content, adjustments to thumb radius, separator height, and padding.

Example:

CupertinoSlidingSegmentedControl<int>(
  groupValue: selectedSegment,
  children: {
    0: Text('Home'),
    1: Text('Settings'),
  },
  onValueChanged: (int? newValue) {
    setState(() {
      selectedSegment = newValue;
    });
  },
)

2. Material Design Updates

Component Theming

The introduction of new data classes such as CardThemeData, DialogThemeData, and TabBarThemeData allows for more consistent and customizable theming.

Example:

ThemeData(
  cardTheme: CardTheme(
    color: Colors.blueGrey,
    elevation: 4,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10),
    ),
  ),
  dialogTheme: DialogTheme(
    backgroundColor: Colors.white,
    titleTextStyle: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
  ),
  tabBarTheme: TabBarTheme(
    labelColor: Colors.black,
    unselectedLabelColor: Colors.grey,
    indicator: BoxDecoration(
      color: Colors.blue,
      borderRadius: BorderRadius.circular(10),
    ),
  ),
)

CarouselView.weighted

A new constructor allows for dynamic layouts within carousels by specifying relative weights for items.

Example:

CarouselView.weighted(
  itemWeights: [0.5, 0.3, 0.2],
  items: [
    Image.network('https://via.placeholder.com/150'),
    Image.network('https://via.placeholder.com/100'),
    Image.network('https://via.placeholder.com/50'),
  ],
)

3. Framework Improvements

Row and Column Spacing

A new spacing parameter simplifies the application of fixed offsets between children.

Example:

Row(
  spacing: 10,
  children: [
    Icon(Icons.home),
    Icon(Icons.settings),
    Icon(Icons.notifications),
  ],
)

Column(
  spacing: 20,
  children: [
    Text('Hello'),
    Text('World'),
  ],
)

Text Selection Enhancements

Support for Shift + Click gestures on desktop platforms has been added, along with improved behavior for text selection.

Example:

SelectableText(
  'This is a selectable text.',
  showCursor: true,
  cursorWidth: 2,
  onSelectionChanged: (TextSelection selection, SelectionChangedCause? cause) {
    print('Selection changed: $selection');
  },
)

4. Engine Enhancements

Impeller on Android

Impeller is now the default rendering engine on modern Android devices, offering improved performance. Developers can revert to Skia if needed.

Example:

flutter:
  use-skia: true

iOS Rendering

A new Metal rendering surface implementation reduces frame delays, particularly on high-frame-rate devices.

5. Web Platform Updates

WebAssembly Compatibility

Flutter plugins and packages are now compatible with WebAssembly, enhancing web performance.

Accessibility Improvements

Better support for headings, dialogs, and interactive elements.

Example:

Semantics(
  label: 'Submit button',
  child: ElevatedButton(
    onPressed: () {},
    child: Text('Submit'),
  ),
)

6. Development Tools

DevTools Enhancements

New features include improved performance analysis and debugging capabilities.

Example:
Run the following command to start DevTools with the new options:

flutter pub global run devtools

7. Additional Resources and Repository Link

For more insights into Flutter 3.27.1, you can explore the official Flutter documentation, which provides in-depth explanations, migration guides, and best practices:

Flutter Documentation: Flutter 3.27 Release Notes

Additionally, visit the GitHub repository I created to see live examples of the new features in Flutter 3.27.1 It contains detailed code samples and project templates.

GitHub Repository: Flutter 3.27.1 Examples

Feel free to explore and contribute to the repository. Your feedback and pull requests are always welcome!

Conclusion

Flutter 3.27 reflects the framework’s continuous evolution, offering a robust toolset for building modern, performant applications. From Cupertino and Material design updates to powerful engine enhancements, this release is packed with features to make your Flutter development experience better than ever.

For more updates and projects, visit my GitHub profile: Sohanuzzaman Soad.

Unleash Flutter's Power: Mastering the compute Function for Seamless Background Processing

Sohanuzzaman Soad — Sun, 25 Feb 2024 16:04:17 +0000

Introduction:
In the realm of mobile app development, efficiency is paramount. Users demand smooth, responsive experiences, regardless of the complexity of the application. Flutter, Google's UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase, offers a variety of tools and techniques to achieve optimal performance. One such tool is Flutter Compute, a powerful feature that enables parallel processing within Flutter apps. In this post, we'll delve into the intricacies of Flutter Compute, exploring how it works and how developers can leverage it to enhance the performance of their applications.

Understanding Flutter Compute:
Flutter Compute is a mechanism provided by the Flutter framework that allows developers to perform intensive computational tasks in a separate isolate, thereby preventing UI jank and ensuring a smooth user experience. In Flutter, an isolate is a separate memory allocation that runs concurrently with the main application thread, enabling parallel execution of tasks without blocking the UI.

How Flutter Compute Works:
When developers use Flutter Compute, they offload computationally intensive tasks, such as complex calculations or data processing, to a separate isolate. This isolate operates independently of the main UI thread, ensuring that the user interface remains responsive even while these tasks are being executed. Once the computation is complete, Flutter Compute provides a seamless mechanism to communicate the results back to the main UI thread for display or further processing.

Benefits of Using Flutter Compute:
Improved Performance: By offloading intensive computations to separate isolates, Flutter Compute prevents UI jank and ensures that the user interface remains responsive, thereby enhancing the overall performance of the application.
Parallel Processing: Flutter Compute harnesses the power of parallel processing, allowing multiple tasks to be executed concurrently without impacting the main UI thread.
**Enhanced User Experience: **With smoother animations, faster response times, and reduced lag, applications utilizing Flutter Compute deliver a superior user experience, leading to higher user satisfaction and retention.

Implementing Flutter Compute:
Implementing Flutter Compute in your application involves several steps:

Identify computationally intensive tasks that can be offloaded to separate isolates.
Create a function to perform the desired computation.
Use the compute() function provided by Flutter to execute the function in a separate isolate.
Handle the results returned by the computation and update the UI as necessary.

Let's illustrate the concept of Flutter Compute with an example code snippet. In this example, we'll create a simple Flutter application that calculates the factorial of a given number using Flutter Compute to perform the computation in a separate isolate.

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Compute Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FactorialCalculator(),
    );
  }
}

class FactorialCalculator extends StatefulWidget {
  @override
  _FactorialCalculatorState createState() => _FactorialCalculatorState();
}

class _FactorialCalculatorState extends State<FactorialCalculator> {
  int _number = 5; // Default number for factorial calculation
  int _factorial = 0; // Result placeholder

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Compute Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Calculate Factorial of:',
            ),
            SizedBox(height: 10),
            Text(
              '$_number',
              style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                _calculateFactorial(_number);
              },
              child: Text('Calculate'),
            ),
            SizedBox(height: 20),
            Text(
              'Factorial Result:',
            ),
            SizedBox(height: 10),
            Text(
              '$_factorial',
              style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
      ),
    );
  }

  // Function to calculate factorial using Flutter Compute
  void _calculateFactorial(int number) {
    compute(_factorialCompute, number).then((value) {
      setState(() {
        _factorial = value;
      });
    });
  }

  // Function to perform factorial computation
  static int _factorialCompute(int number) {
    if (number == 0 || number == 1) {
      return 1;
    } else {
      return number * _factorialCompute(number - 1);
    }
  }
}

In this example:
We have a simple Flutter application with a button to calculate the factorial of a number and display the result.
The calculation of the factorial is performed using Flutter Compute by calling the _factorialCompute function inside the compute() function.
The _factorialCompute function is a static method that recursively calculates the factorial of a given number.
When the calculation is complete, the result is updated in the UI using setState() to trigger a rebuild of the widget tree with the updated value.
This example demonstrates how Flutter Compute can be used to perform computationally intensive tasks, such as factorial calculation, in a separate isolate to ensure that the UI remains responsive.

Best Practices for Using Flutter Compute:
Choose Tasks Wisely: Prioritize tasks that are truly computationally intensive and would benefit from parallel processing.
Minimize Data Transfer: Keep data transfer between isolates and the main UI thread to a minimum to avoid performance overhead.
Monitor Performance: Use profiling tools to monitor the performance of your application and identify any bottlenecks that may arise from the use of Flutter Compute.
Optimize Algorithms: Optimize algorithms and data structures to further improve the efficiency of your computations.

Pro tips:
Choose the right tasks: Focus on CPU-bound operations that would block the UI thread.
Keep it serializable: Pass data that can be easily transferred between isolates.
Handle errors gracefully: Implement error-handling mechanisms to catch and report issues.

Conclusion:
Flutter Compute is a powerful tool for enhancing the performance of Flutter applications by enabling parallel processing of computationally intensive tasks. By offloading these tasks to separate isolates, developers can ensure that their applications remain responsive and provide a seamless user experience. By understanding how Flutter Compute works and following best practices for its implementation, developers can leverage this feature to build high-performance Flutter applications that delight users and stand out in the competitive landscape of mobile app development.

Share your experiences with compute or ask questions in the comments! Let's leverage Flutter's power to build performant and responsive apps together. Happy Coding!

DEV Community: Sohanuzzaman Soad

🚀 Flutter Riverpod Clean Architecture: The Ultimate Production-Ready Template for Scalable Apps

🏆 What Makes This Template Stand Out?

1. Clean Architecture, Done Right

2. Riverpod 2.0+ for State Management

3. Localization & Theming

4. Production-Ready Out of the Box

5. Comprehensive Testing

🗂️ Folder Structure Overview

✨ Key Features at a Glance

🚦 Quick Start

📸 Documentation Preview

Code Generation Tools

1. Feature Generator (generate_feature.sh)

Basic Usage

Different Feature Types

Clean Architecture Feature (Default)

Simplified Feature (No Repository Pattern)

UI Component Only

Service Only

Additional Options

2. Test Generator (test_generator.sh)

Running All Tests with Coverage

Testing Specific Features

Test Options

3. Language Generator (generate_language.sh)

Adding a New Language

Extracting Translation Keys

Generating Translations

4. App Renamer (rename_app.sh)

App Renaming

Platform-Specific Options

Real-World Examples

Creating a New Feature with Full Testing

Quickly Prototyping a UI Component

Adding a New Service with Multiple Language Support

Tips and Best Practices

💡 Why Use Clean Architecture + Riverpod?

🤝 Contribute & Connect

Ready to build your next Flutter app?

🚀 Master Flutter CI/CD: Automate App Deployment with GitHub Actions

Why Automate Deployment?

Setting Up GitHub Actions for Flutter

Full Sample Workflow

Create Different Type of Flavor on Flutter Application

What Are Flavors in Flutter?

Setting Up Flavors in Flutter 3.27.1

Step 1: Configure Android Flavors

Step 2: Configure iOS Schemes

Step 3: Use Environment-Specific Configurations in Dart

Benefits of Using Flavors in Flutter 3.27.1

Best Practices for Flavor Management

Conclusion

What’s New in Flutter 3.27.1: In-Depth Look with Code Examples

1. Cupertino Widget Enhancements

2. Material Design Updates

3. Framework Improvements

4. Engine Enhancements

5. Web Platform Updates

6. Development Tools

7. Additional Resources and Repository Link

Conclusion

Unleash Flutter's Power: Mastering the compute Function for Seamless Background Processing

1. Feature Generator (`generate_feature.sh`)

2. Test Generator (`test_generator.sh`)

3. Language Generator (`generate_language.sh`)

4. App Renamer (`rename_app.sh`)