Why Mixins in Flutter is better and easy than Inheritance &Composition

4 min readOct 5, 2024

Mixins are a powerful feature in Dart (the programming language used by Flutter) that allow you to reuse a class’s code in multiple class hierarchies without using inheritance. They enable you to compose classes from reusable components, promoting cleaner and more maintainable code.

What Are Mixins?

A mixin is a class whose methods and properties can be used by other classes without being a parent class of those classes. Mixins help you to extend the functionality of classes without creating a complex inheritance chain.

Key Characteristics of Mixins:

Reusability: Encapsulate common behaviors that can be shared across multiple classes.
Composition Over Inheritance: Prefer composition (using mixins) over inheritance to promote flexibility.
No State Management Restrictions: While mixins can have state, it’s generally advisable to keep them stateless to avoid unexpected behaviors.

Note: Flutter Machine Learning & AI Courses

If you want to build Machine Learning and AI based smart Flutter apps then check our Mobile Machine Learning courses on udemy. Avail 92% off with coupon code “MOBILEMLAI” only for a limited time

How to Implement Mixins in Dart/Flutter

1. Defining a Mixin

Using the mixin Keyword:

mixin Logger {
  void log(String message) {
    final timestamp = DateTime.now().toIso8601String();
    print('[$timestamp] $message');
  }
}

2. Applying a Mixin to a Class

To apply a mixin to a class, use the with keyword followed by one or more mixins.

class MyService with Logger {
  void performAction() {
    log('Action performed.');
    // Additional logic here
  }
}

3. Multiple Mixins

You can apply multiple mixins to a single class by separating them with commas.

mixin TimestampMixin {
  String getTimestamp() => DateTime.now().toString();
}

mixin AlertMixin {
  void showAlert(String message) {
    // Imagine this shows a dialog or a toast
    print('ALERT: $message');
  }
}

class MyComponent with Logger, TimestampMixin, AlertMixin {
  void execute() {
    log('Executing component.');
    final timestamp = getTimestamp();
    showAlert('Component executed at $timestamp');
  }
}

4. Constraints on Mixins

Mixins can have constraints to ensure they are only applied to classes that meet certain criteria. This is done using the on keyword.

Example:

Suppose you want a mixin that can only be applied to classes that extend StatefulWidget.

mixin ValidationMixin on StatefulWidget {
  bool validateEmail(String email) {
    return email.contains('@');
  }
}

Mixins vs. Inheritance vs. Composition in Flutter

Understanding when to use mixins compared to inheritance or composition is crucial for writing clean and maintainable Flutter code.

Inheritance

Use When: There is a clear “is-a” relationship.
Pros: Simple and straightforward.
Cons: Can lead to rigid class hierarchies and tight coupling.

Composition

Use When: You want to combine behaviors without establishing a parent-child relationship.
Pros: Greater flexibility, promotes code reuse without inheritance constraints.
Cons: Can require more boilerplate code.

Mixins

Use When: You want to add reusable behaviors to classes without using inheritance.
Pros: Promotes code reuse and separation of concerns.
Cons: Overusing mixins can lead to complex and hard-to-follow class behaviors.

Example Comparison:

Inheritance:

// Parent Class
class Animal {
  void eat() {
    print('Animal is eating.');
  }
}

// Child Class using Inheritance
class Dog extends Animal {
  void bark() {
    print('Dog is barking.');
  }
}

void main() {
  Dog myDog = Dog();
  
  // Using inherited method
  myDog.eat();   // Output: Animal is eating.
  
  // Using child class method
  myDog.bark();  // Output: Dog is barking.
}

Composition:

// Component Class
class Animal {
  void eat() {
    print('Animal is eating.');
  }
}

// Class using Composition
class Dog {
  final Animal _animal = Animal();
  
  void eat() {
    _animal.eat();  // Delegates to Animal's eat method
  }
  
  void bark() {
    print('Dog is barking.');
  }
}

void main() {
  Dog myDog = Dog();
  
  // Using composed method
  myDog.eat();   // Output: Animal is eating.
  
  // Using Dog's own method
  myDog.bark();  // Output: Dog is barking.
}

Mixins:

// Parent Class
class Animal {
  void eat() {
    print('Animal is eating.');
  }
}

// Mixin for Barking
mixin BarkMixin {
  void bark() {
    print('Dog is barking.');
  }
}

// Class using Mixins
class Dog extends Animal with BarkMixin {
  // Dog inherits eat from Animal and gets bark from BarkMixin
}

void main() {
  Dog myDog = Dog();
  
  // Using inherited method
  myDog.eat();   // Output: Animal is eating.
  
  // Using mixed-in method
  myDog.bark();  // Output: Dog is barking.
}

Common Use Cases for Mixins in Flutter

Logging and Debugging: As shown in the examples, adding logging capabilities across multiple widgets or services.
Form Validation: Sharing validation logic across different forms without duplicating code.
Animation Behaviors: Reusing animation setup and control logic in multiple animated widgets.
Theme Management: Applying consistent theming behaviors or utilities across the app.
Network Handling: Sharing network request methods or error handling across different services.

Note: Flutter Machine Learning & AI Courses

Why Mixins in Flutter is better and easy than Inheritance &Composition

What Are Mixins?

Key Characteristics of Mixins:

Note: Flutter Machine Learning & AI Courses

How to Implement Mixins in Dart/Flutter

1. Defining a Mixin

2. Applying a Mixin to a Class

3. Multiple Mixins

4. Constraints on Mixins

Example:

Mixins vs. Inheritance vs. Composition in Flutter

Inheritance

Composition

Mixins

Example Comparison:

Common Use Cases for Mixins in Flutter

Note: Flutter Machine Learning & AI Courses

Written by Hamza Asif

No responses yet