DEV Community: مصعب يوسف

Flutter Architecture Recommendations and Resource

مصعب يوسف — Sat, 17 May 2025 16:34:27 +0000

Building a Flutter application with a solid architectural foundation is crucial for creating maintainable, scalable, and efficient code. The Flutter team provides recommendations for best practices in app architecture. These recommendations are adaptable and should be tailored to your app’s unique needs. Below, we explore these practices with examples and explanations.

Separation of Concerns

Separation of concerns is a fundamental architectural principle. It ensures that your app is divided into distinct layers, each responsible for a specific functionality, such as UI, data handling, and business logic. Here are the key recommendations:

1. Use Clearly Defined Data and UI Layers

Recommendation Level: Strongly Recommend
Why It Matters: By separating the data and UI layers, your app becomes more modular, testable, and maintainable.
Implementation
Data Layer: Responsible for managing data sources (e.g., APIs, databases) and business logic.
UI Layer: Displays data and listens for user interactions.

// Data Layer
class UserRepository {
  final ApiService apiService;

UserRepository(this.apiService);
  Future<User> getUser(String id) async {
    return await apiService.fetchUser(id);
  }
}
// UI Layer
class UserViewModel extends ChangeNotifier {
  final UserRepository repository;
  UserViewModel(this.repository);
  User? user;
  Future<void> fetchUser(String id) async {
    user = await repository.getUser(id);
    notifyListeners();
  }
}
// Widget
class UserScreen extends StatelessWidget {
  final UserViewModel viewModel;
  UserScreen(this.viewModel);
  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: viewModel.fetchUser('123'),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return CircularProgressIndicator();
        } else if (snapshot.hasError) {
          return Text('Error: ${snapshot.error}');
        } else {
          return Text('User: ${viewModel.user?.name}');
        }
      },
    );
  }
}

2. Use the Repository Pattern

Recommendation Level: Strongly Recommend
why It Matters: This pattern isolates data access logic, making the app more flexible and easier to test.

3. Use ViewModels and Views in the UI Layer (MVVM)

Recommendation Level: Strongly Recommend
Why It Matters: Keeps widgets “dumb,” reducing errors and increasing reusability.

4. Avoid Logic in Widgets

Encapsulate all logic in ViewModels or other helper classes, leaving widgets responsible only for rendering UI.

Handling Data

Handling data with care improves code reliability and prevents errors.

1. Use Unidirectional Data Flow

Recommendation Level: Strongly Recommend
Implementation
Data flows from the data layer to the UI layer.
User interactions trigger updates in the data layer.

2. Use Immutable Data Models

Recommendation Level: Strongly Recommend
Why It Matters: Prevents unintended mutations and makes debugging easier.

Example:

import 'package:freezed_annotation/freezed_annotation.dart';
part 'user.freezed.dart';
part 'user.g.dart';

@freezed
class User with _$User {
  const factory User({
    required String id,
    required String name,
  }) = _User;
  factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);
}

3. Create Separate API Models and Domain Models

Recommendation Level: Conditional
Why It Matters: Reduces complexity in large apps by preventing coupling between API responses and business logic.

App Structure

A well-structured app simplifies collaboration and enhances code quality.

1. Use Dependency Injection

Recommendation Level: Strongly Recommend
Why It Matters: Prevents global state and enhances testability.

Example:

import 'package:provider/provider.dart';

void main() {
  runApp(
    MultiProvider(
      providers: [
        Provider(create: (_) => ApiService()),
        ProxyProvider<ApiService, UserRepository>(
          update: (_, apiService, __) => UserRepository(apiService),
        ),
      ],
      child: MyApp(),
    ),
  );
}

2. Use go_router for Navigation

Recommendation Level: Recommend
Why It Matters: Simplifies navigation while supporting deep linking and state restoration.

3. Use Abstract Repository Classes

Recommendation Level: Strongly Recommend
Why It Matters: Allows different implementations for various environments (e.g., development, staging).

Testing

Testing ensures your app’s reliability and reduces the risk of introducing bugs

1. Test Architectural Components Separately and Together

Recommendation Level: Strongly Recommend
Implementation:
Write unit tests for repositories, services, and ViewModels.
Write widget tests for views.

void main() {
  test('UserRepository fetches user correctly', () async {
    final mockApiService = MockApiService();
    final repository = UserRepository(mockApiService);

when(mockApiService.fetchUser('123'))
        .thenAnswer((_) async => User(id: '123', name: 'John Doe'));
    final user = await repository.getUser('123');
    expect(user.name, 'John Doe');
  });
}

2. Use Fakes for Testing

Recommendation Level: Strongly Recommend
Why It Matters: Encourages modular and testable code by focusing on inputs and outputs.

Recommended resources

Code and templates

Compass app source code — Source code of a full-featured, robust Flutter application that implements many of these recommendations.
very_good_cli — A Flutter application template made by the Flutter experts Very Good Ventures. This template generates a similar app structure.

Documentation

Very Good Engineering architecture documentation — Very Good Engineering is a documentation site by VGV that has technical articles, demos, and open-sourced projects. It includes documentation on architecting Flutter applications.
State Management with ChangeNotifier walkthrough — A gentle introduction into using the primitives in the Flutter SDK for your state management.

Tooling

Flutter developer tools — DevTools is a suite of performance and debugging tools for Dart and Flutter.
flutter_lints — A package that contains the lints for Flutter apps recommended by the Flutter team. Use this package to encourage good coding practices across a team.

By following these recommendations, you can create Flutter applications that are efficient, scalable, and easy to maintain.

Thank you for reading

see more https://ms3byoussef.medium.com/

