DEV Community: مصعب يوسف

The Power of Structural Design Patterns in Flutter: Your Ultimate Guide to Building Efficient Apps

مصعب يوسف — Mon, 26 Oct 2026 07:57:00 +0000

Structural design patterns play an integral role in organizing relationships between objects, facilitating the development of flexible, scalable, and maintainable user interfaces in Flutter applications. A profound understanding of these patterns can significantly enhance the quality, maintainability, and adaptability of your Flutter codebase. In this guide, we delve into nine key structural design patterns in Flutter, offering comprehensive explanations accompanied by practical examples. These examples draw inspiration from the repository available at flutterdesignpatterns.com.

1. Adapter Pattern

The Adapter Pattern reconciles incompatible interfaces, enabling them to work seamlessly together. In Flutter, this pattern is often used to adapt the interface of an existing class to match the expectations of another class.

Example

Consider a scenario where you have a SquarePeg class, but you need to use it in a context where only RoundPeg is accepted.

class RoundPeg {
  final double radius;
  RoundPeg(this.radius);
}
class SquarePeg {
  final double width;
  SquarePeg(this.width);
}
class SquarePegAdapter extends RoundPeg {
  final SquarePeg squarePeg;
  SquarePegAdapter(this.squarePeg) : super(squarePeg.width * 0.707); // Approximate radius
}
void main() {
  RoundPeg roundPeg = RoundPeg(5.0);
  SquarePeg squarePeg = SquarePeg(5.0);
  RoundPeg adaptedPeg = SquarePegAdapter(squarePeg);
  print('Round Peg Radius: ${roundPeg.radius}');
  print('Adapted Peg Radius: ${adaptedPeg.radius}');
}

In this example, SquarePegAdapter adapts the interface of SquarePeg to work as a RoundPeg, allowing both classes to coexist harmoniously.

2. Bridge Pattern

The Bridge Pattern decouples an abstraction from its implementation, allowing both to evolve independently. In Flutter, this pattern is highly beneficial for separating complex widget hierarchies, thereby improving maintainability.

Example

Consider a scenario where different rendering logic is needed for multiple theme types in your app.

abstract class Theme {
  void applyTheme();
}

class LightTheme implements Theme {
  @override
  void applyTheme() => print('Applying Light Theme');
}
class DarkTheme implements Theme {
  @override
  void applyTheme() => print('Applying Dark Theme');
}
abstract class UIComponent {
  Theme theme;
  UIComponent(this.theme);
  void render();
}
class Button extends UIComponent {
  Button(Theme theme) : super(theme);
  @override
  void render() {
    theme.applyTheme();
    print('Rendering Button');
  }
}
void main() {
  Theme darkTheme = DarkTheme();
  UIComponent button = Button(darkTheme);
  button.render();
}

Here, Button and Theme are independent, allowing Button to use any implementation of Theme. This facilitates extensibility, enabling the easy addition of new themes.

3. Composite Pattern

The Composite Pattern allows treating a group of objects in the same way as a single instance of an object. This pattern is particularly useful in Flutter when dealing with hierarchical UI structures.

Example

Consider a scenario where you need to represent a tree-like structure of widgets.

abstract class Widget {
  void draw();
}

class TextWidget implements Widget {
  final String text;
  TextWidget(this.text);
  @override
  void draw() => print('Drawing Text: $text');
}
class ContainerWidget implements Widget {
  final List<Widget> children = [];
  void addChild(Widget widget) => children.add(widget);
  @override
  void draw() {
    print('Drawing Container');
    for (var child in children) {
      child.draw();
    }
  }
}
void main() {
  ContainerWidget root = ContainerWidget();
  root.addChild(TextWidget('Hello'));
  root.addChild(TextWidget('Flutter'));
  ContainerWidget nested = ContainerWidget();
  nested.addChild(TextWidget('Nested Hello'));
  root.addChild(nested);
  root.draw();
}

In this example, ContainerWidget can contain multiple child widgets, allowing the creation of complex, hierarchical UI structures.

4. Decorator Pattern

The Decorator Pattern dynamically adds functionality to an object without altering its structure. This approach is ideal for adding visual elements to widgets in Flutter.

Example

Consider adding additional properties, such as borders or padding, to a basic TextWidget.

abstract class TextWidget {
  String render();
}

class SimpleTextWidget implements TextWidget {
  @override
  String render() => 'Hello, Flutter!';
}
class BorderDecorator extends TextWidget {
  final TextWidget textWidget;
  BorderDecorator(this.textWidget);
  @override
  String render() => 'Border: [ ${textWidget.render()} ]';
}
class PaddingDecorator extends TextWidget {
  final TextWidget textWidget;
  PaddingDecorator(this.textWidget);
  @override
  String render() => 'Padding: [ ${textWidget.render()} ]';
}
void main() {
  TextWidget simpleText = SimpleTextWidget();
  TextWidget paddedText = PaddingDecorator(simpleText);
  TextWidget borderedText = BorderDecorator(paddedText);
  print(borderedText.render()); // Output: Border: [ Padding: [ Hello, Flutter! ] ]
}

In this example, the decorators PaddingDecorator and BorderDecorator augment the functionality of the TextWidget without modifying its core implementation.

5. Facade Pattern

The Facade Pattern provides a simplified interface to a complex system. This pattern is particularly advantageous when dealing with multiple services or third-party integrations in Flutter.

Example

Consider a scenario where you have a complex audio player setup involving multiple subsystems such as playback, volume control, and track management.

class PlaybackSystem {
  void play() => print('Playing audio');
  void stop() => print('Stopping audio');
}
class VolumeSystem {
  void setVolume(double level) => print('Setting volume to $level');
}
class TrackManagementSystem {
  void selectTrack(String track) => print('Selecting track: $track');
}
class AudioPlayerFacade {
  final PlaybackSystem _playbackSystem = PlaybackSystem();
  final VolumeSystem _volumeSystem = VolumeSystem();
  final TrackManagementSystem _trackManagementSystem = TrackManagementSystem();
  void playTrack(String track) {
    _trackManagementSystem.selectTrack(track);
    _playbackSystem.play();
  }
  void stop() => _playbackSystem.stop();
  void setVolume(double level) => _volumeSystem.setVolume(level);
}
void main() {
  AudioPlayerFacade audioPlayer = AudioPlayerFacade();
  audioPlayer.playTrack('My Favorite Song');
  audioPlayer.setVolume(0.8);
  audioPlayer.stop();
}

The AudioPlayerFacade simplifies interactions with multiple subsystems by providing a straightforward interface for common operations.

6. Proxy Pattern

The Proxy Pattern serves as a placeholder or surrogate for another object, controlling access to it. This pattern is useful for resource management or adding a layer of control in Flutter applications.

Example

Consider a scenario where you need to manage access to a large image that requires considerable time to load.

abstract class Image {
  void load();
}
class RealImage implements Image {
  final String filename;
  RealImage(this.filename);
  @override
  void load() => print('Loading image: $filename');
}
class ProxyImage implements Image {
  final String filename;
  RealImage? _realImage;
  ProxyImage(this.filename);
  @override
  void load() {
    if (_realImage == null) {
      _realImage = RealImage(filename);
    }
    _realImage!.load();
  }
}
void main() {
  Image image = ProxyImage('big_photo.png');
  image.load(); // Loading occurs only when load() is invoked
}

The ProxyImage acts as a placeholder, with the actual image being loaded only when necessary, thereby optimizing resource usage.

7. Flyweight Pattern

The Flyweight Pattern minimizes memory usage by sharing as much data as possible among similar objects. This pattern is particularly beneficial in Flutter when dealing with a large number of similar UI components.

Example

Consider creating multiple icons within a list, each with similar properties.

class IconFlyweight {
  static final Map<String, IconFlyweight> _cache = {};
  final String icon;
factory IconFlyweight(String icon) {
    return _cache.putIfAbsent(icon, () => IconFlyweight._internal(icon));
  }
  IconFlyweight._internal(this.icon);
  void render() => print('Rendering icon: $icon');
}
void main() {
  IconFlyweight icon1 = IconFlyweight('home');
  IconFlyweight icon2 = IconFlyweight('settings');
  IconFlyweight icon3 = IconFlyweight('home'); // Reuses the same instance as icon1
  icon1.render();
  icon2.render();
  icon3.render();
}

The IconFlyweight class ensures that instances with the same value are reused, optimizing both memory usage and application performance.

Conclusion

Structural design patterns are essential for organizing and constructing scalable UI components in Flutter. By mastering these seven structural patterns — Adapter, Bridge, Composite, Decorator, Facade, Proxy, and Flyweight — you can significantly enhance your application’s flexibility, maintainability, and efficiency. Experimenting with these patterns will enable you to build more sophisticated, dynamic, and resilient user interfaces, transforming your Flutter development practices to achieve higher standards of quality and scalability.

Originally published on Medium on November 12, 2024.

Updates to make you more productive when developing Flutter Web

مصعب يوسف — Mon, 26 Oct 2026 07:56:24 +0000

Peace upon you,

I’m thrilled to share the latest and greatest features that have been introduced in Flutter 3.10 and beyond. Flutter, an open-source UI toolkit developed by Google, continues to evolve, providing developers with powerful tools and faster to build stunning cross-platform applications. Let’s explore some of the features of Flutter’s latest versions.

Aside from the nice improvements in Material 3, there are valuable improvements in web

Flutter web apps improved load times

Back in the day when you were working on a web app with flutter and after weeks of work you are ready to release your app, you publish it, you open the app in your browser to see the amazing work you’ve done. But the app takes a long time to start!!

Now! this release reduces the file size of icon fonts. It pruned unused glyphs from both Material and Cupertino and improve image decoding and scrolling speed.

addition to this, there has been an update to the Flutter lifecycle API which allows you to display a splash screen for your web application while it is loading, which is an excellent enhancement.

Embedding a Flutter app into an HTML page

You can embed a Flutter web app into any HTML element of your web page, with flutter.js and the hostElement engine initialization parameter.

To tell Flutter web in which element to render, use the hostElement parameter of the initializeEngine function.

Seamless integration with the web

Flutter is the first framework designed architecturally around new and emerging web technologies like CanvasKit and WebAssembly, which particularly suit complex app experiences.

Support for WebAssembly (Wasm)

WebAssembly (often abbreviated to Wasm) has been growing in maturity as a platform-neutral binary instruction format for modern browsers. On the web, Flutter has been using Wasm to distribute the CanvasKit runtime, while the Dart framework and application code has historically been compiled to JavaScript. Flutter team ’ve been interested in targeting Wasm, instead of JavaScript, for a while. Until recently, however, Wasm lacked native support for garbage-collected languages like Dart.

WebAssembly excites Flutter with its potential to bring the performance of native code to the web. Dart’s JavaScript compiler, used across millions of lines of code at Google, already generates fast, well-tuned JavaScript. However, switching to Wasm will give us the efficiency of native code with the portability of JavaScript, which will further improve our performance on the web. In some early benchmarks, we’ve seen a boost of 3× for execution speeds, which translates into yet richer web-based experiences. And Wasm couples this with easier integration with code written in other languages like Kotlin and C .

For more information, check out Customizing web app initialization on docs.flutter.dev & new architectures with WebAssembly

Finally…

I would like to talk about an update not only for the web, but also for Flutter in general.

Use the `MediaQuery.of()` method in your build functions

When some aspect of the flutter MediaQuery changes, every widget which depends on MediaQuery.of(context) is rebuilt. Most of these rebuilds are unnecessary, since most changes to MediaQuery do not change more than 1 or 2 fields at a time (window resizing, system brightness changing, system font scale changing).

MediaQuery does not change often on mobile, but resizing web happens often and flutter should be able to handle being resized without dropping frames. There is one place that MediaQuery is rapidly updated on mobile: on iOS, as the keyboard opens, MediaQuery is updated every frame with the only change being the keyboard insets.

Reference

https://docs.flutter.dev/platform-integration/web/initialization#initializing-the-engine

https://github.com/flutter/flutter/pull/114459

Originally published on Medium on June 21, 2023.

Generated Code in Flutter ”Freezed”

مصعب يوسف — Mon, 26 Oct 2026 07:55:18 +0000

Improve Flutter Developer Skills ‘Freezed Package’

“Peace be upon you “

We all know that everyone wants to reach the maximum stages of development in work and science, This is no different when you work in the field of mobile application development, Especially with Google developers who have developed flutter the most amazing framework which contains many useful libraries, one of which we will talk about: freezed

Why we need Freezed ?

Dart is awesome, but defining a “model” can be tedious. You have to:

define a constructor + properties
override toString, operator ==, hashCode
implement a copyWith method to clone the object
handle (de)serialization

Implementing all of this can take hundreds of lines, which are error-prone and affect the readability of your model significantly.

Freezed tries to fix that by implementing most of this for you, allowing you to focus on the definition of your model.

Key Features of the `freezed` Package

Immutable Models: With freezed, the generated models are immutable by default. This prevents unintended changes to data and enhances predictability in your application's behavior.
Union Types: freezed allows you to define union types, which represent a value that could be one of several possible types. This is particularly useful for scenarios like representing different states of an entity.
Pattern Matching: The package provides a powerful pattern matching mechanism, similar to pattern matching in functional programming languages. This helps in handling different cases of union types with ease.
CopyWith Method: freezed generates a copyWith method for each model, enabling you to create modified copies of objects without modifying the original object itself.
As same As Equatable: The generated models implement the Equatable interface, making it easy to compare instances for equality.

if you don’t know the “Equatable Package”

Equatable is a library that helps implement value equality in Dart classes by overriding the == operator and hashCode method. It simplifies the process of comparing objects based on their properties.

To use Equatable, you need to extend the Equatable class and override the props method, which returns a list of properties to be used for comparison. The == operator and hashCode method are automatically generated based on the properties specified in props.

import 'package:equatable/equatable.dart';

class Person extends Equatable {
  final String name;
  final int age;

  Person(this.name, this.age);

  @override
  List<Object?> get props => [name, age];
}

“ Freezed Package “

is a code generation library that provides a concise way to create immutable value classes with value equality, pattern matching, Union Types*,* and copy methods. It generates boilerplate code for you based on the class definition.

To use Freezed, you need to annotate your class with @freezed and specify the constructors and properties. Freezed then generates code for value equality, pattern matching, and copy methods automatically.

How To Use?

Step 1: Add Dependencies

