Mixin and extend in Flutter, E-Com App 7

What is the difference between mixin and extend in Flutter? Let’s understand the difference because we’ve been building an e-commerce app.

As a result, we don’t want to skip any step.

The mixin keyword plays an important role in Dart, as well as in Flutter. However, the extend keyword is quite common. Because we’re more or less familiar with the concept of inheritance. 

We know that a child class can extend all the attributes of a parent class. For that reason we see a Widget tree in Flutter. Also we see code snippets as follows.

class ProductDetailScreen extends StatelessWidget {
  static const routeName = '/product-detail';

  /// product detail page
  ///
....

In the above code we see our custom widget extends a Stateless widget. 

As an outcome, it gets all its properties and methods. 

The custom widget also can override any method as it overrides the build() method.

Probably that is a common scenario. We understand that.

However, a beginner may find the concept of mixin perplexing.

Why?

Because, apparently it appears they play the same role.

Instead of the keyword “extend” we use “with” when we decide to use mixin.

For example in our model class we have used it as follows.

import 'package:flutter/material.dart';

import 'product.dart';

class Products with ChangeNotifier {
  final List<Product> _items = [
    Product(
      id: 'p1',
      title: 'Smart Phone',
      description: 'A Smart Phone - get big Discount!',
      price: 29.99,
      imageUrl:
          'https://cdn.pixabay.com/photo/2015/12/13/16/02/ios-1091302_960_720.jpg',
    ),
...

If we use “extend”, it also works. Then what is the difference?

Let’s see a code snippet in Dart to understand the difference.

mixin Intelligence {
  int iq = 120;
  void canDecide() {
    print('I can take decisions on my own...');
  }
}

class Machine {
  bool isIntelligent = true;
  void canWalk() {
    print('I can walk.');
  }
}

class Robot extends Machine with Intelligence {
  int age = 2;
  void canTalk() {
    print('I can Talk. Ask me questions.');
  }
  
  Robot(this.age);
}

main() {
  Robot robo = Robot(10);
  print(robo.age);
  print(robo.iq);
  print(robo.isIntelligent);
  robo.canDecide();
  robo.canTalk();
}

The above code will explain the difference between mixin and extend.

We have used both for the Robot class. Right? 

Firstly, the Robot class is a child class of Machine class as it extends its all attributes. As a result it could have overridden the method also.

We didn’t do that though.

But we have used the Intelligence class as a mixin. 

The question is why did we do that?

We cannot extend more than one class

Yes, primarily that’s the reason why we use “with” instead of “extend”. 

Although some programming languages allow multiple inheritance, Dart doesn’t allow it.

Therefore, we need to use the “with” keyword and we can add as many classes as we want.

Now you may ask, we can use multiple classes and build a widget tree like Flutter. In that way we can use multiple inheritance in an indirect way.

Yes, certainly we can do that, there are other ways too, which we will discuss later.

But the immediate reason is we can avoid code duplication on the first hand. Secondly, we can use the “mixin” as a utility function, limiting its usage with a class or sub-classes.

10
120
true
I can take decisions on my own...
I can Talk. Ask me questions.

Keeping these core concepts in mind in the next section we will discuss abstract class and interface in Dart and Flutter.

So stay tuned. 

Always be happy. Best wishes.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

Courses at Educative

GitHub repository

Python and Data Science

Twitter