Master Mixin vs. Inheritance: A 5-Minute Flutter Guide

When developing Flutter apps, you often need to share functionality between multiple classes. Mostly, inheritance is used for this, but it comes with some limitations. The Mixin pattern in Flutter provides a better alternative, allowing you to reuse code more effectively. Let’s break it down with a simple example.

A Simple Comparison

Imagine you are designing classes for animals. All animals can eat, so they inherit from an Animal class. However, only birds can fly, so let’s see how we can do this with inheritance.

Using Inheritance

class Animal {
  void eat() {
    print("Eating...");
  }
}

class Bird extends Animal {
  void fly() {
    print("Flying...");
  }
}

class Dog extends Animal {}

void main() {
  Bird bird = Bird();
  bird.eat(); // Eating...
  bird.fly(); // Flying...

  Dog dog = Dog();
  dog.eat(); // Eating...
}

Using Mixin

Alright, what if we want to add flying ability to another class, say an Insect? We can’t add it to Animal because all animals can’t fly. Flutter Mixin is a perfect candidate for Flying ability, let’s see how:

mixin Flyable {
  void fly() {
    print("Flying...");
  }
}

class Animal {
  void eat() {
    print("Eating...");
  }
}

class Bird extends Animal with Flyable {}
class Dog extends Animal {}

void main() {
  Bird bird = Bird();
  bird.eat(); // Eating...
  bird.fly(); // Flying...

  Dog dog = Dog();
  dog.eat(); // Eating...
}

Why Use it?

Better Code Reusability: It lets you share behavior between classes, suited for specific reusability.
Avoids Deep Inheritance Chains: Flutter discourages deep inheritance trees. Mixin keep the structure flat and modular.
More Flexibility: A class can use multiple mixin, unlike inheritance where you’re restricted to a single parent class.

When to Use it?

When you need to share behavior across multiple, unrelated classes.
When inheritance doesn’t make sense (e.g., Kite and Bird both need a fly() function but shouldn’t inherit from each other).
When keeping your Flutter code clean, isolated and optimized.

See a more complex example of Mixin to solve iOS Web keyboard issues in flutter.

Diamond Problem

Flutter (or more specifically, Dart) does not support multiple inheritance. A class can only extend one other class. This restriction exists to avoid the diamond problem, which can lead to ambiguity in method resolution.

Let’s see how multiple inheritance can lead to diamond problem or ambiguity.

class Animal {
  void eat() {
    print("Eating...");
  }
}

class Bird extends Animal {
  void eat() {
    print("Bird is eating...");
  }
}

class Mammal extends Animal {
  void eat() {
    print("Mammal is eating...");
  }
}

// Problem: If Dart allowed multiple inheritance, this would be ambiguous.
class Bat extends Bird, Mammal {}

void main() {
  Bat bat = Bat();
  bat.eat(); // Should it use Bird's or Mammal's eat()?
}

This code won’t compile in Dart because it doesn’t support multiple inheritance. Now you now know why because the object “bat” does’t now whose “eat” method it should use since “eat” is being inherited from “Mammal” as well as “Bird”.

Bonus ⭐️⭐️⭐️⭐️⭐️

Interested in more best practices for writing production quality clean code with flutter? Try this to learn 6 pro tips to boost the performance of your app.