To use Freezed in your Flutter project, you need to add the following dependencies to your pubspec.yaml file:

Step 2: Create the Freezed Data Model

Define your immutable data model using Freezed. For example, let’s create a simple User model:

import 'package:flutter/foundation.dart';
import 'package:freezed_annotation/freezed_annotation.dart';

part 'user.freezed.dart';
@freezed
abstract class User with _$User {
  const factory User({
    String? name,
    String? email,
  }) = _User;
}

Using Union Types

Imagine a scenario where a Person can be either a Student or a Teacher. We can use union types to represent this:

freezed
abstract class User with _$User{
  const factory User.Client({
    String? name,
    String? email,
    String? phone
  }) = Client;

const factory User.Employee({
    String? name,
    String? email,
    UserRole? role;
  }) = Employee;
}

in bloc

@freezed
abstract class AppState with _$AppState {
  const factory AppState.initial() = _Initial;
  const factory AppState.loading() = _Loading;
  const factory AppState.loaded(List<User> users) = _Loaded;
  const factory AppState.error(String message) = _Error;
}

Pattern Matching

Pattern matching allows you to handle different cases of union types succinctly:

void printUserInfo(Useruser) {
  user.when(
    clien: (name, age, grade) {
      print('Name: $name, Email: $age, Phone: $phone');
    },
    employee: (name, age, subject) {
      print('Name: $name, Email: $age, Role: ${role.toString}');
    },
  );
}

in bloc

void handleAppState(AppState state) {
  state.when(
    initial: () => print('Initial state'),
    loading: () => print('Loading state'),
    loaded: (users) => print('Loaded state with ${users.length} users'),
    error: (message) => print('Error state: $message'),
  );
}

CopyWith Method

The copyWith method enables you to create modified copies of objects:

final mainClient= Person.student(
name: 'Alice',
 email: mo@gmail.com,
 phone: 010101111,
);

final newClient = mainClient.copyWith(
email: lo@gmail.com,
phone: 010102211,
);

Goodbye to another Package and the How to Develop Yourself series

Conclusion

The freezed package is a powerful tool,Freezed greatly reduces the amount of code that programmers have to creating immutable data models, union types, and pattern matching in Flutter applications. This results in cleaner and easier to understand code. By generating necessary code, it reduces boilerplate, Code generated by Freezed provides type safety, which reduces the chance of runtime errors related to state changes.

Improved developer productivity.

With less manual coding and automatic creation of necessary methods, programmers can focus more on application logic and features and improve overall efficiency.

References

https://resocoder.com/2020/02/11/freezed-data-class-union-in-one-dart-package/

https://pub.dev/packages/freezed#how-to-use

https://pub.dev/packages/equatable

https://www.youtube.com/watch?v=tu95Gjl6wS4

https://medium.com/@samra.sajjad0001/exploring-the-purpose-and-use-of-the-freezed-package-in-flutter-baec8d52a99f

Originally published on Medium on July 4, 2024.

Generated Code in Flutter ‘Injectable Package’

مصعب يوسف — Mon, 26 Oct 2026 07:54:41 +0000

Improve Flutter Developer Skills “Injectable Package”

“Dependency Injection” is a 25-dollar term for a 5-cent concept.” James Shore

Peace be upon you

In software development, dependency injection (DI) is a design pattern that fosters loose coupling and enhances code maintainability, modularity, and testability. It revolves around providing a class with the objects (dependencies) it needs to function, rather than having the class create them itself. This separation of concerns leads to several advantages:

Improved Testability: You can easily inject mock or test doubles for dependencies during unit testing, isolating the class under test and verifying its behavior effectively.
Enhanced Maintainability: By making dependencies explicit, changes in their implementation become more manageable. You can swap out concrete implementations without affecting the dependent class.
Increased Flexibility: DI allows you to provide different implementations of dependencies based on environments (e.g., development, staging, production) or use cases.

GetItGetIt is a simple Service Locator package that you can use in your Flutter and Dart projects. Instead of InheritedWidget or Provider, thanks to this package, you can access the objects you have registered in a central registry system from your application’s UI.

injectableInjectable is a code generation package written for the get_it package. Using the annotations from this package, we can have injectable_generator create all the codes we need via build_runner.

Here’s a breakdown of common dependency injection (DI) techniques in Flutter, along with their advantages and considerations:

1. Constructor Injection:

Description: Dependencies are explicitly passed as arguments to a class’s constructor.

Advantages:

1.Clear and explicit about dependencies.

2.Encourages loose coupling.

3.Well-suited for simple to moderately complex applications.

Considerations:

.Can lead to lengthy constructors for classes with many dependencies.

May require additional boilerplate code for testing purposes.

2. Setter Injection:

Description: Dependencies are injected through setter methods in a class.
Advantages:
Offers more flexibility for dynamically changing dependencies.
Considerations:
Less explicit about dependencies compared to constructor injection.
Potential for runtime errors if dependencies are not set correctly.

3. Service Locator Pattern: “using GetIt”

Description: A global registry that stores and provides instances of dependencies.
Advantages:
Convenient for accessing dependencies from anywhere in the application.
Can be useful for singletons or shared dependencies across the entire app.
Considerations:
Introduces a tight coupling to the service locator itself.
Overuse can make code less maintainable and harder to test.

4. Provider Package:

Description: A popular third-party package that offers a provider tree for dependency management.
Advantages:
Simplifies dependency injection throughout the widget tree.
Promotes a clear and declarative approach to managing dependencies.
Considerations:
Might require additional setup compared to other techniques.

Now we can add it to our application :

flutter pub add get_it
flutter pub add injectable
flutter pub add injectable_generator --dev
flutter pub add build_runner --dev

Create a new dart file and define a global var for your GetIt instance.

import 'package:get_it/get_it.dart';

///this must be used in all modules to get the injection
GetIt getIt = GetIt.instance;

Define a top-level function (lets call it configureDependencies) then annotate it with @injectableInit.
Import the Generated dart file created later on in the code. This will follow the name of the file with the @InjectableInit annotated func, eg app_injection_container.config.dart.
Call the Generated extension func getIt.init(), or your custom initializer name inside your configure func.

import 'package:injectable/injectable.dart';
@InjectableInit(
  initializerName: 'configureDependencies', // Customize if needed
  preferRelativeImports: true, // Improve code readability
  asExtension: true, // Convenience: Use `GetIt.I.get<T>()`
)
void configureDependencies(final $Env env) => $env.initFromEnvironment();

Registering Dependencies (Injectable Classes):

Annotate your service or provider classes with @injectable to indicate they can be injected by the generator:

// api_service.dart
@injectable
class ApiService {
  Future<String> fetchData() async {
    // ... (your API logic)
  }
}
// local_storage_service.dart
@injectable
class LocalStorageService {
  Future<String> getLocalData() async {
    // ... (your local storage logic)
  }
}

Running the Generator:

Execute the build command to generate the necessary files (usually injection.g.dart):

flutter pub run build_runner watch  # For continuous generation as you make changes
# or
flutter pub run build_runner build   # For one-time generation

Utilizing Generated Code:

Import the generated file (e.g., injection.g.dart) in your main.dart:

import 'package:injectable/injectable.dart';
import 'injection.g.dart'; // Generated file
@injectableInit
void configureDependencies() => $configureDependencies();
void main() async {
  configureDependencies();
  runApp(MyApp());
}

Initialize the dependencies using configureDependencies() before running the app. This function sets up the injectable environment and registers your dependencies.

Conclusion

Although Flutter does not have a built-in DI framework, injection is a popular and well-known option for its ease of use, code generation capabilities, and support for different DI styles. It can be a valuable asset for managing dependencies in Flutter applications, especially as your project grows in size and complexity.

References

https://www.youtube.com/watch?v=KNcP8z0hWqs

https://pub.dev/packages/injectable#setup

Originally published on Medium on July 7, 2024.

Generated Code in Flutter ”AutoRoute”

مصعب يوسف — Mon, 26 Oct 2026 07:53:58 +0000

Improve Flutter Developer Skills ‘AutoRoute Package’

“Peace be upon you “

We all know that everyone wants to reach the maximum stages of development in work and science, This is no different when you work in the field of mobile application development, Especially with Google developers who have developed flutter the most amazing framework which contains many useful libraries, one of which we will talk about: auto_route with injectable && get_it

What is routing?

In Flutter, routing refers to the mechanism for navigating between different screens or pages within your application. It’s essentially how users flow through your app and access information.

Here’s a breakdown of the concept:

Screens as Routes: Each screen in your Flutter app is considered a route. It’s a Widget that builds the UI for that particular screen.
Navigator Widget: The core of routing in Flutter is the Navigator class. This class, typically provided by MaterialApp or CupertinoApp, manages the navigation stack and transitions between routes.
Navigation Methods: The Navigator provides methods for pushing new routes onto the stack (like pushing a new screen on top) and popping routes off (going back to the previous screen). Common methods include push and pop.

Why AutoRoute?

AutoRoute is a popular routing package for Flutter that simplifies navigation management within your app. It offers several advantages over basic routing:

Code Generation: AutoRoute uses code generation to automate a lot of the boilerplate code associated with routing. You define your routes using annotations, and the package generates the necessary classes and methods for navigation. This reduces development time and improves code readability.

Type Safety: AutoRoute enforces type safety for arguments passed between screens. This helps prevent errors and makes your code more maintainable.

Deep Linking: AutoRoute simplifies deep linking, a feature that allows users to navigate to specific parts of your app from a URL. This is useful for sharing specific content or functionality within your app.

Other Features: AutoRoute offers additional features like nested navigation (handling tabs within your navigation flow) and guarded routes (restricting access to certain screens based on conditions).

Here’s a quick overview of how AutoRoute works:

Define Routes: You define your app’s routes using annotations like @RoutePage on your screen widgets.
Generate Code: You run a command to generate code based on your route definitions. This creates classes and methods for navigation.
Navigate: You use the generated router object to navigate between screens. AutoRoute handles argument passing, deep linking, and transitions automatically.

Get started

To get started, add auto_route to your pubspec.yaml. We also need to add auto_route_generator and get_it and build_runner to generate our routes.

Benefits of Injectable:

Reduced Boilerplate: Injectable eliminates the need to write manual code for registering and retrieving dependencies with GetIt. This saves development time and improves code clarity.
Improved Maintainability: By keeping dependency configuration centralized with annotations, Injectable makes it easier to manage and update dependencies throughout your app.
Testability: Since dependencies are injected, you can easily mock them during testing, isolating the behavior of your classes.

you can see in our Series

Route Configuration

Lets add Auto Router configuration to your app:

Create a router class and annotate it with @AutoRouterConfig then extend "_$AppRouter"

in old version @MaterialAutoRoute()

Override the routes getter

// ignore_for_file: override_on_non_overriding_member

import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';

import 'app_router.gr.dart';

@AutoRouterConfig(replaceInRouteName: 'Screen,Route')
class AppRouter extends $AppRouter {
  AppRouter(GlobalKey<NavigatorState> navigatorKey);

  @override
  List<AutoRoute> get routes => [
        AutoRoute(
          path: '/home',initial: true, page: HomeRoute.page,
          children: [
        AutoRoute(page: ProfilePage, guards: [AuthGuard()],), // List of guards to check
          ],
        ),
      ];
}

using guards with auto_route in a Flutter app to restrict access to a specific route:

import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';

// Define a custom Guard class
class AuthGuard extends AutoRouteGuard {
  @override
  void onNavigation(NavigationRedirect redirect) {
    // Check if user is authenticated (replace with your logic)
    final isAuthenticated = false; // Replace with actual authentication check
    if (!isAuthenticated) {
      // Redirect to Login if not authenticated
      redirect.push(LoginPage());
    }
  }
}

in page you chose:

add @RoutePage()

import 'package:auto_route/annotations.dart';
import 'package:flutter/material.dart';

import 'widgets/users_view_body.dart';

@RoutePage()
class UsersScreen extends StatelessWidget {
  const UsersScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: UsersViewBody(),
    );
  }
}

Now simply run build_runner to generate our route, run one of commands below

(I recommend watch)

// to watch the files's system edits and rebuild as necessary
dart run build_runner watch

// to run build_runner just once
dart run build_runner build --delete-conflicting-outputs

put our router configuration let’s hook it up to MaterialApp

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

  /// create an instance of `AppRouter`
  final _appRouter = AppRouter();

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      // hook up router to MaterialApp
      routerConfig: _appRouter.config(),
    );
  }

We define an InjectableModule for registering services.
We create an AuthGuard class that injects the AppRouter and checks for authentication before navigation.
In the router definition, we apply the AuthGuard to specific routes

AppRouter wit get_it can we accessed anywhere in the app without context

getIt().push(widgetRouter)

// assuming this is the root widget of your App
class App extends StatelessWidget {
  // make sure you don't initiate your router
  // inside of the build function.
  final _appRouter = AppRouter();

  @override
  Widget build(BuildContext context){
    return MaterialApp.router(
      routerConfig: _appRouter.config(),
    );
  }
}

After you run the generator, your router class will be generated. Then simply hook it up with your MaterialApp.

you can use push

getIt().push(widgetRouter)

you can use pop

getIt().pop()

in new version

getIt().pop()

Nested Navigation

Nested navigation means building an inner router inside of a page of another router, for example in the below diagram users page is built inside of dashboard page.

@AutoRouterConfig(replaceInRouteName: 'Page,Route')
class AppRouter extends $AppRouter {

@override
List<AutoRoute> get routes => [
    AutoRoute(
      path: '/dashboard',
      page: DashboardRoute.page,
      children: [
        AutoRoute(path: 'users', page: UsersRoute.page),
        AutoRoute(path: 'posts', page: PostsRoute.page),
        AutoRoute(path: 'settings', page: SettingsRoute.page),
      ],
    ),
    AutoRoute(path: '/login', page: LoginRoute.page,gards:AuthGards()),
  ];
}

Nested Tab navigation

Some apps display destinations in a subsection of the screen, for example, a BottomNavigationBar that stays on-screen when navigating between Screens.

Since this is not an easy task to implement with Flutter apps auto_route makes tabs navigation as easy and straightforward as possible.

We’ll use AutoTabsRouter to handle tab navigation

class DashboardPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AutoTabsScaffold(
      routes: const [
        UsersRoute(),
        PostsRoute(),
        SettingsRoute(),
      ],
      bottomNavigationBuilder: (_, tabsRouter) {
        return BottomNavigationBar(
          currentIndex: tabsRouter.activeIndex,
          onTap: tabsRouter.setActiveIndex,
          items: const [
            BottomNavigationBarItem(label: 'Users', ...),
            BottomNavigationBarItem(label: 'Posts', ...),
            BottomNavigationBarItem(label: 'Settings', ...),
          ],
        );
      },
    );
  }
}

we can learn about Nested Navigation && Tab Navigation &&Using TabBar

in the documentation of package that’s awesome

https://pub.dev/packages/auto_route#nested-navigation

To Improved developer experience with reduced boilerplate code, Type safety with strongly-typed arguments. Deep linking capabilities. Increased control over navigation with guards and transitions you should use **Auto\_route**

Remember: AutoRoute works seamlessly with dependency injection frameworks like GetIt and Injectable. You can inject required services into your screens using these frameworks while utilizing AutoRoute for navigation.

References

https://pub.dev/packages/auto_route https://medium.com/@antonio.tioypedro1234/flutter-auto-route-guide-9ac405e8a941

https://www.youtube.com/watch?v=KzqKfYypvqs

Originally published on Medium on July 13, 2024.

State Management in Flutter: Provider vs Riverpod vs Bloc

مصعب يوسف — Mon, 26 Oct 2026 07:52:35 +0000

State management is a crucial aspect of Flutter app development. It allows developers to control how data flows throughout the app, ensuring the user interface remains responsive and in sync with underlying data changes. In this article, we will compare three popular state management solutions in Flutter: Provide, Riverpod, and Bloc. We will also explore how these approaches integrate with Clean Architecture, complete with code examples and use cases.

What is State Management?

State management refers to the process of controlling and maintaining the state of an application in a structured manner. It involves ensuring that the user interface accurately reflects the current data and that any changes to the data are properly propagated to the UI. Effective state management becomes especially important in larger applications where multiple components need to stay synchronized.

Overview of Clean Architecture

Clean Architecture is a software design philosophy aimed at creating a maintainable and testable codebase by separating concerns into different layers. In Flutter applications, Clean Architecture typically divides the code into three main layers:

Data Layer: Manages data from various sources such as APIs and databases and transforms raw data into usable formats.
Domain Layer: Contains the core business logic. It is independent of any data source, making it highly reusable and easy to test.
Presentation Layer: Manages the user interface and interacts with state management to determine what is displayed to the user.

Let’s explore how Provider, Riverpod, and Bloc can be integrated into this architecture.

1.Provider

Provider is one of the simplest and most widely used state management solutions for Flutter. It utilizes InheritedWidgets to efficiently pass state through the widget tree.

Why Use Provider?

Simple and Lightweight: Easy to set up, especially for developers seeking a quick and minimal solution.
Good for Small or Medium-Sized Applications: Suitable for apps with straightforward requirements.
Seamless Dependency Injection: Works well with Clean Architecture for injecting dependencies into widgets.
Limitations: Not recommended for managing complex state or for large applications requiring advanced features.

Example: Login Flow with Clean Architecture

To illustrate how Provider can be used in a Flutter app, let’s implement a simple login flow using the Clean Architecture model:

.Domain Layer :

class LoginUseCase {
 final AuthRepository repository;
LoginUseCase({required this.repository});
Future<bool> execute(String username, String password) async {
 return await repository.login(username, password);
 }
}

. Data Layer :

class AuthRepository {
 final AuthRemoteDataSource remoteDataSource;
AuthRepository({required this.remoteDataSource});
Future<bool> login(String username, String password) async {
 return await remoteDataSource.authenticate(username, password);
 }
}
class AuthRemoteDataSource {
 Future<bool> authenticate(String username, String password) async {
 // Simulate authentication
 await Future.delayed(Duration(seconds: 2));
 return username == 'user' && password == 'password';
 }
}

. Presentation Layer (Provider Implementation) :

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class AuthViewModel with ChangeNotifier {
 final LoginUseCase loginUseCase;
 bool _isLoading = false;
 bool? _isAuthenticated;
AuthViewModel({required this.loginUseCase});

bool get isLoading => _isLoading;
 bool? get isAuthenticated => _isAuthenticated;
Future<void> login(String username, String password) async {
 _isLoading = true;
 notifyListeners();
_isAuthenticated = await loginUseCase.execute(username, password);
 _isLoading = false;
 notifyListeners();
 }
}

void main() {
 runApp(
 MultiProvider(
 providers: [
 ChangeNotifierProvider(
 create: (_) => AuthViewModel(loginUseCase: LoginUseCase(repository: AuthRepository(remoteDataSource: AuthRemoteDataSource()))),
 )],
 child: MyApp(),),);
}


class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 home: LoginScreen(),
 );
 }
}
class LoginScreen extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 final viewModel = Provider.of<AuthViewModel>(context);
 return Scaffold(
 appBar: AppBar(title: Text('Login with Provider')),
 body: Center(
 child: Column(
 mainAxisAlignment: MainAxisAlignment.center,
 children: [
 if (viewModel.isLoading) CircularProgressIndicator(),
 if (!viewModel.isLoading && viewModel.isAuthenticated == false) Text('Login failed'),
 if (!viewModel.isLoading && viewModel.isAuthenticated == true) Text('Login successful'),
 ElevatedButton(
 onPressed: () => viewModel.login('user', 'password'),
 child: Text('Login'),
             ),
           ],
         ),
       ),
     );
   }
}

2. Riverpod

Riverpod builds on the foundations of Provider, addressing many of its limitations by offering more flexibility and better dependency injection. It is especially well-suited for larger, more complex applications.

Why Use Riverpod?

Advanced and Flexible: Suitable for applications with more sophisticated state management needs.
Great for Scalability: Works effectively for apps that need to grow and handle complex requirements.
Stateless State Management: Encourages a design where state is decoupled from the UI, making it more modular and reusable.

Why Use Riverpod?

Advanced and Flexible: Suitable for applications with more sophisticated state management needs.
Great for Scalability: Works effectively for apps that need to grow and handle complex requirements.
Stateless State Management: Encourages a design where state is decoupled from the UI, making it more modular and reusable.

Example: Login Flow with Riverpod :Here’s how to use Riverpod for a login flow within the Clean Architecture framework:

. Domain Layer :

class LoginUseCase {
 final AuthRepository repository;
LoginUseCase({required this.repository});
Future<bool> execute(String username, String password) async {
 return await repository.login(username, password);
 }
}

. Data Layer :

class AuthRepository {
 final AuthRemoteDataSource remoteDataSource;
AuthRepository({required this.remoteDataSource});
Future<bool> login(String username, String password) async {
 return await remoteDataSource.authenticate(username, password);
 }
}
class AuthRemoteDataSource {
 Future<bool> authenticate(String username, String password) async {
 // Simulate authentication
 await Future.delayed(Duration(seconds: 2));
 return username == 'user' && password == 'password';
 }
}

Presentation Layer (Riverpod Implementation)

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

final authRepositoryProvider = Provider((ref) => AuthRepository(remoteDataSource: AuthRemoteDataSource()));
final loginUseCaseProvider = Provider((ref) => LoginUseCase(repository: ref.read(authRepositoryProvider)));
final authProvider = StateNotifierProvider<AuthNotifier, AuthState>((ref) {
  return AuthNotifier(loginUseCase: ref.read(loginUseCaseProvider));
});

class AuthNotifier extends StateNotifier<AuthState> {
  final LoginUseCase loginUseCase;

  AuthNotifier({required this.loginUseCase}) : super(AuthInitial());

  Future<void> login(String username, String password) async {
    state = AuthLoading();
    final success = await loginUseCase.execute(username, password);
    if (success) {
      state = AuthSuccess();
    } else {
      state = AuthFailure();
    }
  }
}

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LoginScreen(),
    );
  }
}

class LoginScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final authState = watch(authProvider);
    final authNotifier = context.read(authProvider.notifier);

    return Scaffold(
      appBar: AppBar(title: Text('Login with Riverpod')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (authState is AuthLoading) CircularProgressIndicator(),
            if (authState is AuthFailure) Text('Login failed'),
            if (authState is AuthSuccess) Text('Login successful'),
            ElevatedButton(
              onPressed: () => authNotifier.login('user', 'password'),
              child: Text('Login'),
            ),
          ],
        ),
      ),
    );
  }
}

3.Bloc

Bloc (Business Logic Component) is one of the most powerful and structured state management solutions in Flutter. It excels at separating the UI from the business logic, providing a clear structure to handle complex state changes.

Why Use Bloc?

Highly Suitable for Complex Applications: Bloc is ideal for projects with extensive business logic.
Ensures Separation of Concerns: Keeps the business logic distinct from the UI, enhancing maintainability.
Scales Well with Clean Architecture: Especially effective in managing intricate state changes across the application.

Example: Login Flow with Bloc

Here’s how to use Bloc for a login flow within the Clean Architecture framework:

Domain Layer

class LoginUseCase {
  final AuthRepository repository;

  LoginUseCase({required this.repository});

  Future<bool> execute(String username, String password) async {
    return await repository.login(username, password);
  }
}

Data Layer

class AuthRepository {
  final AuthRemoteDataSource remoteDataSource;

  AuthRepository({required this.remoteDataSource});

  Future<bool> login(String username, String password) async {
    return await remoteDataSource.authenticate(username, password);
  }
}

class AuthRemoteDataSource {
  Future<bool> authenticate(String username, String password) async {
    // Simulate authentication
    await Future.delayed(Duration(seconds: 2));
    return username == 'user' && password == 'password';
  }
}

Presentation Layer (Bloc Implementation)

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

class AuthCubit extends Cubit<AuthState> {
  final LoginUseCase loginUseCase;

  AuthCubit({required this.loginUseCase}) : super(AuthInitial());

  void login(String username, String password) async {
    emit(AuthLoading());
    final success = await loginUseCase.execute(username, password);
    if (success) {
      emit(AuthSuccess());
    } else {
      emit(AuthFailure());
    }
  }
}

abstract class AuthState {}

class AuthInitial extends AuthState {}

class AuthLoading extends AuthState {}

class AuthSuccess extends AuthState {}

class AuthFailure extends AuthState {}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BlocProvider(
        create: (_) => AuthCubit(loginUseCase: LoginUseCase(repository: AuthRepository(remoteDataSource: AuthRemoteDataSource()))),
        child: LoginScreen(),
      ),
    );
  }
}

class LoginScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Login with Bloc')),
      body: BlocBuilder<AuthCubit, AuthState>(
        builder: (context, state) {
          if (state is AuthLoading) {
            return Center(child: CircularProgressIndicator());
          } else if (state is AuthFailure) {
            return Center(child: Text('Login failed'));
          } else if (state is AuthSuccess) {
            return Center(child: Text('Login successful'));
          }
          return Center(
            child: ElevatedButton(
              onPressed: () => context.read<AuthCubit>().login('user', 'password'),
              child: Text('Login'),
            ),
          );
        },
      ),
    );
  }
}

Conclusion

Choosing the right state management solution is crucial for the maintainability and scalability of your Flutter application. Provider is a great choice for smaller projects due to its simplicity, Riverpod offers more advanced features and flexibility, making it suitable for larger projects, and Bloc is ideal for complex applications with extensive business logic. Each approach integrates effectively with Clean Architecture, allowing you to create a well-structured and maintainable Flutter app.

Originally published on Medium on November 12, 2024.

Ultimate Step-by-Step Guide to CI/CD with Fastlane in Flutter (Mac & Windows)

مصعب يوسف — Mon, 26 Oct 2026 07:52:24 +0000

Setting up CI/CD (Continuous Integration and Continuous Deployment) is a must for modern Flutter developers who want to streamline app development, testing, and delivery. Manual builds and uploads are tedious, error-prone, and time-consuming. That’s where Fastlane comes in — an incredibly powerful automation tool that simplifies building, testing, and releasing Flutter apps for both Android and iOS platforms.

In this extended guide, I’ll walk you through setting up Fastlane for your Flutter projects on Mac (for both iOS and Android) and Windows (for Android builds), using real-world examples and production-ready configurations.

What is Fastlane and Why Use It?

Fastlane is an open-source automation tool designed specifically for mobile developers. It allows you to automate repetitive tasks such as:

Building and archiving your apps
Running tests across devices and platforms
Managing code signing and provisioning profiles
Publishing apps to the Google Play Store and Apple App Store
Distributing pre-release builds to testers with services like TestFlight or Firebase App Distribution
Automating versioning, screenshots, changelogs, and more

By integrating Fastlane into your development workflow, you can ensure consistent builds, reduce human error, and speed up your delivery process significantly.

Requirements Breakdown

Before diving in, ensure your environment is ready:

Mac Requirements (for Android & iOS)

Latest version of Xcode installed (for iOS builds)
Flutter SDK properly installed
Android Studio with SDK & command-line tools
Homebrew package manager (optional, but recommended)
Ruby & RubyGems for Fastlane installation
Valid Apple Developer Account for iOS deployment
Google Play Console access for Android releases

Windows Requirements (for Android only)

Flutter SDK installed and configured
Android Studio with SDK & command-line tools
Git Bash or terminal for command execution
Ruby & RubyGems for installing Fastlane
Google Play Console access for uploading builds

Note: iOS builds can only be performed on macOS due to Apple’s restrictions.

Step-by-Step Setup for Android CI/CD (Windows & Mac)

1. Install Fastlane

On both Mac and Windows:

On Windows:

Download RubyInstaller: https://rubyinstaller.org/
During installation, check Add Ruby to PATH.
After installation, open Git Bash or PowerShell and run

-NV speeds up the installation process by disabling documentation downloads.

gem install fastlane -NV

Alternatively, on Mac:

brew install fastlane

Verify installation:

fastlane --version

2. Navigate to Your Flutter Android Directory

cd path/to/your/flutter/project/android

3. Initialize Fastlane

fastlane init

Follow the setup prompts:

Select “Manual setup”
Choose “Android”
You’ll create lanes for tasks like building, testing, and deploying

4. Example Fastfile for Android Automation

-Simplified code

default_platform(:android)

platform :android do
  desc "Clean project and build release AAB"
  lane :build_release do
    gradle(task: "clean")
    gradle(task: "bundle", build_type: "Release")
  end
  desc "Deploy to Internal Testing Track"
  lane :deploy_internal do
    build_release
    upload_to_play_store(track: 'internal')
  end
end

-Professional code

default_platform(:android)

