Creating Custom Reusable Widgets in Flutter
Sep 14 2022 · Dart 2.18.0, Flutter 3.3.0, Android Studio Chipmunk 2021.2.1 & VS Code 1.70.2 Universal
Part 1: Creating Custom Reusable Widgets in Flutter
01. Get Introduced to Custom Widgets
Notes: 01. Get Introduced to Custom Widgets
Prerequisites include a Flutter installation with VS Code or Android Studio and basic knowledge of using Flutter widgets. The Flutter UI Widgets course is a good starting point if you want to learn about Flutter widgets.
The students materials have been reviewed and are updated as of September 2022.
The update material uses null safety and also proper use of const and final keywords as per the latest Flutter guidelines. This is to encourage the students to use the latest Flutter best practices.
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
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
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.
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
The Flutter plugin in Android Studio automatically created a new widget from the
Column and its descendants.
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.
- Custom Shapes
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
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
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.