Enum with extensions in Flutter

Enums are an essential part of any Flutter project, but where they truly shine is when we combine them with extensions. This pattern allows you to centralize behavior, organize the UI, and eliminate repeated switch statements that inevitably become unmaintainable.

Discover how powerful this approach was when I was working with an app's bottom navigation: titles, icons, colors, and even actions became encapsulated directly within the enum. Since then, I haven't looked back.

An enumerated data type (also known as "enumeration" or "enum") is a data type that consists of a set of possible values, which are explicitly listed in the type declaration. Instead of representing a value (like an integer), it is represented by a set of key/value-type values. Enumerated types are a useful way to make constant classifications in the application.

What is an enum in Flutter and why extend it with extensions

Limitations of a traditional enum in Dart

A pure enum is simple: a list of values.
It serves to represent states, options, or types, but by default, it does not allow adding custom properties or methods.

This implies that, without using enhanced enums or extensions, we end up with scattered code:

• lists of titles on one side
• icon paths on the other
• switch statements spread across various widgets
• unnecessary utility classes

I experienced that chaos too: before, I had the titles in one file, the icons in another, and colors in different widgets. All of that disappeared with a single extension.

When an extension improves your architecture

Extensions allow you to add getters, methods, and logic without modifying the original enum.

You'll use them when:

• you need UI logic associated directly with the enum
• you want more readable code (BottomTabsEnum.home.title)
• you seek to group behavior without creating additional classes
• you want to avoid repeated switch statements

Enums with extensions: the pattern that cleans up your code

Real advantages in Flutter projects

• A single source of truth: UI, icons, colors, and centralized actions.
• Extreme readability: inside the widget, simply write .title, .color, .onTap().
• Fewer auxiliary classes.
• More scalable code: every new enum value immediately inherits everything.

It changed the way I organize navigation screens. It was common that when adding a new tab, I had to touch several files; now, I just add the value to the enum and that's it.

Why use extensions instead of creating new classes

Creating classes for every label, icon, or color is overkill.

An extension keeps everything in its natural place without introducing artificial abstractions.

In this article, we analyze how we can extend the functionality of our Enum using extension methods.

Practical example: extended enum for a bottom navigation bar

Let's create an Enum

enum BottomTabEnum {
  home,
  video,
  shop,
  profile,
}

Adding title, icon, and color from extensions

The Enum we created above is for the bottom tabs of our application. We use this Enum for our bottom navigation bar. We have 4 tabs in our application. Now we will add more purpose to this Enum using extension methods.

extension BottomTabsExt on BottomTabsEnum {
  String get title {
    switch (this) {
      case BottomTabsEnum.home:
        return 'Home';
      case BottomTabsEnum.video:
        return 'Explore';
      case BottomTabsEnum.shop:
        return 'Shop';
      case BottomTabsEnum.profile:
        return 'Profile';
    }
  }
  String get iconAssetLocation {
    switch (this) {
      case BottomTabsEnum.home:
        return Assets.imagesChefCooking;
      case BottomTabsEnum.video:
        return Assets.imagesVideoCamera;
      case BottomTabsEnum.shop:
        return Assets.imagesOnlinePayment;
      case BottomTabsEnum.profile:
        return Assets.imagesWomanUsingPhone;
    }
  }
  Color get bgColor {
    switch (this) {
      case BottomTabsEnum.home:
        return const Color(0xFFEDC35D);
      case BottomTabsEnum.video:
        return const Color(0xFFF59273);
      case BottomTabsEnum.shop:
        return const Color(0xFFE1EFEE);
      case BottomTabsEnum.profile:
        return const Color(0xFFF2BBBB);
    }
  }
  onClicked() {
    switch (this) {
      case BottomTabsEnum.home:
        ///Handle onClick
        break;
      case BottomTabsEnum.video:
        ///Handle onClick
        break;
      case BottomTabsEnum.shop:
        ///Handle onClick
        break;
      case BottomTabsEnum.profile:
        ///Handle onClick
        break;
    }
  }
}

Executing actions (onClick) directly from the enum

The most interesting part: connecting behavior:

extension BottomTabsActions on BottomTabEnum {
  void onClicked() {
    switch (this) {
      case BottomTabEnum.home:
        // Acción pestaña home
        break;
      case BottomTabEnum.video:
        // Acción pestaña video
        break;
      case BottomTabEnum.shop:
        // Acción pestaña shop
        break;
      case BottomTabEnum.profile:
        // Acción pestaña profile
        break;
    }
  }
}

We have created different extension methods for our Enum. This will simplify our code greatly.

Let's use our Enums in a Flutter app

    ///To get the title
    Text(BottomTabsEnum.video.title);
    ///To get the icon asset location
    Image.asset(
      BottomTabsEnum.home.iconAssetLocation,
      width: 18,
      height: 18,
    );
    ///To get the bg color
    Text(
      'Cool extension',
      style: TextStyle(
        color: BottomTabsEnum.profile.bgColor,
        fontSize: 14,
        height: 1,
        fontWeight: FontWeight.w600,
      ),
    );
    ///To perform click action
    GestureDetector(
      onTap: () {
        BottomTabsEnum.home.onClicked();
      },
      child: child,
    );

Recommended use cases

• Use enhanced enums when:
  • you need internal attributes with state
  • you want to define constructors
  • the enum must behave like a light class
• Use extensions when:
  • the enum already exists and you want to add logic without rewriting it
  • you seek to group UI-related behavior
  • you want to keep the enum as simple as possible
• Combine them to get the best of both
• Nothing prevents using enhanced enums plus extensions.
  For example: you can have internal attributes and add UI methods via extension.

Best practices for working with extended enums in Flutter

Code organization

• Keep extensions in separate files (bottom_tab_ext.dart).
• Use descriptive names: BottomTabsExt, BottomTabsActions.

Avoiding repeated switch statements

A switch statement should only exist in the extension.

Widgets should never have to ask: "if it's home, show this."

This saved me bugs where a change in one tab was forgotten in another widget.

Tips for scaling the pattern in large apps

• If the enum grows too large, divide it into several thematic extensions.
• Use enhanced enums when you require more than 2-3 internal properties.
• If the onClick action becomes complex, delegate it to a service.

Frequently Asked Questions about enums with extensions in Flutter

• Can I add methods to an existing enum without modifying it?
  • Yes. Extensions are specifically designed for that.
• Is it a good practice to use enums to manage UI?
  • Absolutely. In fact, it improves visual coherence.
• Do extensions replace classes?
  • Not always, but they are lighter in repetitive patterns.
• Can enhanced enums and extensions be mixed?
  • Yes, and it's a very powerful combination.

Conclusion

Enums with extensions are one of the most elegant and clean ways to structure UI and logic in Flutter. They allow you to maintain a single source of truth, write less repetitive code, and improve your app's scalability.

In my case, moving my bottom tabs to this pattern transformed several chaotic files into expressive and much easier-to-maintain code. If you work with navigation, states, actions, or UI configurations, it's a pattern you should definitely adopt.