platform :android do
  desc "Build Flutter AppBundle (AAB) for release"
  lane :build_aab_release do
    UI.message("Cleaning Flutter project...")
    sh "flutter clean"

    UI.message("Building Flutter AAB for release...")
    sh "flutter build appbundle --release"

    UI.success("AAB built successfully at: build/app/outputs/bundle/release/app-release.aab 🎉")
  end

  desc "Deploy AAB to Google Play Internal Testing Track"
  lane :deploy_internal do
    build_aab_release

    UI.message("Uploading to Google Play Internal Testing Track...")
    upload_to_play_store(
      track: "internal",
      aab: "build/app/outputs/bundle/release/app-release.aab",
      skip_waiting_for_build_processing: true
    )

    UI.success("Deployment to Google Play Internal Testing completed! 🚀")
  end
end

You can also add lanes for:

Firebase Distribution
Beta tracks
Automated version bumps

5. Run Fastlane for Android Builds

To build your Android AAB:

cd android
fastlane build_aab_release

To deploy to Google Play Internal Testing:

fastlane android deploy_internal

For Play Store uploads, set up Google Play API credentials as per the official Fastlane guide.

Step-by-Step Setup for iOS CI/CD (Mac Only)

1. Navigate to iOS Directory

cd path/to/your/flutter/project/ios

2. Initialize Fastlane for iOS

fastlane init

Choose “Manual setup” to have full control over your lanes.

3. Example Fastfile for iOS Builds and Deployment

-Simplified code

default_platform(:ios)

platform :ios do
  desc "Build iOS app for release"
  lane :build_release do
    build_ios_app(scheme: "Runner")
  end
  desc "Upload to TestFlight"
  lane :deploy_testflight do
    build_release
    upload_to_testflight
  end
end

-Professional code

default_platform(:ios)

platform :ios do
  desc "Builds the iOS app for release (IPA file)"
  lane :build_ipa_release do |options|
    UI.message("Starting Flutter clean...")
    sh "flutter clean"

    UI.message("Building Flutter iOS release...")
    sh "flutter build ios --release"

    UI.message("Building iOS IPA file...")
    build_ios_app(
      scheme: "Runner",
      configuration: "Release",
      silent: true,
      clean: true,
      output_directory: "build/fastlane/ipa",
      output_name: "Runner.ipa",
      export_method: "app-store" # لو بتبني لـ TestFlight أو App Store
    )

    UI.success("iOS IPA built successfully and located at: build/fastlane/ipa/Runner.ipa 🎉")
  end

  desc "Deploys the built iOS app to TestFlight"
  lane :deploy_to_testflight do |options|
    build_ipa_release
    upload_to_testflight
    UI.success("Successfully deployed to TestFlight! Your app is now being processed by App Store Connect. 🚀")
  end

  desc "Complete CI/CD lane: Builds IPA and deploys to TestFlight"
  lane :ci_cd_ios do
    deploy_to_testflight
  end
end

You can also automate:

iOS code signing with Match
Beta builds for testers
App Store releases
Screenshot uploads

4. Running Fastlane for iOS

To build your iOS app:

cd ios
fastlane build_release

To deploy to TestFlight for testers:

fastlane deploy_testflight

Ensure your Apple certificates, provisioning profiles, and Xcode project settings are correctly configured. Fastlane’s “Match” tool can manage code signing across teams.

Bonus: CI/CD Integration with GitHub Actions (Android Example)

Automating builds in CI ensures consistency and saves time. Here’s a GitHub Actions workflow to build Android on every push:

Create .github/workflows/android.yml:

name: Android CI/CD

on:
  push:
    branches: [ main, develop ]

jobs:
  build:
    runs-on: ubuntu-latest

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

      - name: Set up Flutter
        uses: subosito/flutter-action@v2
        with:
          flutter-version: "3.x"

      - name: Install Flutter Dependencies
        run: flutter pub get

      - name: Set up Ruby and Install Fastlane
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: 3.1

      - name: Install Fastlane
        run: gem install fastlane -NV

      - name: Build Android AAB with Fastlane
        run: fastlane android build_aab_release

You can extend this workflow to:

Upload artifacts to Firebase or Play Store
Run automated tests before building
Notify your team via Slack or email on success/failure
Deploy to Google Play

- name: Deploy to Google Play Internal Testing
  run: fastlane android deploy_internal

- name: Setup Google Play Credentials
  run: echo "${{ secrets.GOOGLE_PLAY_JSON }}" > play-store-key.json

- name: Deploy to Google Play Internal Testing
  run: fastlane android deploy_to_play_store track:internal

Conclusion: Why Fastlane Supercharges Your Flutter Workflow

Fastlane simplifies the most time-consuming parts of mobile development. By automating builds, tests, and deployments:

You reduce human errors
Speed up delivery cycles
Maintain consistent builds across devices and environments
Empower your team to focus on writing code, not repetitive tasks

On Mac, you can automate everything — iOS builds, Android builds, uploads, testing, and distribution.

On Windows, you can automate Android builds, deployments, and integrate with CI/CD pipelines.

Pro Tips & Next Steps

Use .env files or CI secrets to manage sensitive credentials
Automate app versioning with Fastlane plugins
Distribute apps to testers via Firebase or TestFlight
Implement automated screenshot generation for App Store submissions
Integrate Slack or email notifications for CI/CD pipelines
Explore tools like Codemagic or Bitrise for advanced pipelines

Once Fastlane is set up, your Flutter project gains professional-grade automation with minimal effort.

ref

https://www.youtube.com/watch?v=vxjyOdNZxkw

https://www.youtube.com/watch?v=1bmwAyJ-P1Y

Originally published on Medium on July 5, 2025.

When Vercel Hates Your Build: Surviving the Nuxt 4 + i18n Deployment Nightmare

مصعب يوسف — Mon, 26 Oct 2026 07:49:53 +0000

There’s a moment every developer dreads:the local build works perfectly — smooth, fast, beautiful — then you push it to Vercel, and everything explodes.That’s exactly what happened when I deployed my Nuxt 4 project with i18n for multilingual support.What should’ve been a simple “click → deploy → done” turned into a four-hour debugging session filled with missing packages, failed builds, and questioning my career choices.

The Calm Before the Chaos

Locally, the app ran perfectly.

Translations worked fine, images loaded, Supabase connected, no issues at all.

So naturally, I assumed the deploy would be easy.

Then came the first build log on Vercel:

Cannot find package '@intlify/utils'

I laughed. Installed it manually. Pushed again.

Then the next line showed up:

Cannot find package '@vue/shared'

And then:

Cannot find package '@vue/compiler-dom'

Understanding What Went Wrong

Here’s the thing:

When you build locally, you have all your node_modules cached.

Even dependencies that aren’t listed in your package.json — like hidden i18n helpers — exist because npm already fetched them before.

But Vercel’s build system doesn’t care about that.

It runs your build in a completely clean environment each time.

If something isn’t explicitly declared or bundled, Vercel just shrugs and throws an error.

In short:

Nuxt’s i18n module uses internal packages like @intlify/utils, @intlify/core, etc.
Those aren’t always visible in your dependencies.
Vercel can’t find them.
Your build dies.

-The Long-Awaited Fix

After wasting hours searching through GitHub issues and reading posts that ended with “Solved: turns out I forgot to install it,”

I decided to go nuclear.

I listed every dependency Vercel had ever complained about, along with a few I suspected might be next,

and forced Nuxt’s Nitro engine to include them manually.

Inside nuxt.config.ts, I added this at the top:

const nitroInlinePackages = [
  "@intlify/utils",
  "@intlify/core",
  "@intlify/core-base",
  "@intlify/h3",
  "@intlify/shared",
  "@intlify/message-compiler",
  "@nuxtjs/i18n",
  "vue-i18n",
  "vue-router",
  "vue",
  "@iconify/utils",
  "@vue/compiler-dom",
  "@vue/compiler-ssr",
  "@vue/compiler-core",
  "@vue/compiler-sfc",
  "@vue/server-renderer",
  "@vue/shared",
  "@vue/runtime-core",
  "@vue/runtime-dom",
  "@vue/reactivity",
  "@vue/reactivity-transform",
  "@vue/devtools-api",
  "@vue/language-core",
  "consola",
  "ipx",
  "image-meta",
  "@fastify/accept-negotiator",
  "etag",
  "mlly",
  "ohash",
  "unstorage",
  "defu",
  "ufo",
  "h3",
];

Then I used it inside the config:

export default defineNuxtConfig({
  nitro: {
    externals: {
      inline: nitroInlinePackages,
    },
  },
});

The idea here is simple:

“Inline everything. If Vercel might need it, give it to Vercel.”

After that commit, the next deploy finally went green.

No more missing packages. No warnings. Just peace.

It only took about five hours of debugging, three coffees, and one mild breakdown to get there.

The Step-by-Step Vercel Setup (for Anyone Doing This the First Time)

If you’re just starting with Nuxt 4 and want to deploy to Vercel, here’s the process that actually works:

1. Push your project to GitHub (or GitLab/Bitbucket)

Make sure your repo is clean:

No local-only files.
package.json includes everything you use.
.gitignore excludes /node_modules.

2. Go to vercel.com

→ “New Project”

Import your repository. Choose your organization (or personal account).

3. Configure your environment variables

If you’re using .env, add these:

. Select build settings

Framework Preset: Nuxt 3 / Nuxt 4
Build Command: npm run build
Output Directory: .output/public

5. Add the inline package configuration

Include the nitroInlinePackages list in nuxt.config.ts.

This ensures all the i18n and Vue internals are bundled.

6. Deploy

Click Deploy and let it run.

The first deploy may take a few minutes.

When you see the green checkmark, that’s your cue to exhale.

7. (Optional) Enable build logs

In your Vercel dashboard:

Settings → General → Build Logs → Enabled

That way, if something breaks again, you can see which package started the war.

Bonus Tip: Debugging Smart

When a package is missing:

Check the exact error name.
Search inside your local node_modules to confirm it exists.
If it does — inline it.
If not — install it with npm i [package-name].

Keep your commits clean, but don’t feel bad if you end up with seven “fix” commits in a row.

Everyone does.

What I Learned

Vercel isn’t broken — it’s just strict.
It wants every dependency clearly declared.
i18n is a heavy module.
It depends on a full suite of @intlify and @vue packages behind the scenes.
Inline dependencies save time.
Nitro lets you tell Vercel exactly what to bundle.
Document your pain.
The next developer who finds your article will silently thank you at 2 AM.

Useful Links

Description

Fixing endless “Cannot find package” errors when deploying a Nuxt 4 + i18n project to Vercel.

Includes real commit logs, root cause analysis, and a simple step-by-step deployment guide that actually works.

Originally published on Medium on October 10, 2025.

Advanced Flutter Isolates — Building High-Performance Parallel Pipelines

مصعب يوسف — Mon, 26 Oct 2026 07:49:50 +0000

A Complete, Professional Guide for Beginners & Advanced Engineers

Flutter apps live and die by UI smoothness. The main isolate (UI thread) is responsible for every frame, animation, gesture, rebuild, layout, and paint.

The moment you drop a heavy CPU operation inside that isolate, your beautiful UI collapses into a 15-FPS slideshow.

If you’re building SaaS dashboards, AI tools, POS systems, CRM apps, OCR pipelines, image processors, or anything non-trivial, you must understand isolates.

This guide turns you from “Flutter developer” into “parallel systems engineer who happens to code in Flutter.”

1. Understanding Isolates: The Foundation of Dart Concurrency

An isolate is a completely independent Dart execution environment:

Own memory
Own event-loop
No shared variables
Communication only through message passing

It’s Dart’s elegant alternative to threads, without the foot-guns of shared memory or race conditions.

If it must do heavy CPU work and you want your UI alive → use an isolate.

2. When Should You Use Isolates?

Any heavy computation not related to widgets should be moved away from the main isolate.

Perfect Use Cases

Large JSON, XML, CSV parsing
Heavy PDF parsing, OCR text extraction
Encryption, hashing, token processing
AI inference for on-device small models
Image decoding, compression, filters
POS analytics, CRM batch operations
Parallel ETL pipelines

Rule of survival

If it can drop frames, isolate it.

3. Beginner Path: Using compute()

compute() is the simplest gateway to isolates.

It creates a temporary isolate, runs a pure function, returns the result, then kills the isolate.

Example: Heavy List Processing

import 'package:flutter/foundation.dart';

Future<List<int>> runHeavyTask() async {
  return compute(expensiveOperation, [1, 2, 3, 4, 5]);
}
List<int> expensiveOperation(List<int> nums) {
  return nums.map((n) {
    var x = n;
    for (int i = 0; i < 20000; i++) {
      x = (x * 97) % 89;
    }
    return x;
  }).toList();
}

When to use

compute()

✔ Small to medium CPU tasks

✔ One-shot, non-streaming jobs

✔ Stateless operations

✔ Simple background parsing

When not to use it

✘ Continuous background workers

✘ Multiple tasks per second

✘ Tasks requiring two-way communication

4. Intermediate Level: Persistent Isolates with Isolate.spawn()

Here you create your own worker isolate and keep it alive as long as you want.

This allows background loops, timers, scheduled tasks, and message streams.

Example: Background heartbeat worker

import 'dart:isolate';
import 'dart:async';
class BackgroundWorker {
  late final Isolate _isolate;
  final ReceivePort _receivePort = ReceivePort();

Future<void> start() async {
    _isolate = await Isolate.spawn(_entryPoint, _receivePort.sendPort);
    _receivePort.listen((msg) {
      print("Worker says: $msg");
    });
  }
  static void _entryPoint(SendPort sendPort) {
    int counter = 0;
    Timer.periodic(const Duration(milliseconds: 500), (_) {
      counter++;
      sendPort.send("Tick $counter at ${DateTime.now()}");
    });
  }
}

Usage

final worker = BackgroundWorker();
await worker.start();

This isolate runs forever, sending messages every 500ms.

Use cases

✔ Background metrics

✔ NFC streaming

✔ AI inference loops

✔ POS background syncing

✔ Long-running tasks

5. Advanced: Building a Two-Way Task Queue Engine

This is where real engineering begins.

You create an isolate that:

Receives tasks
Processes them
Sends results back
Supports multiple requests
Acts like a mini parallel pipeline

1. Define a task message

class TaskMessage {
  final int id;
  final dynamic data;
  TaskMessage(this.id, this.data);
}

2. Build the worker

import 'dart:isolate';

