Clean Architecture layers in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define the layer responsible for UI in Clean Architecture.

Flutter

class [1]Layer {
  void render() {
    print('Display UI');
  }
}

Drag options to blanks, or click blank then click option'

APresentation

BData

CDomain

DInfrastructure

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing the Domain layer with the UI layer.

Using Data layer name for UI.

The Presentation layer handles the UI and user interaction in Clean Architecture.

2fill in blank

medium

Complete the code to define the layer that contains business rules in Clean Architecture.

Flutter

abstract class [1]Layer {
  void executeBusinessLogic();
}

Drag options to blanks, or click blank then click option'

AData

BDomain

CPresentation

DService

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing Domain with Data layer responsibilities.

Thinking Presentation layer holds business logic.

The Domain layer contains business rules and logic independent of UI or data sources.

3fill in blank

hard

Fix the error in the code by choosing the correct layer name for data handling.

Flutter

class [1]Layer {
  void fetchData() {
    print('Get data from API or DB');
  }
}

Drag options to blanks, or click blank then click option'

ADomain

BBusiness

CPresentation

DData

Attempts:

3 left

💡 Hint

Common Mistakes

Using Domain or Presentation layer for data fetching.

Naming the layer incorrectly as Business.

The Data layer manages data sources like APIs and databases in Clean Architecture.

4fill in blank

hard

Fill both blanks to complete the Flutter widget that uses the Presentation and Domain layers.

Flutter

class MyWidget extends StatelessWidget {
  final [1]Layer domainLayer;

  MyWidget(this.domainLayer);

  @override
  Widget build(BuildContext context) {
    return [2]();
  }
}

Drag options to blanks, or click blank then click option'

ADomain

BContainer

CPresentation

DScaffold

Attempts:

3 left

💡 Hint

Common Mistakes

Using Presentation as a type for domainLayer variable.

Using Container instead of Scaffold for UI.

The widget depends on the Domain layer for logic and uses Scaffold as the UI container in Presentation.

5fill in blank

hard

Fill all three blanks to complete the repository pattern connecting Domain and Data layers.

Flutter

abstract class [1]Repository {
  Future<String> fetchData();
}

class [2]RepositoryImpl implements [3]Repository {
  @override
  Future<String> fetchData() async {
    return 'Data from API';
  }
}

Drag options to blanks, or click blank then click option'

AUser

DProduct

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for interface and implementation.

Mixing Product and User names incorrectly.

The UserRepository interface in Domain is implemented by UserRepositoryImpl in Data layer to fetch data.