Flutter Enums in Flutter with Sealed Classes in Dart 3

مصعب يوسف — Sat, 17 May 2025 10:07:41 +0000

Enums have long been a reliable and expressive way to represent a set of constant values in both Dart and Flutter. With the arrival of Dart 3, enums are no longer just simple constants — they now support advanced features that make them incredibly versatile. When used alongside sealed classes, another exciting Dart 3 addition, enums can help you build cleaner, more robust, and type-safe application logic.

In this expanded article, we’ll dive into:

What are enums in Dart, and why they matter
A look at Dart 3’s powerful enum upgrades
Introduction to sealed classes and union types
Real-world examples combining Enums with sealed classes for elegant modeling in Flutter apps

What Are Enums in Dart?

Enums (short for “enumerations”) are a special kind of type in Dart that represent a fixed set of named values. They are particularly handy for situations where a variable should only take one of a limited number of possible values. Use cases include user roles, app themes, navigation tabs, button states, form field types, and more.

Here’s a basic example of how enums are defined and used in Dart:

enum AppTheme {
  light,
  dark,
  system,
}

void applyTheme(AppTheme theme) {
  switch (theme) {
    case AppTheme.light:
      print("Applying light theme");
      break;
    case AppTheme.dark:
      print("Applying dark theme");
      break;
    case AppTheme.system:
      print("Following system theme");
      break;
  }
}

This approach ensures that only one of the defined values can be used, reducing errors and improving readability.

Dart 3: More Powerful Enums

Dart 3 takes Enumsto a whole new level by allowing them to carry data and implement behavior. These enhancements make enums act more like regular classes, opening new opportunities for modeling domain-specific logic right within an enum.

1. Instance Fields and Methods

Enums can now include constructor parameters, fields, and methods — giving them far more expressive power.

enum AppTheme {
  light("Light"),
  dark("Dark"),
  system("System");

final String displayName;
  const AppTheme(this.displayName);
  void log() => print("Selected theme: $displayName");
}

You can now treat Enums like objects, which allows for cleaner UI representation and logic encapsulation.

2. Mixins and Interfaces

Enums are now capable of implementing interfaces and applying mixins, just like regular classes. This is great for unifying behavior across enum cases.

abstract interface class Loggable {
  void log();
}

enum LogLevel implements Loggable {
  info,
  warning,
  error;
  @override
  void log() => print("Level: $name");
}

This technique makes it easier to integrate Enums into larger application architectures and design patterns.

Sealed Classes & Union Types (Dart 3)

Sealed classes are a new Dart 3 feature designed to model restricted class hierarchies, where all subclasses must be declared in the same file. This guarantees that the compiler knows all possible subclasses, enabling exhaustive checks and powerful pattern matching.

sealed class Result {}

class Success extends Result {
  final String data;
  Success(this.data);
}
class Failure extends Result {
  final String message;
  Failure(this.message);
}
void handle(Result result) {
  switch (result) {
    case Success(:final data):
      print("Success with $data");
      break;
    case Failure(:final message):
      print("Failed: $message");
      break;
  }
}

This makes sealed classes ideal for modeling outcomes, states, or event flows, where every possible case should be handled explicitly.

Combining Enums with Sealed Classes

One of the most compelling use cases is combining enums and sealed classes to build modular validation logic. This approach leads to highly testable, decoupled components.

Step 1: Define an enum for the field type

enum FieldType {
  email,
  password,
  username,
}

Step 2: Define a sealed class hierarchy for validation results

sealed class ValidationResult {}

class Valid extends ValidationResult {}
class Invalid extends ValidationResult {
  final String reason;
  Invalid(this.reason);
}
class Empty extends ValidationResult {}

Step 3: Use both together for validation

ValidationResult validate(String value, FieldType type) {
  if (value.isEmpty) return Empty();

switch (type) {
    case FieldType.email:
      return value.contains('@')
          ? Valid()
          : Invalid("Invalid email format");
    case FieldType.password:
      return value.length >= 6
          ? Valid()
          : Invalid("Password too short");
    case FieldType.username:
      return value.length >= 3
          ? Valid()
          : Invalid("Username too short");
  }
}

This architecture is modular and keeps responsibilities clearly separated: Enums define types, while sealed classes represent outcomes.

💡 Real-World Use Case: Flutter UI State Modeling

A typical scenario where sealed classes shine is in managing UI states in a Bloc or Cubit. This lets you represent each state explicitly and attach data to it when needed.

sealed class FetchState {}

class Loading extends FetchState {}
class Success extends FetchState {
  final List<String> items;
  Success(this.items);
}
class Error extends FetchState {
  final String message;
  Error(this.message);
}
Widget build(BuildContext context) {
  return switch (state) {
    Loading() => const CircularProgressIndicator(),
    Success(:final items) => ListView(
      children: items.map(Text.new).toList(),
    ),
    Error(:final message) => Text('Error: $message'),
  };
}

Using sealed classes in UI state management eliminates the need for nullable types, flags, or combining Enums with data-holder classes — resulting in more elegant and reliable code.

Conclusion

Dart 3’s support for enriched Enums and sealed classes transforms how we model logic and data flow in Flutter apps. This powerful duo enables you to:

Represent fixed choices with associated data using Enums
Build fully type-safe and exhaustive logic flows with sealed classes
Eliminate ambiguity and boilerplate when working with UI states or business logic

If you’re aiming for maintainable, testable, and scalable codebases, these tools should become a core part of your Flutter development workflow. Whether you’re building form validators, handling network states, modeling navigation routes, or structuring domain logic, combining Enums with sealed classes provides the clarity and precision modern apps demand.

you can see our blogs in https://medium.com/@ms3byoussef