How to build a reusable widget with Flutter and Dart

Originally published by Jeroenouw at https://levelup.gitconnected.com

Introduction

The Dart language is strongly typed and created by Google. It has similarities with JavaScript, Java, and C. So if you are working with one of these, then you could get comfortable with Dart very quickly.

Flutter is a framework written in Dart to write cross-platform native apps easily and fast. You write one application that can be built to both an Android (Java or Kotlin) or iOS (Objective-C or Swift ) mobile application.

For continuing this article and implementing our reusable widget, it is recommended to have;

Basic programming skills
Flutter SDK 1.7+
Android/iOS emulator or real device

Widget

In Flutter everything is a Widget. It is a Dart class that acts basically the same as a component. You have two kinds of widgets:

Stateless widget — this does not have a state
Stateful widget — this does have a state

For the reusable widget example, I will show only the stateless widget:

Reusable stateless widget

Instead of every time making an entirely new screen, we are going to make a reusable screen (see image below) where we can change the following things:

Top page title
Card title
Card subtitle
Card icon
The action of the cancel button
The action of the proceed button

To this new screen, we can navigate and pass all our custom data.

Reusable screen code

For our example, we use the material styled widgets. Let’s start by making a new screen, which is a class called ReusableScreen. We are extending the StatelessWidget because we don’t have any state in our screen.

In the image below is shown that we add six properties which all have their own type.

Three String types for screenTitle , tileTitle and tileSubtitle
One IconData type for our titleIcon
Two Function types for the cancelButtonAction and proceedButtonAction

All of our properties are final because we only want to pass the data once on our screen.

Inside the ReusableScreen constructor, we refer to our local properties and make them required by adding @required before of it.

Next we override the StatelessWidgetbuild method. We return a Scaffold where we pass our screenTitle into the AppBar .

In the body we have an Card which has a child a Column. We set the mainAxisSize to a minimal and pass multiple children widgets.

At top of the card, we want a ListTile widget where we can pass our tileIcon , tileTitle , and tileSubtitle .

On the bottom of the card, we want to buttons which both contain an action. Here pass the cancelButtonAction and proceedButtonAction both on when the certain button is pressed.

Somewhere in our application, we want to navigate to our ReusableScreen. In this case, we have an onTap method (which can be found in a button). In this method, we use Flutter’s Navigator widget and want to push our screen so we can visit it. The navigation can be done in the way you want.

Next we put our ReusableScreen widget inside the push method. Now we can pass our custom arguments, see image below.

Thank you for reading! My Github. Final code of the ReusableScreen can be found here.

Thanks for reading ❤

If you liked this post, share it with all of your programming buddies!

How to build a reusable widget with Flutter and Dart

Introduction

Widget

Further reading