class Worker {
  late Isolate _isolate;
  final ReceivePort _receive = ReceivePort();
  late SendPort _sendPort;
  Future<void> start() async {
    _isolate = await Isolate.spawn(_entryPoint, _receive.sendPort);
    _receive.listen((message) {
      if (message is SendPort) {
        _sendPort = message;
      } else {
        print("Result: $message");
      }
    });
  }
  void send(TaskMessage task) {
    _sendPort.send(task);
  }
  static void _entryPoint(SendPort mainSendPort) {
    final port = ReceivePort();
    // Give UI isolate the sendPort of this worker isolate
    mainSendPort.send(port.sendPort);
    port.listen((message) {
      if (message is TaskMessage) {
        final processed = _process(message.data);
        mainSendPort.send("Task ${message.id} result: $processed");
      }
    });
  }
  static int _process(int value) {
    var x = value;
    for (int i = 0; i < 50000; i++) {
      x = (x * 41) % 123;
    }
    return x;
  }
}

3. Use the worker

final worker = Worker();
await worker.start();

worker.send(TaskMessage(1, 150));
worker.send(TaskMessage(2, 340));

You now have:

✔ A persistent background processor

✔ Bidirectional message system

✔ Unlimited tasks

✔ No UI blocking

This is exactly how large apps (AI/OCR/POS) implement internal compute engines.

6. Real-World Industry Applications

AI Pipelines

embeddings, on-device inference
Vector computations
Mini-transformer operations

PDF & OCR Systems

Parsing thousands of pages
Running regex extraction
Table reconstruction

POS & CRM Apps

Heavy daily reports
Discount engine calculations
Inventory batch updates

Image & Video

Compression
Cropping
Color analysis

Edge IoT

Sensor noise filtering
Position tracking

Background Job Manager

Build your own Flutter BullMQ:

Queue
Retry
Priority
Workers

7. Best Practices for Production Apps

✔ Never send huge objects.

Prefer primitives, maps, lists.

✔ Always close isolates.

Use isolate.kill(priority: Isolate.immediate) when done.

✔ Use error handlers.

Attach:

isolate.addErrorListener(errorPort.sendPort);

✔ Avoid sending UI objects.

No widgets, contexts, controllers.

✔ Use Streams for continuous work.

Especially sensor/NFC AI pipelines.

✔ Use message batching

Sending too frequently can flood the main isolate.

✔ Warm up long-running isolates on app start

Critical for POS/CRM apps.

8. Summary

Once you master isolates, you stop writing “apps” and start building parallel systems inside Flutter.

You learn to think like:

A systems engineer
A performance architect
A pipeline designer

With isolates you unlock:

Smooth UI
Industrial-level performance
Background compute
AI inside Flutter
Real-time processing

This takes your Flutter work from “UI builder” to“high-performance engineer”.

9. References

Dart Isolates: https://dart.dev/language/isolate
compute(): https://api.flutter.dev/flutter/foundation/compute.html
Threading model: https://docs.flutter.dev/resources/faq#what-is-the-threading-model

Originally published on Medium on December 9, 2025.

Guide to Achieving Native-Level Performance in Flutter

مصعب يوسف — Mon, 26 Oct 2026 07:48:53 +0000

How to Engineer Flutter Apps That Match Native Performance

Flutter is already one of the fastest cross-platform frameworks in the world.

But most developers only use 20% of its real power.

To build apps that feel completely native, you must design around how the Flutter Engine actually works:

one UI thread
GPU-first rendering
isolate-based CPU parallelism
shaders for heavy visual effects
smart layout and layer caching
profiling and engine-aware architecture

This guide explains all of that, plus a rarely discussed part:

how the Flutter engine schedules frames, handles vsync, and builds the layer tree internally.

This is the level used by teams building high-end dashboards, real-time UIs, OCR/AI apps, and enterprise-scale mobile systems.

1. Why Flutter Can Match Native Performance

Flutter is not like React Native or Cordova.

It does NOT rely on platform UI widgets.

Instead, Flutter:

Compiles Dart to AOT ARM machine code
Uses Skia, a C++ GPU renderer used by Chrome, Android, and Fuchsia
Draws directly to the GPU
Avoids the Java/Kotlin → Android View bridge
Avoids Objective-C → UIKit bridging

This architecture removes the biggest bottleneck found in hybrid frameworks.

When someone says “Flutter is slow,” they almost always misunderstood how the engine works.

2. The Golden Rule of UI Performance

Flutter has exactly one UI thread.

Everything related to rendering happens here:

widget building
layout
painting
hit testing
animations
accessibility updates

If you block this thread even for 5 ms, you will drop frames.

Goal:

Keep the UI thread as empty as possible.

Everything else goes somewhere else:

Apps that feel native follow this rule religiously.

3. Parallel Pipelines With Isolates

Anything involving heavy CPU work should be offloaded from the UI isolate.

Example: Massive JSON Parsing in Background

Future<List<Item>> parseItems(String raw) {
  return compute(_parse, raw);
}

List<Item> _parse(String raw) {
  final data = jsonDecode(raw) as List;
  return data.map((e) => Item.fromJson(e)).toList();
}

Persistent Worker Isolate (For Continuous Jobs)

class WorkerIsolate {
  late Isolate isolate;
  late SendPort sendPort;
  final receive = ReceivePort();


Future<void> start() async {
    isolate = await Isolate.spawn(entry, receive.sendPort);
    receive.listen((msg) {
      if (msg is SendPort) sendPort = msg;
      if (msg is Map) handleResult(msg);
    });
  }
  static void entry(SendPort main) {
    final port = ReceivePort();
    main.send(port.sendPort);
    port.listen((task) {
      final result = heavyCompute(task);
      main.send({"id": task["id"], "result": result});
    });
  }
}

This allows continuous background processing without touching the UI thread.

4. Rendering Optimization: Reduce GPU Work

Flutter’s rendering pipeline depends on three things:

how many layers you create
how complex the picture commands are
how often you invalidate (repaint) the tree

Use

RepaintBoundary

For widgets that animate often.

Cache painting using a PictureRecorder

Reduces repeated GPU commands.

Avoid unnecessary clipping

ClipPath, ClipRRect, ClipRect are expensive.

Use OpacityLayer (not Opacity widget) for animated fades

The widget forces rebuilds, the layer does not.

5. Layout Optimization: The Most Common Performance Killer

Avoid expensive intrinsic measurements:

IntrinsicHeight
IntrinsicWidth
RenderParagraph.getMinIntrinsicWidth()

Use custom RenderBox when layout gets heavy.

Use Slivers instead of ListView for long, structured lists:

lazy building
avoids creating offscreen widgets
fewer layout passes

This is essential for dashboards and real-time feeds.

6. Animation Without Jank: RenderObject Animations

Traditional animations rebuild widgets every frame.

But the fastest animations don’t rebuild anything.

Below is a custom animation using the render layer directly:

class PulseRender extends RenderBox {
  late Ticker ticker;
  double t = 0;

PulseRender() {
    ticker = Ticker((elapsed) {
      t = (sin(elapsed.inMilliseconds / 150)).abs();
      markNeedsPaint();
    })..start();
  }
  @override
  void performLayout() {
    size = const Size(100, 100);
  }
  @override
  void paint(PaintingContext ctx, Offset off) {
    final paint = Paint()..color = Colors.blue.withOpacity(t);
    ctx.canvas.drawCircle(size.center(off), 40, paint);
  }
}

This avoids rebuilds entirely.

Perfect for particles, shimmer effects, and loading animations.

7. GPU Shaders for Native-Level Visuals

Flutter supports custom fragment shaders (via Impeller).

Use shaders for:

blur
glow
distortions
color grading
dynamic waves
fluid animation

Example GLSL:

uniform float time;

void main() {
  vec2 uv = FlutterFragCoord().xy / size;
  float wave = sin(uv.x * 10.0 + time);
  gl_FragColor = vec4(vec3(wave), 1.0);
}

Shaders are orders of magnitude faster than CPU-driven animations.

8. Memory Optimization

Use const wherever possible
Dispose all controllers, streams, focus nodes
Avoid loading huge images at full resolution
Reuse objects (lists, paint objects, buffers)

Memory spikes = garbage collector = stutter.

9. HOW THE FLUTTER ENGINE ACTUALLY WORKS

(Engine Internals: Frame Scheduling, vsync, Layer Tree Building)

This is the part almost nobody talks about, but it’s the secret behind true native-level performance.

9.1 The Frame Pipeline: How a Frame Is Born

Flutter schedules frames in a loop tied to your device’s refresh rate.

Simplified steps:

The system fires a vsync signal (e.g., 60Hz or 120Hz)
Flutter’s scheduler receives it
SchedulerBinding triggers animation ticks
It requests a new frame from the engine
Flutter builds widgets → rebuilds element tree
Layout happens (RenderObjects compute sizes)
Painting happens (commands recorded into picture layers)
Layer tree sent to the GPU via Skia/Impeller
GPU renders it → screen updates

If anything in steps 5–7 takes too long → jank.

Your target: finish steps 5–7 in under 8ms (for 120Hz: under 4ms).

9.2 What Is vsync and Why It Matters

vsync = vertical synchronization

It tells Flutter when a new frame may be drawn.

Flutter does NOT push frames whenever it wants.

It synchronizes with the display to avoid tearing.

So:

If UI work finishes early → frame is smooth
If UI work finishes late → next vsync is missed → visible stutter

This is why heavy computation must be moved off the UI isolate.

9.3 Layer Tree Building (What the GPU Actually Receives)

The Flutter framework builds a Layer Tree, not a “Widget Tree” and not a “View Tree.”

Layers include things like:

PictureLayer
OpacityLayer
TransformLayer
ClipRRectLayer

This structure is much closer to a game engine than a typical UI framework.

Optimizing performance means:

fewer layers
fewer repaint regions
fewer picture commands
caching expensive drawing operations

When done correctly, Flutter sends extremely lightweight GPU instructions.

10. The Architecture Used by High-Performance Flutter Apps

This is how large production apps achieve zero dropped frames.

11. Profiling: The Expert’s Toolset

Before optimizing anything:

use Flutter DevTools performance tab
check GPU frame chart
inspect rebuild count
look at shader compilation jank
analyze Skia picture commands
run with flutter run — profile

Real engineers optimize based on numbers, not guesswork.

Conclusion

Flutter absolutely can match or outperform native performance

— but only when you write apps the way the engine expects:

offload CPU work
leverage GPU rendering
minimize UI thread work
optimize layout
use Slivers
use shaders for heavy visuals
understand vsync & frame scheduling
profile carefully

When you master these principles, Flutter becomes a true high-performance engine, not just a UI toolkit.

Your app stops feeling “cross-platform.”

It starts feeling native, fluid, and engineered.

Originally published on Medium.

What Should a Software Engineer Learn in 2027?

مصعب يوسف — Tue, 20 Oct 2026 09:47:11 +0000

A Practical Roadmap for the AI Era — Lessons from Building ERP, CRM, and Real-World Software Systems

Introduction: AI Can Generate Code. But Can It Take Responsibility for Your System?

A few years ago, building a software application meant spending hours writing controllers, database queries, validation logic, and user interfaces.

Today, an AI coding assistant can generate much of that implementation in minutes.

You can ask it to build an authentication system, create an ERP module, integrate a payment provider, or develop a mobile application.

And often, the result looks impressive.

But here’s something I’ve learned while working on real software systems:

The hardest problems in software engineering rarely end with writing the code.

When you’re building a financial system, you need to guarantee that money isn’t recorded twice.

When you’re developing a multi-tenant CRM, you need to guarantee that one company cannot access another company’s data.

When you’re designing an offline-first POS, you need to understand what happens when transactions are recorded without internet access.

And when you’re adding an AI agent to a business application, you need to decide what the agent is allowed to read, recommend, and execute.

These problems don’t disappear because AI can generate the implementation.

In some ways, AI makes understanding them even more important.

Over the years, I’ve worked with systems involving finance, project management, CRM, business automation, and large data imports. I’ve also been designing architectures for offline-first applications and AI-powered workflows.

Those experiences have reinforced a simple principle:

A good software engineer isn’t defined by how much code they can write. They’re defined by how well they understand the problems their software must solve.

So, what should developers actually learn in 2027?

Let’s explore the answer through practical engineering lessons.

1. Programming Fundamentals: Learn to Understand Code, Not Just Generate It

Let’s start with the foundation.

Should developers still learn programming when AI can write functions, classes, and entire modules?

Absolutely.

But the purpose of learning programming is changing.

You don’t need to memorize every function or framework API.

You need to understand how programs behave.

That means learning control flow, data structures, asynchronous programming, error handling, state management, and the execution model of your chosen language.

A Lesson from Building Workflow Systems

In a project management platform such as OpsManage, a task isn’t simply a record with a title and description.

Tasks have states, dependencies, assigned employees, deadlines, and relationships with other tasks.

Consider a simplified workflow:

TODO → IN_PROGRESS → DONE

         |
         v
WAITING_FOR_SUPPORT
         |
         v
IN_PROGRESS

Now imagine a user finalizes a project setup wizard.

The system needs to create services, generate related tasks, resolve their dependencies, and assign employees.

What happens if the user clicks the Finalize button twice?

What happens if the first request succeeds but the browser never receives the response?

Could the application create duplicate tasks?

AI can generate a controller for this workflow.

But recognizing the need for idempotency, transaction boundaries, and valid state transitions requires understanding how software behaves.

These are fundamental programming and engineering concepts.

What to Learn

Focus on one primary programming language, such as TypeScript, Dart, Python, Java, or Go.

Study how it handles asynchronous operations, errors, types, memory, and concurrency.

Then practice implementing state machines, validation logic, and retry-safe operations.

Your objective shouldn’t be to write code faster than AI. It should be to understand the code well enough to recognize when it is wrong.

2. Databases and Transactions: Understand What Must Never Go Wrong

One of the most valuable skills a backend engineer can develop is a deep understanding of databases.

I became increasingly convinced of this while working on Clay, a finance and operations system.

Clay includes areas such as payroll, treasury management, expenses, projects, and employee attendance.

These modules contain business rules that are far more important than their user interfaces.

A Real Engineering Example: Payroll and Treasury

Consider a payroll workflow.

An employee’s salary moves through several states:

DRAFT → APPROVED → PAID

When payroll is marked as paid, the application must also record the corresponding treasury movement.

This sounds simple.

