# EnvBanner

I want to share with you my experience creating and publishing my first Flutter package on **pub.dev**. It is [env\_banner](https://pub.dev/packages/env_banner), a widget that helps to display a label with the application environment name and version number in a corner of the screen.

### Why did I decide to create this package?

Well, it turns out that in my work we have several versions of the same application for different environments, and sometimes it is difficult to distinguish them when we have them installed on the same device. Also, we wanted to avoid confusion between test users and developers when reporting bugs or requesting new features. And although I had previously written [this article](https://melvinsalas.dev/customised-banner) about Flutter's generic banners, I didn't like them because sometimes the text was covered by the symbols in the system's notification bar.

![How to Remove Debug Banner in Flutter – TAGNISM](https://tagnism.com/wp-content/uploads/2021/08/debug_banner_frame_cropped-480x272.jpg align="center")

So I came up with the idea of creating a widget that would not only be displayed in a different position but would allow the name of the environment to be displayed clearly and visibly, but without interfering with the user interface.

### The process

Creating the package was quite easy, thanks to the excellent documentation and tools provided by Flutter. The first thing I did was to create a new project using the command

```powershell
flutter create --template=package env_banner
```

This generated a basic structure with the necessary files for the package, such as the **pubspec.yaml**, the **README**, the **CHANGELOG** and the **LICENSE**. Then I wrote the widget code in the `lib` folder, using some basic Flutter widgets like `Container`, `Text` and `Align`. I also added some optional parameters to customize the colour, size and position of the label.

To test the widget, I created a sample application in the example folder, using the `flutter create example` command. There I was able to import the package with `import 'package:env_banner/env_banner.dart'` and use it in the main widget of the application.

The result was something like this:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1682045753363/32f2dd2e-fff9-4700-bfa0-f53650ffb967.png align="center")

Once I had the widget working and tested, the next thing to do was to publish it to [pub.dev](http://pub.dev), the official Flutter and Dart package repository. To do this, I had to follow a few steps:

* Make sure that the `pubspec.yaml` had all the required information, such as the name, description, version, authors and dependencies of the package.
    
* Run the `flutter pub publish --dry-run` command to verify that there were no errors or warnings when publishing the package.
    
* Run the `flutter pub publish` command to upload the package to [pub.dev](http://pub.dev). This required entering my Google email and password to authenticate.
    
* Wait a few minutes for the package to be processed and published to [pub.dev](http://pub.dev).
    

And that's how I published my first Flutter package on [pub.dev](http://pub.dev). It was a very rewarding and fun experience, and I hope it will be useful for other developers who want to showcase their Flutter application environment. If you want to see the source code for the package, you can find it at [https://github.com/melvinsalas/env\_banner](https://github.com/melvinsalas/env_banner). You can also leave your comments, suggestions or bug reports in the issues section.

**Thanks for reading!**