Using Flutter Packages since long?
Do you wish to contribute back?
Do you wish to publish your own package and help the community?ย
But don't know how?ย
No worries. I have your back.
In this blog, I will get you through each and every step of how to publish your own Flutter Package on the official Flutter Website pub.dev
Pre-Requisitesย :
- Passion For Helping
- Understanding of Flutter
- Git
So let's get our hands dirty!!ย ๐๐
A flutter package always has a class which returns a widget.
Also, the class must not have any hard-coded values.
All the functionalities which you want to provide to the user, create it as a property (variable) and create a constructor to get the value.
For example:
If you want the user to set the height of the container, create a property named double height
. Add in the constructor & then pass it to the height property of the Container.
class <class_name>{
double height;
class_name({this.height});
.
.
.
.
Container(
height:height,
.
.
.
),
}
Once the code is created, use it in an application to test it and get a better understanding.
So, let's start through the steps of how to publish the package!! ๐๐
Step 1: Start by creating new flutter package!!
- Open Android Studio
- Click on Create new Flutter Project
- Click on New Flutter Package
Step 2: Give the name of the project as the one you want your package to be named. Thus, the name of your project will be your package name.
Step 3: Put the project on Github. Keep the repo public.
Step 4: This is the most Important Step!!
Edit the Pubspec.YAML file.
- Add Description for the package (Minimum 20 words). This costs you points on pub.dev after publishing.
- Remove author as it is not used now.
- Add homepage. HomePage can be your own website or you can also give the Github Profile Page link.
-
Add repository. Don't do mistake in this!! If the link get's wrong,
issues
link on the pub.dev will not be generated. Here's an example:
Correct Link: https://github.com/AbhishekDoshi26/contactus
Wrong Link: https://github.com/AbhishekDoshi26/contactus.git
- Add Version Number. Whenever you update your package code, version number has to be changed.
Step 5: Write the code in the dart file. Here's an example of the code of a package named contactus
Step 6: Create Documentation. For Documentation, you need to use /// to provide the documentation for a particular property/method/class,etc. /// will create documentaion and // will be comment.
class ContactUs extends StatelessWidget {
///Logo of the Company/individual
final ImageProvider logo;
Also, after creating manual documentations to your classes, let's created the predefined documentation. Open Command Prompt in the package location and run dartdoc
command in terminal on your package location.
Step 7: Open the CHANGELOG.md
file and write the version number, publishing date and description in the file. Here's an example for the same:
## [1.0.0] - 16/04/2020.
Added Icons for all the social networks
Step 8: Create a file LICENSE.txt & add any license such as MIT License. You can get template of any license from the internet. You can refer the MIT License of contactus package.
Step 8: Create an Example.
- Inside the package folder itself, create a new flutter project, named as example. (Don't change the name. Name has to be compulsory example as it will be used in pub.dev)
- To use the package in the example, without publishing, add in the pubspec.yaml the following line:
package_name:
path: Complete path of the package on your computer.
- Here's the code snippet of how you can use contactus package or your own package in the example:
import 'package:contactus/contactus.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
bottomNavigationBar: ContactUsBottomAppBar(
companyName: 'Abhishek Doshi',
textColor: Colors.white,
backgroundColor: Colors.teal.shade300,
email: 'adoshi26.ad@gmail.com',
),
backgroundColor: Colors.teal,
body: Container(),
),
);
}
}
Step 9: Push all to the Github Repository
Step 10: Open Command Prompt on the repo location. Now run the following command:
flutter pub publish --dry-run
If any suggestions or warnings are encountered, do the required changes.
Step 11: If everything is perfect, run the following command to publish the package.
flutter pub publish
Tadaaaaaaaaaaaaaa!!!!!!!!๐๐๐ Your package has been published!!
Now, whenever you change anything in the code/any file of the package/example, you need to update the following files:
- pubspec.yaml (Version Number)
- CHANGELOG.md (Add new version, date & description)
Don't stop until you are breathing!!!
ย -Abhishek Doshi
Top comments (0)