But several questions immediately arise.

What if the payroll update succeeds and the treasury operation fails?

What if two administrators attempt to mark the same salary as paid simultaneously?

What if the request times out and the frontend retries it?

What if the application accidentally records the treasury movement twice?

These aren’t theoretical concerns.

They’re examples of the consistency problems financial software must handle.

A reliable implementation needs to enforce invariants such as:

A payroll record cannot be paid twice.
A successful payroll payment must have the correct treasury effect.
Failed operations must not leave the records in contradictory states.
Repeated requests must not create duplicate financial movements.

The implementation may use database transactions, unique constraints, locking, and idempotency keys.

For example, the conceptual operation might look like this:

await database.transaction(async (tx) => {
  const payroll = await tx.payroll.lockById(payrollId);

  if (payroll.status !== 'APPROVED') {
    throw new Error('Invalid payroll state');
  }

  await tx.treasury.createMovement({
    sourceType: 'PAYROLL',
    sourceId: payroll.id,
    amount: payroll.netSalary,
  });

  await tx.payroll.markAsPaid(payroll.id);
});

This is conceptual pseudocode, not a copy of Clay’s production implementation. A real system also needs appropriate uniqueness constraints, authorization, and concurrency tests.

The important lesson is that understanding transactions matters much more than the ability to generate this function.

What to Learn in 2027

Learn PostgreSQL fundamentals deeply.

Study relationships, indexes, transactions, isolation levels, constraints, locks, query plans, and backup strategies.

Don’t stop after learning how to create tables and perform CRUD operations.

Build systems where data correctness actually matters.

AI can generate database queries. Your understanding must determine whether those queries preserve the business rules.

3. Security and Multi-Tenancy: Correct Code Can Still Be Dangerous

Another important lesson comes from designing and developing multi-tenant CRM systems.

A CRM platform may serve multiple companies from the same backend and database.

Each organization has its own customers, opportunities, tasks, contacts, and employees.

A typical architecture looks like this:

SaaS CRM
                     |
                  NestJS
                     |
             Authentication
                     |
             Workspace Access
                     |
               Authorization
                     |
                PostgreSQL
                     |
          +----------+----------+
          |                     |
       Company A             Company B
          |                     |
       Customers              Customers
       Opportunities          Opportunities
       Tasks                  Tasks

The challenge isn’t simply adding a workspaceId column.

The challenge is guaranteeing that every operation respects the organization’s security boundaries.

A Common AI-Generated Mistake

Imagine requesting a function that retrieves an opportunity:

async getOpportunity(id: string) {
  return db.query.opportunities.findFirst({
    where: eq(opportunities.id, id),
  });
}

The function may compile.

It may return the correct opportunity.

It may pass a basic unit test.

But what’s missing?

The query doesn’t enforce workspace ownership.

In a multi-tenant application, the correct lookup must include the authorized workspace and any applicable record-level permissions.

For example:

async getOpportunity(
  id: string,
  authorizedWorkspaceId: string,
) {
  return db.query.opportunities.findFirst({
    where: and(
      eq(opportunities.id, id),
      eq(opportunities.workspaceId, authorizedWorkspaceId),
    ),
  });
}

And authorizedWorkspaceId must come from trusted authorization logic, not an unchecked request body.

This is exactly why understanding authentication and authorization matters.

AI may generate technically valid code that violates your security requirements.

What to Learn

Study authentication, authorization, RBAC, tenant isolation, input validation, secrets management, and the OWASP Top 10.

Understand why hiding a button in Flutter or Nuxt does not prevent an unauthorized API request.

Learn to enforce permissions on the backend and verify them through automated tests.

The ability to identify a security vulnerability in perfectly valid code is more important than memorizing the syntax used to write that code.

4. System Design: Think Beyond Individual Functions

One lesson that becomes clearer as applications grow is that software architecture isn’t about creating beautiful folder structures.

It’s about managing complexity.

In a CRM, for example, you may have modules for contacts, leads, opportunities, contracts, tasks, notifications, and integrations.

Each module can work correctly in isolation.

But real problems emerge when they interact.

Imagine that an opportunity is converted into a contract.

Should that automatically create a follow-up task?

What if the notification service is unavailable?

Should the contract creation fail?

What if the conversion request is submitted twice?

How do you prevent partial or duplicated business operations?

AI can suggest architectural patterns.

It can generate event emitters, queues, services, and database models.

But choosing the appropriate design requires understanding the actual business requirements.

A Lesson from Large SaaS Applications

When building systems with many modules, I prefer asking a few questions before introducing architectural complexity.

Does this component need to scale independently?

Can the operation be completed synchronously?

What happens when a dependency becomes unavailable?

Where should the transaction boundary exist?

Who owns the business rule?

For many SaaS products, a well-structured modular monolith is a sensible starting point.

Not every module needs to become a microservice.

Not every workflow needs a message broker.

Not every API needs an abstraction layer.

The objective is not to introduce the greatest number of architectural patterns.

It’s to choose the simplest architecture that satisfies the current requirements while allowing reasonable future evolution.

What to Learn

Study modular architecture, domain modeling, dependency injection, caching, background processing, event-driven systems, distributed systems, and reliability.

Learn the trade-offs between synchronous and asynchronous communication.

Understand when to use database transactions and when a workflow needs compensating actions.

System design is not about knowing every architecture. It’s about knowing why a particular architecture fits a particular problem.

5. Performance Engineering: An Example from Data Import Systems

Performance problems aren’t always caused by complicated algorithms.

Sometimes they come from handling ordinary operations at a larger scale.

One example from my work involves an influencer and company management platform with spreadsheet import workflows.

An import file may contain thousands of companies or influencers, potentially tens of thousands of rows.

A simple implementation might process every row sequentially:

for (const row of rows) {
  await database.insert(row);
}

That might be acceptable for a tiny file.

But what happens when the import contains 20,000 rows?

What if some rows contain invalid data?

What if the process crashes after importing 12,000 rows?

What if the spreadsheet contains merged headers or inconsistent field names?

What if the user uploads the same file twice?

The engineering challenge becomes much broader than parsing a spreadsheet.

You need to think about batching, queue processing, validation, partial failures, error reporting, idempotency, and memory consumption.

What This Teaches Us

A developer needs a working understanding of data structures, algorithms, SQL performance, and asynchronous processing.

But they also need to understand the user experience.

Should the frontend wait for the entire import?

Should the import run as a background job?

Can users download a report showing successful and failed rows?

Can an interrupted import resume safely?

These questions connect performance engineering with product design.

What to Learn

Study algorithmic complexity, pagination, streaming, batching, queues, Redis, and profiling.

Learn to investigate slow queries using database execution plans.

Measure performance rather than relying on intuition or AI-generated optimization claims.

A fast-looking implementation isn’t necessarily efficient. Performance must be evaluated under realistic workloads.

6. Mobile Engineering: Offline-First Systems Teach You Distributed Systems

Flutter is a powerful framework for building cross-platform applications.

But becoming a strong Flutter engineer requires more than creating responsive interfaces and managing widget state.

One area I’ve been exploring through POS system architecture is offline-first application design.

Imagine a retail store using a POS application.

The internet connection disappears.

Should the store stop selling?

For certain business workflows, the application should continue recording operations locally.

But that introduces difficult consistency problems.

The Offline POS Problem

Consider this workflow:

Flutter / Desktop POS
         |
         v
    Local Database
         |
         v
    Pending Sales
         |
    Internet Returns
         |
         v
     Sync Engine
         |
         v
      NestJS API
         |
         v
     PostgreSQL

A cashier records a sale.

The local database saves it.

Later, the application sends the sale to the backend.

But what happens if PostgreSQL commits the transaction and the connection drops before the client receives confirmation?

The client may retry.

Without a stable transaction identifier and server-side idempotency, the same sale could be recorded twice.

This is a distributed-systems problem, even though the application may appear to be a simple mobile POS.

The design also needs to address inventory conflicts, authentication expiry, local data recovery, and synchronization failures.

These are exactly the kinds of challenges worth studying before turning an offline-first design into a production system.

What to Learn

For Flutter, study Dart deeply, state management, application architecture, local databases, secure storage, networking, testing, and platform lifecycle behavior.

Then move into offline synchronization, optimistic updates, conflict resolution, and failure recovery.

Don’t become a Flutter developer who only knows how to build screens. Become an engineer who understands the system behind those screens.

7. AI Engineering: Give AI Tools, Not Unlimited Control

AI engineering deserves a place on every modern software engineer’s learning roadmap.

But integrating AI into an application isn’t simply calling a language model API.

One of the areas I’m working on is integrating AI capabilities into CRM workflows.

The goal is to allow users to interact with their business data through natural language.

For example:

“Show me the opportunities that haven’t been updated recently and prepare follow-up tasks for the responsible employees.”

An AI assistant could interpret this request and decide which tool to use.

But the model should not receive unrestricted access to the database.

A safer architecture looks like this:

User Request
                  |
                  v
              AI Model
                  |
                  v
             Tool Selection
                  |
                  v
          NestJS Tool Dispatcher
                  |
                  v
           Permission Validation
                  |
                  v
          Authorized CRM Service
                  |
                  v
              PostgreSQL
                  |
                  v
              Tool Result
                  |
                  v
             AI Response

If the user asks the assistant to modify data, the application can prepare an action and require confirmation before executing it.

For example, the assistant may propose creating a follow-up task.

The backend then verifies the user’s permissions and executes the approved operation through the normal business service.

This preserves existing audit logging, validation, and authorization rules.

What AI Should and Shouldn’t Do

AI can help classify customer requests, summarize records, recommend priorities, prepare messages, and select approved tools.

It shouldn’t independently bypass authorization, modify financial records without appropriate approval, or execute arbitrary SQL.

These boundaries matter because language models can misunderstand requests, produce invalid tool arguments, or be influenced by malicious instructions embedded in retrieved data.

What to Learn

Study LLM fundamentals, prompting, structured outputs, RAG, tool calling, agent workflows, model evaluation, and prompt-injection risks.

Learn how to measure model accuracy, latency, failure rates, and operating cost.

Understand how to use existing APIs and frameworks without building unnecessary infrastructure.

And most importantly, learn to combine probabilistic AI outputs with deterministic business rules.

The goal isn’t to make an AI model control your application. It’s to make your application more capable while keeping its operations secure and verifiable.

8. Testing and Debugging: Learn to Prove That Your Code Works

A major risk of AI-assisted development is accepting solutions because they look convincing.

But professional software engineering requires evidence.

For example, imagine an AI assistant generates a payroll service.

The code compiles.

The endpoint returns HTTP 200.

Does that mean the implementation is correct?

Not necessarily.

You still need to test concurrent requests, invalid transitions, duplicate payments, authorization failures, and transaction rollbacks.

Likewise, a CRM endpoint may pass normal tests while leaking data across tenants.

A POS synchronization service may work with a stable internet connection but duplicate transactions when requests are retried.

These aren’t problems that can be addressed through happy-path testing alone.

My Recommended Testing Mindset

For every important feature, identify its invariants.

For payroll:

A salary payment must not create duplicate treasury movements.

For CRM:

A user must never access records outside their authorized workspace and permissions.

For POS:

Retrying the same sale must not create another sale.

For data imports:

The system must accurately report successful and failed records.

Then write tests that attempt to violate those invariants.

Learn unit testing, integration testing, end-to-end testing, and concurrency testing.

Become comfortable reading logs and stack traces.

Use AI to generate test ideas, but evaluate whether those tests actually verify important behavior.

The most valuable test isn’t always the one that proves your code works. Sometimes, it’s the one that proves a dangerous failure cannot happen.

9. DevOps and Production Reliability: Understand What Happens After Deployment

Writing software is only part of the lifecycle.

Applications also need to be deployed, monitored, maintained, and recovered when something fails.

Working with Docker, PostgreSQL, and server-hosted applications has made this especially clear to me.

A local development environment can hide important problems.

An application might work perfectly on your computer but fail in production because of missing environment variables, unavailable dependencies, memory limitations, or incorrect network configuration.

A Docker container might build successfully but fail its health checks.

A database migration might work in development but encounter constraints in an existing production database.

A frontend deployment might serve stale assets.

These problems require operational understanding.

What to Learn

Study Linux fundamentals, Docker, CI/CD, networking, environment configuration, logs, monitoring, and database backups.

Learn how health checks work.

Understand the difference between an application process running and an application being healthy.

Practice reading container logs and investigating deployment failures.

Learn basic cloud infrastructure concepts without becoming dependent on any single hosting provider.

Practical Exercise

Deploy a small SaaS application with a PostgreSQL database.

Then deliberately break something.

Stop the database.

Deploy an invalid configuration.

Simulate an unavailable external API.

Test recovery from a backup.

Investigate each failure using logs and observable behavior.

A developer who understands production failures can provide value long after the initial implementation is complete.

10. What Should You Delegate to AI?

Learning every concept from scratch doesn’t mean writing every line of code manually.

AI is genuinely useful for reducing repetitive work.

The real challenge is knowing what to delegate and what to understand.

TaskAI’s RoleEngineer’s ResponsibilityBoilerplate codeGenerate implementationValidate integrationDatabase schemaSuggest modelsVerify data integritySQL queriesDraft and optimizeCheck correctness and execution plansAuthenticationAssist implementationEnforce security boundariesUnit testsGenerate test casesValidate coverage of critical behaviorSystem designCompare architecturesEvaluate trade-offsDebuggingSuggest hypothesesVerify root causeAI agentsSelect approved toolsControl permissions and executionDocumentationGenerate draftsVerify technical accuracy

A useful rule is:

Delegate repetition, not responsibility.

If AI can save you an hour writing boilerplate, use it.

If you’re learning a new concept, don’t automatically skip the reasoning.

Ask AI to explain why an approach works.

Challenge it to identify failure scenarios.

Compare its explanation with the official documentation.

Then test the implementation.

The goal is to become more capable through AI assistance, not more dependent on it.

11. My Practical Learning Roadmap for 2027

If I were planning a year of focused engineering development, I would organize it around progressively more complex system capabilities.

Rather than building ten unrelated tutorial applications, I would use a few serious projects to develop multiple skills.

January–March: Programming and Database Fundamentals

Focus on programming fundamentals, asynchronous execution, data structures, SQL, and automated testing.

Practice project: Finance and Payroll

Build a small payroll workflow inspired by systems like Clay.

Implement salary records, approval states, payment operations, and database transactions.

