Publishing a Flutter plugin

by ·Comments Off on Publishing a Flutter plugin

Setting up the code repository

  • First and foremost, decide a unique name for your Flutter package by searching https://pub.dev/flutter/packages and ensuring your package name is not already taken. Let’s call this package <mypackage>
  • Create a new repository in github, bitbucket or some such online code repository system. It is preferable to name this repository the same as the package name. Let’s call this repo <mypackage> For now, keep this repository ‘private’
  • Open VS Code editor and click View-Command Palette-git clone
  • Provide the name of the repository URL that you just now created. Assuming your code repository is hosted on github, this URL will resemble https://github.com/<your user id>/<mypackage>.git
  • This will clone the repository on your local drive in a folder you specified during the above clone operation
  • Make a test commit of any file and test a push to the remote repository, to ensure we are all set up nice and proper
  • Now, let us go for the package implementation – the key part of the entire package!

Package implementation

  • In VS Code, open the terminal and navigate to any folder other than the mypackage folder you just now created and cloned the repository onto
  • At the command prompt, type in the below command
flutter create --template=plugin mypackage
  • This will create a Flutter package project in a new folder under the current working folder of the command prompt
  • Copy all subfolders from this folder to the mypackage folder
  • Implement your package logic in lib/<mypackage>.dart file
  • Implement your example usage project in example/lib/main.dart
  • Run this project on your device to ensure everything works fine and the example project runs on your device
  • If everything runs fine, set debugShowCheckedModeBanner: false in your example/main.dart under MaterialApp to hide the debug banner in the running app. This will be needed before publishing, as you will see next

Publishing the package

  • Run the example app and take as many screenshots as you need for your package instructions
  • Upload these screenshots directly to the root folder of the package. For purposes of this instruction, let us assume you have one screenshot called ‘mypackageexample.jpg’
  • Create a README.md file with the below typical contents
    • Description of your package below the # <mypackage> header
    • Add the screenshot under this using the tag. Play around with the height as needed
    • <img src=”https://github.com/<your user id>/<mypackage>/raw/master/<mypackageexample.jpg>” height=”480px” >
    • Add an ## Installing section with details of how to reference/install your package. Enclose your instructions within the “`yaml and “` delimiters
    • Add a ## Example usage section with code details of how one would typically use your package. Enclose your code within the “`dart and “` delimiters
    • Add a ## Features section with a bulleted list of features available in your package. Use * to denote each bullet on a different line
    • Add a ## License section with a reference to the licensing terms of your package
  • Create a LICENSE file with the licensing terms of your package. You can typically copy the license text from any existing packages or from Apache website
  • Edit your pubspec.yaml for the following data
    • description – make your description elaborate
    • version – This is the version number that will show up on Flutter pub website. Early versions are usually numbered less than 1.0.0. Anything from 1.0.0 is considered production-ready
    • homepage – Provide the link to your code repository, typically will be https://github.com/<your user id>/<mypackage>
    • environment – ensure minimum Dart version is specified based on what Dart version features you use in your package implementation
  • At this time, you’re nearly ready to publish your package! Just a few more steps…
  • Do a dry run publish of your package by opening the terminal and typing 
flutter pub publish --dry-run
  • If everything is reported good, go back to your code repository and make it ‘public’ if you would like to open up your code for collaborative edits by other developers. Else, no action needed
  • On the terminal, type in
flutter pub publish
  • You will be prompted with a URL to visit to authenticate yourself before the final publishing happens
  • After authentication, you will be prompted to upload your package and then you will see “Successfully uploaded package”

Hurray!!! You just published your package for the Flutter world to use and benefit from. Feel proud…

Spread the message