Intro

In this guide, I will show you how to build a reusable widget with Flutter and Dart.

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 should 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.

Coding the reusable screen

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

types for , and One IconData type for our titleIcon

type for our 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 StatelessWidget build 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.

Implementing the reusable screen

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.

We can now reuse this widget through the app!