Flutter: the power of software package — Part II

Badr Kouki
Geek Culture
Published in
4 min readMay 24, 2021
Photo by Olav Ahrens Røtne on Unsplash

After we have discussed all the benefits of software packaging and how it can be a good choice for companies to grow their business and get new clients

If you don’t read the first part you can find it in this link Flutter: the power of software package — Part I | by Badr Kouki | May, 2021 | Medium

In this part we will get our hands dirty and implement an example of software packaging using none other than Flutter, so prepare your workspace to start but first we will se a brief recap on software packaging

1 — Software packaging and Programmable apps

The idea behind software packaging or programmable apps is to build apps that itself can be programmed in order to quickly generate new version or new whole different app to serve all the clients needs.

This concept is very beneficial for companies as well as for developers to enhance their skills and get their careers to the next level as an experienced developer not as any usual developer.

The rest of this article we are going to build an example of programmable apps using Flutter

2 — What we are building?

In order to understand technically how software packaging is working, in this example we will build two sample apps containing an authentication screen but with a third module that will be shared between the two apps.

The screens below describes the final result.

So the first step is building the common module and after that we can build the two apps based on that package.

3 — Create the package (plugin)

To create a new package in flutter we execute the command below with “custom_pack” the name of the package

flutter create --template=package custom_pack

the project will contains only lib and test folders, you need to find something like this in your new project

Folders and files hierarchy in the new created project

In this package we will create our custom widgets that will be integrated in different apps but with different parameters.

In this example we will just create a custom input field and a custom button but anything can be found in this package (other complex widgets, business logic, native code …)

Custom button widget

Custom text field widget

Also you can find the full package in this repository if you found problems implementing your own

4 — Software packaging first example app

After creating to package the next step is to use it to create the apps we want with all the configuration needed.

A — Add our custom package

There’s many ways to integrate your custom package as a dependency. In this example we will use the github to reference our package.

In pubspec.yaml you can do the following to reference any flutter package located in Github

custom_pack : Is just a name given to the package reference but it’s better to give it a significant name (the package’s name)

B — Start using the package

In this example we will just create a simple authentication screen using both custom text field and custom button widgets.

Also you have full access to the whole project here in this repository

5 — Software packaging second example app

As we’ve done all the steps in the first project we will also integrate the same package but the parameters given to CustomTextField and CustomButton that are different here.

The link here give you the full code of the second app, you will find it similar to the first one.

6 — Conclusion

Maybe you will find the example we’ve done here it’s little too easy and simple but the main purpose of this article is to explain to power of software packaging.

As we saw throughout the whole article we have just done little work in the package by creating two custom widgets (Button, TextField) and the rest is referencing the package and using any widget from it the way we want.

By getting this small picture of software packaging you can imagine a bigger situations like for example create a whole custom widgets (sliders, buttons…) that are company-specific or following a custom chart and in order to create those advanced components every time the firm launch a new project you and your team can create a whole private framework and reference it and use anything you want from it.

As we talked in the first part, software packaging is not only for graphical components, you can also add business logic to it as well as an advanced calculations in order to use it later in some projects.

“You might not think that programmers are artists, but programming is an extremely creative profession. It’s logic-based creativity” — John Romero

I hope this article have helped you learning new information. Thank you for giving me your attention. Happy Coding!

--

--

Badr Kouki
Geek Culture

With more than 2 years of experience, Kouki Badr is a Flutter, Android and iOS developer. Bachelor degree in computer science and artificial intelligence.