👨🏼‍💻Flutter| Using Super Constructor in Custom Widget Design(New feature of Flutter 3.0)

Emre Ugur Yalcin
3 min readJun 17, 2022

--

Flutter 3.0

Hello everyone 👋 . As someone who has been writing flutter for about 3 years, I will be with you from now. 🙂

Introduction

Flutter 3.0 was released with Dart 2.17 on 5 May 2022. Of course this new version came with some beautiful changes. One of them is “Super Constructor” feature which will make our work easier when writing a constructor and shorten the code even more.

Let’s look at how to use this new feature by designing custom widgets together:

Implementation

We will take care to write clean code while creating custom widgets. The important part is how to use the “Super Constructor” that came with Dart 2.17.

1.A Simple Example

Let’s see how the super constructor shortens the code:

2.Base Widget Creation

Now let’s create our own custom widget and use this new feature.

We will use this base widget when creating google button:

3.Google Button

We will create the Google button from the SocialButtons widget. Of course using the super constructor:

Let’s take a look at the old way:

It’s actually that simple :)

4. Social Buttons

We will create the Google button as the Social Buttons widget’s constructor. The SocialButtons class will derive from the BaseBody widget.

First, let’s see how the super constructor is used:

We can directly put the constructor parameters from the base widget into the constructor of the widget we just created. This makes us do the same work by writing less code.

Let’s take a look at the old way:

As seen above, we wrote extra code in the old fashioned way. We have derived only one widget here, but as the number of derived widgets increases, it will be seen more clearly how “Super Constructor” reduces coding.

Let me share the whole code so that there is no question mark in mind:

5.Submit Button

We saw the SubmitButton widget in the body() section of the SocialButtons widget. Of course, Its not ok without sharing what this widget is:

6.Testing

We created our button. Now let’s see how to use this in the project:

Google Button Testing

Conclusion

The Super Constructor feature that came to Flutter 3.0 with Dart 2.17 will make our work easier. You can shorten the code you write by using this feature in your projects.

I wish everyone a pleasant Flutter week :)

References

--

--