Why clean architecture scales codebases in Flutter - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Flutter widget that displays a simple text.

Flutter

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text([1]));
  }
}

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

ACenter('Hello World')

B'Hello World'

CHello World

DText('Hello World')

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around the string

Passing a widget instead of a string

The Text widget requires a string inside quotes to display text properly.

2fill in blank

medium

Complete the code to navigate to a new screen called DetailScreen when a button is pressed.

Flutter

ElevatedButton(
  onPressed: () {
    Navigator.of(context).[1](MaterialPageRoute(builder: (_) => DetailScreen()));
  },
  child: Text('Go')
)

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

Apush

Bpop

CpopUntil

DpushReplacement

Attempts:

3 left

💡 Hint

Common Mistakes

Using pop which removes a screen

Using pushReplacement which replaces current screen

Navigator.push adds a new screen on top of the current one, which is the correct way to navigate forward.

3fill in blank

hard

Fix the error in the code to correctly implement a repository interface in clean architecture.

Flutter

abstract class UserRepository {
  Future<User> [1](int id);
}

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

AgetUser

BfetchUser

CloadUser

DretrieveUser

Attempts:

3 left

💡 Hint

Common Mistakes

Using inconsistent method names

Using verbs that are less clear in repository context

Using getUser is a common and clear method name for fetching a user by id in repository interfaces.

4fill in blank

hard

Fill in the blank to create a use case class that calls a repository method and returns a user.

Flutter

class GetUserUseCase {
  final UserRepository repository;

  GetUserUseCase(this.repository);

  Future<User> execute(int id) async {
    return await repository.[1](id);
  }
}

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

A.then

B;

CgetUser

D()

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting parentheses after method name

Using semicolon instead of parentheses

The repository method getUser is called with id.

5fill in blank

hard

Fill in the blanks to define a Flutter widget that uses a use case to fetch and display user data asynchronously.

Flutter

class UserWidget extends StatefulWidget {
  @override
  _UserWidgetState createState() => _UserWidgetState();
}

class _UserWidgetState extends State<UserWidget> {
  late Future<User> userFuture;
  final GetUserUseCase useCase = GetUserUseCase(UserRepositoryImpl());

  @override
  void initState() {
    super.initState();
    userFuture = useCase.[1](1);
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<User>(
      future: userFuture,
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return CircularProgressIndicator();
        } else if (snapshot.hasError) {
          return Text('Error');
        } else {
          return Text(snapshot.data?.{{BLANK_3}} ?? 'No user');
        }
      },
    );
  }
}

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

Aexecute

Bthen

Cname

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong method names

Accessing wrong user property

Missing parentheses on method calls

The use case method execute is called with id 1. The user's name property is displayed.