Test duplicate payment attempts and invalid status transitions.

By the end of this phase, you should be able to explain how your database guarantees important business rules.

April–June: System Design and Application Security

Focus on modular architecture, authorization, PostgreSQL indexing, API security, and multi-tenancy.

Practice project: Multi-Tenant CRM

Build organization memberships, customer management, and task management.

Implement role-based access control and tenant-scoped queries.

Write integration tests demonstrating that unauthorized users cannot access another organization’s records.

By the end of this phase, you should be comfortable designing a secure backend feature from requirements to tests.

July–September: Reliability, Performance, and Deployment

Focus on Docker, CI/CD, background jobs, observability, caching, and distributed-system fundamentals.

Practice project: Offline POS and Data Synchronization

Build a small Flutter or desktop POS prototype with local persistence and retry-safe synchronization.

Add a queue-based data import workflow.

Test interrupted requests, duplicate submissions, and large input files.

Deploy the backend and simulate failures.

By the end of this phase, you should understand how systems behave when their dependencies become unreliable.

October–December: AI Engineering

Focus on LLM APIs, structured outputs, retrieval, tool calling, agent security, and evaluation.

Practice project: AI-Powered CRM Assistant

Add an AI assistant that can retrieve authorized CRM records and propose follow-up tasks.

Require approval before executing sensitive operations.

Add audit logs and automated tests for invalid tool arguments, unauthorized access, and repeated action execution.

By the end of the year, you should have an application demonstrating both traditional engineering competence and practical AI integration.

The Roadmap at a Glance

QuarterEngineering FocusProjectQ1Programming, SQL, transactions, testingFinance and payroll workflowQ2Architecture, RBAC, multi-tenancySecure CRMQ3DevOps, performance, offline syncPOS and import workflowsQ4AI agents, tools, evaluation, safetyAI-powered CRM

The purpose of this roadmap is not to master every technology in one year.

It’s to develop the ability to reason about increasingly complex engineering problems.

12. How Do You Know You’re Actually Improving?

Don’t measure engineering growth by how many courses you’ve completed.

Don’t measure it by how many AI prompts you’ve written.

And don’t measure it by the number of lines of code you’ve generated.

Measure what you can demonstrate.

Can you explain why your database transaction is safe?

Can you identify a missing authorization condition?

Can you diagnose a production failure using logs?

Can you design a workflow that handles duplicate requests?

Can you explain why you chose a particular architecture?

Can you build an AI integration that respects existing business permissions?

These are meaningful indicators of progress.

A good engineer should be able to explain not only what their system does, but also what guarantees it provides and where its limitations remain.

That understanding is what turns implementation experience into engineering expertise.

13. The Most Important Skill in 2027 Isn’t a Framework

Frameworks will continue evolving.

AI models will improve.

New developer tools will appear.

Some technologies that seem essential today may become less relevant.

But certain engineering problems will remain.

Software will still need to manage data correctly.

Applications will still need to protect user information.

Distributed systems will still experience failures.

Financial operations will still require consistency.

Business workflows will still have complex rules.

And developers will still need to make decisions under uncertainty.

The tools we use to implement solutions may change dramatically.

But understanding the underlying problems will remain valuable.

This is why I believe the strongest approach to learning software engineering in 2027 combines three things:

Deep fundamentals. Understand programming, databases, networking, security, and software design.

Real project experience. Work on applications where failures have meaningful consequences.

AI fluency. Use modern tools to accelerate implementation while independently evaluating correctness, reliability, and risk.

None of these replaces the others.

Together, they create a stronger engineer.

Final Thoughts: Don’t Just Learn to Code. Learn to Engineer.

When I think about the lessons from finance systems, CRM platforms, workflow applications, data-import pipelines, and offline-first architecture, one principle connects them all.

The real challenge is not producing code. It’s making the software behave correctly under real-world conditions.

AI can generate a payroll service.

But you need to understand why a payment must not be recorded twice.

AI can generate a CRM API.

But you need to understand why every query must respect authorization boundaries.

AI can generate an offline synchronization engine.

But you need to understand what happens when a network request fails after the server has already committed a transaction.

AI can build a tool-calling assistant.

But you need to understand which actions that assistant should be permitted to execute.

These are not reasons to avoid AI.

They’re reasons to become better at using it.

Learn the fundamentals.

Build real systems.

Understand how those systems fail.

Practice debugging, testing, and architectural reasoning.

Use AI to accelerate implementation, explore alternatives, and improve your work.

But never confuse code generation with engineering understanding.

Because the future of software development won’t only reward people who know how to ask AI to build something.

It will also need people who know what should be built, what can go wrong, and how to verify that the system is reliable.

AI can help you write software faster.

Engineering knowledge helps you build software worth trusting.

And in 2027, that distinction matters more than ever.

Recommended Learning Resources

About the Author

I’m Khaled Abdelfattah Youssef, a Full Stack Software Engineer with eight years of software development experience, working with TypeScript, NestJS, Nuxt.js, Flutter, PostgreSQL, and SaaS architecture.

My engineering interests include enterprise applications, finance and operations systems, CRM platforms, automation, and the practical integration of artificial intelligence into business software.

I enjoy exploring how strong engineering fundamentals and modern AI tools can work together to build more reliable, maintainable, and useful applications.

Website: ms3b.com

GitHub: github.com/ms3byoussef

LinkedIn: linkedin.com/in/ms3byoussef

AI Can Write the Code. Can You Tell When It’s Wrong?

مصعب يوسف — Tue, 20 Oct 2026 08:49:29 +0000

Why Learning Programming Fundamentals Matters More Than Ever in the Age of Artificial Intelligence

By Khaled Abdelfattah Youssef

Software Engineer | Software Architecture · Backend Development · Flutter · AI

October 2026

The Illusion of Becoming a Developer Overnight

Imagine this.

Someone opens an AI coding assistant and types:

“Build me a complete SaaS application with authentication, payments, a dashboard, and customer management.”

A few minutes later, hundreds of lines of code appear.

The application looks impressive.

The login page works. The dashboard displays beautiful charts. Customers can register, and the database stores information.

Everything appears to work.

But there are questions the interface cannot answer.

Is the authentication implementation secure?

Can users access another company’s data?

What happens when two customers update the same record simultaneously?

Will the system behave correctly under heavy traffic?

What happens when a payment succeeds but the server loses its connection?

And perhaps the most important question:

Does the person who built the application understand how it actually works?

This is one of the most important questions facing software development in the AI era.

We are entering a period when generating code is becoming increasingly accessible.

But generating code and engineering reliable software are not the same thing.

And confusing the two could become one of the biggest mistakes developers make.

1. AI Has Changed Programming, but Not the Meaning of Engineering

Artificial intelligence has transformed how developers work.

We can generate boilerplate, explore unfamiliar libraries, write unit tests, refactor functions, investigate errors, and prototype applications much faster than before.

Tasks that once required extensive manual effort can often be completed with fewer keystrokes.

These capabilities are genuinely valuable.

Rejecting AI entirely would mean ignoring a powerful engineering tool.

But there is an important distinction between writing code and solving engineering problems.

Writing a function is an implementation task.

Deciding whether that function should exist, how it interacts with the rest of the system, which assumptions it relies on, and how it might fail requires engineering judgment.

Consider a developer building a multi-tenant SaaS application.

An AI assistant can generate an endpoint that retrieves customer information from PostgreSQL.

But does the generated query enforce tenant isolation?

Does it validate permissions?

Does it expose fields that the user should not see?

Does it handle the possibility that a customer belongs to a different organization?

These questions require an understanding of the application’s architecture and security requirements.

AI can help implement a solution. It cannot independently guarantee that the solution meets every requirement you never clearly defined.

The responsibility for correctness does not disappear simply because the code was generated.

2. The Most Dangerous AI Mistakes Are Often the Most Convincing

One of the most misunderstood characteristics of generative AI is its ability to produce incorrect answers with remarkable confidence.

This behavior is commonly described as AI hallucination.

The US National Institute of Standards and Technology (NIST) uses the term confabulation to describe cases where generative AI systems present false or erroneous content confidently.

These mistakes can arise from the way generative models produce their outputs. tsapps.nist.gov

In programming, hallucinations can take several forms.

An AI assistant might invent a library method that doesn’t exist.

It might recommend an outdated API.

It might generate incorrect configuration options.

It might misunderstand how a framework handles authentication.

Or it might produce code that works for the example provided but fails under conditions the developer never considered.

The most concerning mistakes are not necessarily syntax errors.

A compiler can detect many syntax errors.

A type checker can identify certain incompatible values.

But what detects code that is syntactically valid, executes successfully, and implements the wrong business rule?

Consider this simplified example.

A developer asks an AI assistant to retrieve an invoice from a CRM application.

The generated code looks like this:

async function getInvoice(
  invoiceId: string,
  tenantId: string,
) {
  return prisma.invoice.findUnique({
    where: {
      id: invoiceId,
    },
  });
}

The code is valid.

It may compile successfully.

It may even pass a basic test.

But there’s a serious problem.

The function never uses tenantId.

If invoice IDs are known or disclosed, an authenticated user could potentially retrieve an invoice belonging to another organization.

The code works technically.

But it fails an essential security requirement.

A safer query would explicitly enforce tenant ownership:

async function getInvoice(
  invoiceId: string,
  tenantId: string,
) {
  return prisma.invoice.findFirst({
    where: {
      id: invoiceId,
      tenantId,
    },
  });
}

Of course, the backend must also derive the tenant context from an authorized user session rather than blindly trusting a client-provided value.

The important lesson is not about Prisma.

It’s about understanding the difference between functional code and correct software.

A developer who understands multi-tenancy and authorization can recognize the original mistake.

A developer who only knows how to ask AI for code might never notice it.

The most dangerous bug is not always the one that crashes your application. Sometimes, it’s the one that quietly does exactly what the code says, rather than what the business needs.

3. If AI Can Explain Everything, Why Should We Still Learn?

This is a reasonable question.

Why spend weeks learning asynchronous programming when AI can explain it immediately?

Why study database transactions when AI can generate the implementation?

Why learn algorithms when an assistant can produce them in seconds?

Because there’s a fundamental difference between receiving an explanation and developing understanding.

Learning is not merely collecting answers.

It’s developing the ability to recognize patterns, understand causes, evaluate alternatives, and solve unfamiliar problems.

Consider a developer learning asynchronous programming.

They ask AI to fix a race condition.

The assistant provides a working solution.

The developer copies it, runs the application, and moves on.

The task is complete.

But did the developer understand what caused the race condition?

Could they identify a similar problem in another part of the application?

Could they explain the difference between concurrency and parallelism?

Could they recognize when a database transaction is necessary?

If the answer is no, the developer has solved one immediate problem without necessarily gaining the ability to solve the next one.

This concern is supported by research.

In January 2026, Anthropic published an experimental study investigating how AI assistance affects coding skill development.

Participants using AI assistance scored an average of 50% on a subsequent assessment, compared with 67% for participants who coded without AI.

The study also found that how participants used AI mattered. Those who used it to ask conceptual questions and deepen understanding generally showed stronger learning outcomes than those who delegated the entire task.

This was a relatively small experiment involving learning a particular Python library, so its results should not be generalized to every developer or workflow. Nevertheless, it demonstrates why completing a task and learning from that task should be evaluated separately.

Read the Anthropic research. Anthropic

The practical implication is significant:

AI should reduce unnecessary effort without eliminating the intellectual effort required to develop expertise.

The goal is not to struggle for the sake of struggling.

The goal is to avoid outsourcing the very thinking that makes you a better engineer.

4. Programming Fundamentals Are Becoming More Valuable, Not Less

Frameworks change.

Libraries evolve.

Programming languages introduce new features.

AI models improve.

But the fundamental problems of software engineering remain surprisingly consistent.

Applications still need to manage data, coordinate concurrent operations, enforce permissions, communicate over networks, handle failures, and satisfy business requirements.

That is why I believe developers should continue investing in several fundamental areas.

Programming Logic and Problem-Solving

Before learning a framework, learn how to reason about problems.

Understand conditions, loops, functions, data structures, state, recursion, and algorithmic complexity.

Learn how to break a large problem into smaller parts.

Practice tracing what a program actually does, rather than what you expect it to do.

AI can generate an algorithm.

But understanding the algorithm allows you to evaluate whether it’s appropriate for your situation.

Data Structures and Algorithms

You don’t need to memorize every algorithm ever invented.

But you should understand the trade-offs between arrays, maps, sets, trees, queues, and other common structures.

You should know what time and space complexity mean.

Why?

Because an implementation that works with 100 records might become painfully inefficient with 10 million.

AI can suggest optimizations.

But you need enough knowledge to understand the trade-offs and verify whether those optimizations matter.

Databases and Data Integrity

Understanding databases is essential for building serious applications.

Developers should study relationships, indexes, constraints, transactions, isolation levels, and concurrency.

An AI assistant may generate a query that returns the correct information.

But does the query scale?

Could it create duplicate records?

Could two simultaneous operations produce an inconsistent balance?

Would the system recover from an interrupted transaction?

These questions are especially important in financial applications, inventory systems, and SaaS platforms.

Networking and Backend Fundamentals

Developers should understand HTTP, APIs, authentication, authorization, caching, retries, timeouts, and failure handling.

For example, what happens if a mobile application sends a payment request and the connection drops before the server responds?

Should the application retry?

Could retrying create a second charge?

How can idempotency prevent duplicate operations?

These are architectural questions that cannot be solved reliably through code generation alone.

Security Fundamentals

Every developer working with AI-generated code needs a working understanding of security.

Learn about input validation, injection attacks, broken access control, credential management, secure authentication, and least-privilege permissions.

AI-generated code should be treated like any other code entering a project: it requires review and appropriate verification.

This becomes even more important when coding agents can execute commands, modify repositories, or interact with external services.

OWASP’s guidance on prompt injection emphasizes controls such as least privilege, restricted tool access, and human approval for high-risk actions. OWASP Gen AI Security Project

Security cannot depend entirely on telling a model to behave safely.

Software Architecture and System Design

A system is more than a collection of working functions.

Developers should understand modularity, separation of concerns, dependencies, scalability, reliability, and observability.

Consider the difference between building a simple CRUD application and designing a SaaS platform used by hundreds of organizations.

Both may use the same programming language.

Both may use NestJS and PostgreSQL.

But their engineering requirements are very different.

The ability to understand these differences is part of what separates code generation from software engineering.

