Creating Custom Reusable Widgets in Flutter

You’ve probably heard what i’m about to say right now a million times. You’ve read it in every Flutter article, heard it on videos and even in the Flutter documentation.

“In Flutter, Everything is a Widget.”

Now that I’ve displayed my allegience to the FLutter community once more. Wouldn’t it be nice to know how to make your own custom widgets? Okay, I know you’ve created your custom widgets a dozen times…but wouldn’t it awesome to know how to make those widgets reusable?

With reusable widgets, you dont need to copy and paste portions of the same code in different places. This is not a scalable approach because a slight change in requirements would make you update the piece of code in multiple places.

We’ll be making use of the DRY priciple which stands for “DONT REPEAT YOURSELF.” With custom reusable widgets, you could create or refactor portions of your code which could be reused by other parts of your app or which could be shared to the world as a package.

Speaking of refactoring, as you might have known by now, Flutter’s UI approach for laying out widgets uses the concept of composition. And this means that widgets are composed of other widgets and this creates a tree-like structure. If you think about this, the widget tree can be very long with many nested code. (Fade second tree) We could extract portions into smaller widgets to make our code base more readable. Let’s see how to do that

Demo

Open up the starter project for this episode inside Android Studio. Head to the pubspec.yaml file and do a pub get to get the required packages. Then go ahead and run it in debug mode if you haven’t.

The sample project is a podcast app that let’s you listen to yoga and wellness related topics. The starter project already includes some code that takes care of some functionalities that we don’t need to worry about. And that’s why we got the underlying packages we needed for this.

Open up the about_screen.dart file. As you can see, this widget is composed of other widgets. This screen could grow larger than this when we add more widgets. And this could lead to having more nested widgets. To help me out, i added comments to let me differentiate the start of a UI portion. This is not the best approach. We could simply extract the portions to separate widgets.

But before we do that, we need to group these section into different Columns. So i’ll select the first section then press Alt + Enter on Windows or Option + Enter if you’re on Mac. This opens up the Flutter Fix menu. Then select Wrap with Column

Next, place your cursor on the Column widget then right click to show the context menu. Then choose Refactor ▸ Extract ▸ Extract Flutter Widget…. This is the overview section, so name it AppOverview. The Flutter plugin in Android Studio automatically created a new widget from the Column and its descendants. The AppOverview widget is now a Custom widget. We’ll be using this technique to refactor out reusable portions of our code base as we proceed in this course. Let’s extract other portions.

Now, we have an easy to read about widget which contains other custom widgets which we just created. Now, if you noticed, right below the “Extract Flutter Widget” option, we have the “Extract Method.” This option extracts the portion of code into a method instead of a widget class. This is also fine but extracting to a widget has some advantages over extracting to a method. The main advantage for us here is that we can reuse extracted widgets inside other widgets. We’ll be using a mix of the two approaches in this course.

There are different ways we could create custom widgets in Flutter.

• Composition
• Custom Shapes
• RenderObjects

We could compose existing widgets to build a more complex widget. If the widgets in Flutter library can’t achieve the UI we want, then we could draw it on a canvas using the CustomPainter class. Then if you really want to go low level and create a custom widget like how the Flutter framework does, then you could make yours using RenderObjects.

We’ll be focusing on the easiest approach in this course and that’s composing already made flutter widgets to create our own custom widgets.

To do this, we would be taking the following steps:

• Design the widget
• Decompose the design
• Build the basic widget
• Customize the look
• Determine the user interaction
• Define the parameters/dependencies
• Implement the parameters/dependencies
• Test the widget

Let’s start working on the first four steps in the next epiosde.