Create a flutter package and publish it in pub.dev

Every flutter developers usually use flutter packages in their project. Usually, as a developer, I search about packages in pub.dev website for a package. Sometimes I thought that how can I published my own package on the website. Finally, I start to publish my first package. Contrary to my expectations, It was not a difficult task at all. So in this article, I describe all levels of creating and publish a flutter package.

In the first step:

you should create a new flutter project and select a flutter package among options like the below picture.

select flutter package among options

After that, you should set the name of your package and the description of this package. Note that, the project name, is the same name that was published on pub.dev website.

In the second step

You should write your package code in the lib folder. For example, my first package has a Stateless and a Stateful widget. some times you have not any widgets in your code, for example in my last package, I write a payment banking method that has no widget.

If your code has a widget, it is better to write a test project for it. So, you should write the below command in your terminal :

flutter create example

After writing this code in the project terminal, you have an empty project in your package. You can use your wroten package in this example project. After publishing the “main.dart” will show in the “example” tab of your package in “pub.dev”. if you want to create an example project for testing your package you should add the below dependency in your inner project’s pubspec.yaml.

dependencies:
  flutter:
    sdk: flutter
  your_package_name:
    path: ../

then you can change the config of android studio to use the example project for testing. you can do that using below video:

https://youtu.be/rpZFOKRJfUU

In the third step

After preparing your code and test it, you have to change something in your project before publishing the code.

1- Change License: you can add the below text in the file or using another license that you want.

MIT License

Copyright (c) 2021 Chris Edgington

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

2- Add homepage in your public.yaml file

homepage: https://github.com/alirezat66/idpay_payment_package.git

3- Create a good readme.md

all descriptions in the “read me” tab of pub.dev and the first of your GitHub repository are dependent on this file. So I try to describe something about that.

• if you want to add a bold title, you should add # at the beginning of the title: “#title”
• if you want to add a normal title, you should add ## at the beginning of the normal title:
  “##normal title”
• if you want to add some gif that shows your package(about packages that contain anything to showing), you simply can record your screen, convert your screen record to gif and add a folder on your project as “screenrecords” or anything else and put the gif file there. after that, you simply add the address in: “”
• for adding some budget in your description you can add it simply like:
  “[](https://pub.dev/packages/effective_dart)”
• if you want to add a list, you can add “*” at the beginning of any item.
• for adding codes in your readme.md you should use: “```" at the start and the end of your code.

Finally, your readme file is something like the below code. you can search about readme.md for more information or you can simply check the readme file of any project on Github.

# easy_animated_tabbar
[![pub package](https://img.shields.io/pub/v/rounded_loading_button.svg)](https://pub.dev/packages/easy_animated_tabbar)
[![style: effective dart](https://img.shields.io/badge/style-effective_dart-40c4ff.svg)](https://pub.dev/packages/effective_dart)

Maybe you want use a tabbar without any additional page so this package help you to make your tabbar.
In additional some tiems you want create a selectable button list.

![](screenshots/easyanimatedtab.gif)

## Getting Started
## You can use it simply way as : 
```
EasyAnimatedTab(
            buttonTitles: ['button1','button2'],
            onSelected: (index) {},
          ),
```
## Or add adittional options for custome it:
```
EasyAnimatedTab(
            buttonTitles: buttons,
            onSelected: (index) {},
            animationDuration: 500,
            minWidthOfItem: 70,
            minHeightOfItem: 40,
            deActiveItemColor: Colors.grey,
            activeItemColor: Colors.redAccent,
            activeTextStyle: TextStyle(color: Colors.white, fontSize: 14),
            deActiveTextStyle: TextStyle(color: Colors.redAccent, fontSize: 14),
          ),
```
## This package has below options:
* List<String> buttonTitles : the titles list that show
* void Function(int) onSelected : that return selected index
* int selectedIndex : that is starter selected item index the defualt value is 0
* int animationDuration : the duration of animation for changing between current selected item and last one
* double minWidthOfItem : this is min width of items, the defualt value is 80
* double minHeightOfItem : this is min height of items, the defualt value is 40
* Color deActiveItemColor : color of deactivated items
* Color activeItemColor : color of activeated items
* TextStyle activeTextStyle : style of activated item's text
* TextStyle deActiveTextStyle: style of de activated item's text
* double activeBorderRadius : border radius of active item
* double deActiveBorderRadius : border radius of de active item
## You can add your issue to this repository to help growing this package  
This project is a starting point for a Dart
[package](https://flutter.dev/developing-packages/),
a library module containing code that can be shared easily across
multiple Flutter or Dart projects.

For help getting started with Flutter, view our 
[online documentation](https://flutter.dev/docs), which offers tutorials, 
samples, guidance on mobile development, and a full API reference.

In the fourth step

Now, you are ready to publish your first package. First, you can sign in to pub.dev.

After creating an account on pub.dev, you can push your code in your GitHub repository. you can check the first page of your GitHub to view your readme and change it if you want.
If you are sure about publishing your package you can publish it with this command in your terminal :

flutter packages pub publish

if your code has no bugs, you probably see something like the below picture after some seconds:

if your code has not any bugs, you can watch something like this.

you have to write y and press enter, if it will be your first access to pub.dev from your terminal, it gets access with your Gmail. if you logged into your Gmail in the pop-up dialog, after some seconds you can watch the below image:

the success message for publishing

That's the finish. your first package was published. after about 2 minutes you can search for your package in the pub.