Top 3 Useful Dart Features in Flutter

This article will cover three practical Dart features that will instantly improve your Flutter code.

All Levels

With Dart 3, and the combination of sealed classes, switch cases, and a sprinkle of pattern matching, you can construct type-safe logic flows.

Let’s break this down, starting with my favorite language feature, sealed classes.

Sealed Class

Level 1

Let’s say you have an application that can be in one of multiple states. For example, you can have multiple login states such as:

Loading
Logged In
Error

When using a sealed class, you define a base class and in this case, it would be the login state.

1
sealed class LoginState {}

You then extend that base class to derive multiple different permutations, with different properties associated with them.

1
sealed class LoginState {}
2

3
class LoginInitial extends LoginState {}
4

5
class LoginLoading extends LoginState {}
6

7
class LoginSuccess extends LoginState {
8
  final String username;
9
  LoginSuccess(this.username);
10
}
11

12
class LoginError extends LoginState {
13
  final String message;
14
  LoginError(this.message);
15
}

For example, a successful login state might have the username of the logged-in user, while a loading state would not have any information.

1
sealed class LoginState {}
2

3
class LoginLoading extends LoginState {}
4

5
class LoginSuccess extends LoginState {
6
  final String username;
7
  LoginSuccess(this.username);
8
}

This alone isn’t anything special; the great part comes when you need to handle these states in a compile-safe manner.

This leads us into the second useful feature, which is a simple switch case.

Switch case

Level 2

Because the compiler understands sealed classes and inheritance, you can switch against these states.

1
switch (authViewModel.state) {
2
  case LoginInitial():
3
    return Text("Enter your credentials");
4
  case LoginLoading():
5
    return CircularProgressIndicator();
6
  case LoginSuccess():
7
    return Text("Welcome, ${authViewModel.state.username}!");
8
  case LoginError(:var message):
9
    return Text("Error: $message", style: TextStyle(color: Colors.red));
10
}

The best part is that if we forget to handle a case or if we add more states to switch against, the compiler will let us know that we aren’t handling all cases and need to add them.

1
switch (authViewModel.state) {
2
  case LoginInitial():
3
    return Text("Enter your credentials");
4
  case LoginLoading():
5
    return CircularProgressIndicator();
6
  case LoginSuccess():
7
    return Text("Welcome, ${authViewModel.state.username}!");
8
  // ERROR: not handling LoginError state
9
}

Now, this has already forced us into handling different scenarios that can happen. However, writing out authViewModel.state.username feels annoying.

1
switch (authViewModel.state) {
2
  case LoginInitial():
3
    return Text("Enter your credentials");
4
  case LoginLoading():
5
    return CircularProgressIndicator();
6
  case LoginSuccess():
7
    // CAN WE GET THE USERNAME HERE DIRECTLY
8
    return Text("Welcome, ${authViewModel.state.username}!");
9
  case LoginError():
10
    return Text("Error: ${authViewModel.state.message}",
11
       style: TextStyle(color: Colors.red)
12
    );
13
}

Pattern Matching and Destructuring

The third feature solves this and is a combination of the previous two features: pattern matching and destructuring.

Level 3

In the following example, we can see that using destructuring, we can get the username and the message out of the class as separate variables to use. This is helpful when you only care about a small number of properties and don’t want to write out the entire nested property multiple times.

1
switch (authViewModel.state) {
2
  case LoginInitial():
3
    return Text("Enter your credentials");
4
  case LoginLoading():
5
    return CircularProgressIndicator();
6
  case LoginSuccess(:var username):
7
    return Text("Welcome, $username!");
8
  case LoginError(:var message):
9
    return Text("Error: $message", style: TextStyle(color: Colors.red));
10
}

Let’s look at another example. The state here is a payment state. You can pattern match against the different states and use destructuring to extract the relevant properties, leaving your code looking readable.

1
switch (viewModel.state) {
2
  case PaymentInitial():
3
    return Text("Enter an amount and click 'Pay Now'");
4

5
  case PaymentProcessing():
6
    return CircularProgressIndicator();
7

8
  case PaymentSuccess(:var amount, :var transactionId):
9
    return Column(
10
      children: [
11
        Text("Payment Successful!", style: TextStyle(color: Colors.green, fontSize: 18)),
12
        Text("Amount: \$${amount.toStringAsFixed(2)}"),
13
        Text("Transaction ID: $transactionId"),
14
      ],
15
    );
16

17
  case PaymentFailed(:var errorMessage):
18
    return Text("Payment Failed: $errorMessage", style: TextStyle(color: Colors.red));
19
}

These are just a few of my favorite and very useful Dart language features.

If you enjoyed this article, you will enjoy this next article about 3 concepts to build more maintainable Flutter apps

← Previous Article Folder Structure for Large Projects Next Article → The Definitive Guide to Navigator 2.0 in Flutter

Top 3 Useful Dart Features in Flutter

Learn our favorite Dart features to write better Flutter apps.

Sealed Class

Switch case

Pattern Matching and Destructuring