5. Learning to Debug May Become More Important Than Learning to Type Code

Imagine two developers working with the same AI coding assistant.

The first developer generates a feature and sees that the application crashes.

They copy the error message into the assistant.

The assistant generates a fix.

Another error appears.

They ask for another fix.

After several iterations, the application finally works.

But the developer doesn’t understand what changed.

The second developer uses the same tool.

When an error appears, they inspect the stack trace.

They identify which component failed.

They reproduce the problem.

They formulate a hypothesis.

Then they ask AI to help investigate possible causes.

Before accepting the suggested fix, they verify the explanation and write a regression test.

Both developers use AI.

But only one is consistently developing the skills needed to troubleshoot independently.

Debugging requires understanding how a system behaves.

It involves asking questions such as:

What should have happened?

What actually happened?

Where did the behavior diverge?

Which assumptions might be incorrect?

How can I reproduce the failure?

What evidence would prove that the fix is correct?

These skills remain valuable even when an AI tool can generate most of the implementation.

And they become increasingly important as developers review larger amounts of machine-generated code.

The ability to generate code is becoming widespread. The ability to investigate why code fails remains a valuable engineering skill.

6. The Real Danger Is Confusing Productivity with Understanding

Suppose you complete ten features in a single day using AI.

That’s impressive.

But what does it actually tell us?

Did those features satisfy the requirements?

Are they secure?

Were they tested against realistic conditions?

Will they be easy to maintain?

Did they introduce unnecessary dependencies?

Did they create technical debt that will take weeks to resolve?

The number of lines generated is not a reliable measurement of engineering success.

Neither is the number of prompts sent.

In 2025, researchers at METR conducted a randomized study involving experienced open-source developers working on established repositories.

In that particular setting, developers using early-2025 AI tools took approximately 19% longer to complete assigned tasks.

The study does not prove that AI reduces productivity in general. The researchers also acknowledged limitations, and later work highlighted how difficult measuring the impact of rapidly improving AI tools can be.

But the research challenges one assumption worth questioning:

AI-generated output does not automatically translate into faster completion of reliable engineering work.

Read the METR study and its 2026 methodological update. أرشيڤ

A feature is not complete merely because its code exists.

It must work under the conditions for which it was designed.

It must integrate correctly with the surrounding system.

It must satisfy functional and nonfunctional requirements.

And someone must be accountable for its behavior.

Engineering productivity should be measured by reliable outcomes, not simply by the speed at which code appears on the screen.

7. The Developer’s Role Is Changing: From Writing Everything to Understanding and Directing More

I don’t believe the future of programming should be framed as a competition between humans and AI.

The more useful question is how developers can become better engineers with AI assistance.

As implementation becomes easier, other engineering responsibilities become more important.

Developers increasingly need to define problems clearly, understand business requirements, select appropriate architectures, evaluate generated solutions, verify correctness, and manage system-level risks.

These responsibilities have always existed.

AI is changing how much attention developers can devote to them.

A developer who previously spent hours writing repetitive CRUD operations may now have more time to think about data modeling, security, testing, and user experience.

That’s a meaningful opportunity.

But it only becomes an advantage if the developer actually invests that saved time in understanding the system.

Otherwise, AI can simply accelerate the production of poorly understood software.

The most capable AI-assisted developers will not necessarily be the people who write the longest prompts.

They will be people who can translate ambiguous business problems into clear technical requirements, use AI efficiently, and evaluate the resulting work with engineering discipline.

They will know when to accept a suggestion, when to challenge it, and when to reject it entirely.

8. What Should Developers Actually Learn in the AI Era?

If I were beginning my software engineering journey today, I wouldn’t ignore AI.

And I wouldn’t abandon traditional programming education.

I would combine them.

I’d organize my learning around four complementary capabilities.

First: Understand How Software Works

Learn at least one programming language deeply enough to understand its execution model, common abstractions, and failure modes.

Develop a solid foundation in data structures, algorithms, databases, networking, operating systems, and software design.

You don’t need expert-level knowledge of every subject.

But you need enough understanding to identify when a generated solution conflicts with basic engineering principles.

Second: Learn How to Build Reliable Systems

Move beyond simple tutorials.

Build applications that contain real authentication, database relationships, concurrent operations, background jobs, and error handling.

Learn automated testing, debugging, logging, monitoring, and deployment.

Understand why an application that works on your laptop might fail in production.

Study how systems behave when components are slow, unavailable, or inconsistent.

Third: Develop AI Literacy

Learn how modern AI assistants work at a practical level.

Understand model limitations, hallucinations, context windows, tool calling, prompt injection, and the difference between generated claims and verified results.

Learn how to provide useful context to AI tools.

Learn to request alternative approaches and identify assumptions.

Know when to check official documentation, when to run a test, and when a model’s explanation is insufficient.

Most importantly, learn to distinguish between a convincing answer and an answer supported by evidence.

Fourth: Develop Engineering Judgment

This is where technical knowledge connects with experience.

Learn how to evaluate trade-offs.

When is a monolith preferable to microservices?

When is caching useful, and when does it introduce unnecessary complexity?

Should a financial operation be retried automatically?

Which actions require human approval?

When is a simpler solution better than a more sophisticated one?

These questions don’t always have a universally correct answer.

They require understanding context, constraints, risks, and consequences.

That is what engineering judgment is about.

9. How to Use AI Without Becoming Dependent on It

The goal isn’t to stop using AI.

It’s to change how you use it.

Here’s a practical approach I recommend.

Before Asking AI

Try to understand the problem yourself.

Write down the expected behavior.

Identify the inputs, outputs, and constraints.

Consider what could go wrong.

Even five minutes of independent thinking can help you ask better questions and evaluate the response more effectively.

While Working with AI

Don’t always request complete implementations.

Sometimes, ask for explanations, trade-offs, or potential failure scenarios.

Instead of:

“Build this feature for me.”

Try:

“Explain the architecture options for this feature, their trade-offs, and the failure scenarios I should consider. Ask me questions about missing requirements before proposing an implementation.”

When learning a new concept, try:

“Help me understand this problem without immediately giving me the full solution. Explain the underlying principle, give me a smaller example, and challenge my understanding.”

These approaches make AI a learning partner rather than merely a code generator.

After Receiving Generated Code

Read the code.

Understand what each important part does.

Check whether the APIs and dependencies actually exist in the versions you’re using.

Inspect security-sensitive operations.

Run automated tests.

Test edge cases.

Look for race conditions, unexpected inputs, and incorrect assumptions.

And ask yourself one final question:

Could I explain why this solution is correct to another engineer?

If you cannot, you’ve identified an area where you need more understanding before relying on the implementation.

That doesn’t mean you must personally write every line.

It means you should understand the system well enough to evaluate and maintain what you accept.

10. The Skills That Become More Important as AI Improves

There is a fascinating consequence of AI becoming more capable.

As generating code becomes easier, developers may produce larger amounts of software with less manual effort.

But more code creates more opportunities for mistakes, unexpected interactions, security vulnerabilities, and maintenance problems.

Imagine a coding agent generating an entire authentication module.

Another agent creates the billing system.

A third implements customer management.

Each component might work correctly in isolation.

But what happens when they interact?

Does billing use the same tenant authorization rules as customer management?

Can an expired subscription still access paid features?

What happens when a webhook arrives twice?

Does deleting a customer affect historical invoices?

Are all components using consistent transaction boundaries?

These are system-level questions.

Solving them requires an understanding of the relationships between components, not simply the correctness of individual functions.

This is why I believe the value of strong engineering fundamentals may increase as AI capabilities improve.

The more work AI performs, the more important it becomes to establish clear requirements, independent verification, and reliable boundaries.

An engineer’s job is not merely to inspect syntax.

It is to understand the consequences of the system’s behavior.

11. Don’t Become a Developer Who Only Knows How to Prompt

There is nothing wrong with using natural language to build software.

Prompting is becoming a valuable interface between human intentions and computing systems.

But prompting alone is not a replacement for understanding.

Someone who can generate an application but cannot explain its architecture is dependent on the tool.

Someone who can create a database but cannot reason about data integrity is vulnerable to subtle failures.

Someone who can deploy a service but cannot investigate production incidents will struggle when automated solutions stop working.

This doesn’t mean everyone building software must become an expert computer scientist.

AI is making software creation accessible to entrepreneurs, designers, analysts, and people from entirely different professions. That’s a positive development.

But professional software engineers who are responsible for reliability, security, and long-term maintenance need deeper technical understanding.

The distinction matters.

Building a prototype to validate an idea is not the same as maintaining a system that processes customer payments or sensitive business information.

As the consequences increase, so does the need for verification and expertise.

12. The Future Belongs to Developers Who Keep Learning

The software industry has always evolved.

Programming languages change.

Frameworks rise and fall.

Architectural patterns evolve.

And new tools repeatedly change how engineers work.

AI is another major transformation, though its speed and breadth make it particularly significant.

The developers who benefit most from this transformation will be those who remain curious, adaptable, and disciplined.

They won’t reject new tools simply because those tools challenge established workflows.

But they also won’t accept generated solutions without understanding their implications.

They will continue studying fundamentals while learning how to use increasingly capable AI systems.

They will practice writing code when doing so develops understanding.

They will use automation when it removes unnecessary work.

They will test their assumptions instead of confusing confidence with correctness.

And they will recognize that learning is not something you complete before becoming a developer.

It’s a continuous part of engineering.

The question is no longer whether AI can write code.

It can.

The more important question is whether we are developing the knowledge and judgment needed to use that capability responsibly.

Final Thoughts: Don’t Outsource Your Understanding

Artificial intelligence is one of the most powerful tools software developers have ever had.

It can accelerate learning, reduce repetitive work, help explore unfamiliar technologies, and make complex development tasks more accessible.

We should take advantage of those capabilities.

But we should also recognize their limits.

AI can generate code that looks correct but contains serious flaws.

It can produce explanations that sound authoritative but are factually wrong.

It can complete a task without helping the person using it understand the underlying concepts.

And it can create the illusion of technical competence when someone becomes skilled at producing software without learning how that software works.

That’s why fundamental knowledge still matters.

Not because developers must compete with AI at typing code.

Not because every implementation must be written manually.

But because understanding is what allows us to distinguish between a working demonstration and a trustworthy system.

Learn how programming works.

Learn how systems fail.

Learn how to debug, test, and reason.

Learn how to question assumptions.

Learn how to evaluate evidence.

And learn how to use AI as a tool that expands your capabilities rather than replacing your judgment.

Because the defining skill of a software engineer in the AI era may not be the ability to produce code.

It may be the ability to understand what the code does, recognize when it’s wrong, and take responsibility for making it right.

AI can write the code.

But understanding why it works — and recognizing when it doesn’t — is what makes you an engineer.

References and Further Reading

The following research and reports informed this article:

1. Stack Overflow Developer Survey 2026 — AI Trust and Developer Workflows

Published October 6, 2026. The survey explores how developers use AI, when they trust its output, and the importance of verification and source attribution.

https://survey.stackoverflow.co/2026/

2. Anthropic — How AI Assistance Impacts the Formation of Coding Skills

Published January 29, 2026. An experimental study examining the relationship between AI-assisted programming, task completion, and skill development.

https://www.anthropic.com/research/AI-assistance-coding-skills

3. METR — Measuring the Impact of Early-2025 AI on Experienced Open-Source Developer Productivity

A randomized study examining the effects of AI coding tools on experienced developers working in established repositories.

https://arxiv.org/abs/2507.09089

4. NIST — Artificial Intelligence Risk Management Framework: Generative AI Profile

Official guidance covering risks associated with generative AI, including confabulation, reliability, and evaluation.

https://doi.org/10.6028/NIST.AI.600-1

5. OWASP — LLM Prompt Injection Prevention and Security Guidance

Security guidance for applications integrating language models, tools, and automated agents.

https://genai.owasp.org/llmrisk/llm01-prompt-injection/

DEV Community: مصعب يوسف

The Power of Structural Design Patterns in Flutter: Your Ultimate Guide to Building Efficient Apps

1. Adapter Pattern

Example

2. Bridge Pattern

Example

3. Composite Pattern

Example

4. Decorator Pattern

Example

5. Facade Pattern

Example

6. Proxy Pattern

Example

7. Flyweight Pattern

Example

Conclusion

Updates to make you more productive when developing Flutter Web

Flutter web apps improved load times

Embedding a Flutter app into an HTML page

Seamless integration with the web

Support for WebAssembly (Wasm)

Finally…

Use the MediaQuery.of() method in your build functions

Reference

Generated Code in Flutter ”Freezed”

Improve Flutter Developer Skills ‘Freezed Package’

Key Features of the freezed Package

“ Freezed Package “

Step 1: Add Dependencies

Step 2: Create the Freezed Data Model

Using Union Types

Pattern Matching

CopyWith Method

Conclusion

References

Generated Code in Flutter ‘Injectable Package’

Improve Flutter Developer Skills “Injectable Package”

Conclusion

References

Generated Code in Flutter ”AutoRoute”

Improve Flutter Developer Skills ‘AutoRoute Package’

Get started

Route Configuration

Nested Navigation

Nested Tab navigation

References

State Management in Flutter: Provider vs Riverpod vs Bloc

What is State Management?

Overview of Clean Architecture

1.Provider

Why Use Provider?

Example: Login Flow with Clean Architecture

2. Riverpod

Why Use Riverpod?

Why Use Riverpod?

3.Bloc

Why Use Bloc?

Example: Login Flow with Bloc

Domain Layer

Data Layer

Presentation Layer (Bloc Implementation)

Conclusion

Ultimate Step-by-Step Guide to CI/CD with Fastlane in Flutter (Mac & Windows)

What is Fastlane and Why Use It?

Requirements Breakdown

Mac Requirements (for Android & iOS)

Windows Requirements (for Android only)

Step-by-Step Setup for Android CI/CD (Windows & Mac)

1. Install Fastlane

On Windows:

2. Navigate to Your Flutter Android Directory

3. Initialize Fastlane

4. Example Fastfile for Android Automation

5. Run Fastlane for Android Builds

Step-by-Step Setup for iOS CI/CD (Mac Only)

1. Navigate to iOS Directory

2. Initialize Fastlane for iOS

3. Example Fastfile for iOS Builds and Deployment

4. Running Fastlane for iOS

Use the `MediaQuery.of()` method in your build functions

Key Features of the `freezed` Package