First pub.dev Package: Beginners Guide

First pub.dev Package: Beginners Guide

Are you curious about publishing a package on pub.dev? While developing an application, you might realize that a particular design pattern could be useful as a reusable package instead of recreating it for every project. If so, you’re in the right place. Let’s explore.

What is Pub.dev:

It is the official package repository for Dart and Flutter packages. Google supports it and serves as an open-source platform where developers can publish and access packages.

Most used packages:

1. shared_preferences
2. firebase_auth
3. google_sign_in
4. url_launcher
5. cloud_firestore
6. jiffy

Key Features:

Open Source — Supported by Google

Community driven — Developers from all over the world contribute to this platform Standardized license — It comes under BSD 3-Clause License.

Quality score — Pubdev itself provides a quality score for your code and the document you made and scales your product

Flawless integration — Seamlessly you can integrate with your dart/flutter applications.

Now, let’s create a package in Flutter

Here’s the correct syntax to create a Flutter package:

flutter create --template=package package_name

Then, we need to set up the pubspec.yaml, this page is mainly used for representing the dependencies, package name, your first version of the package, and the Homepage URL (github source repo)

name: gradient_textfield
description: A new Flutter package project which helps the developer to ease the custom textfields
version: 0.0.1
homepage: https://github.com/naveeramesh/custom_textfield

Structure your codebase to include README, LICENSE, and CHANGELOG.md files.

The license can be a “BSD-3 Clause license” which is completely optional to use this particular license, feel free to use any license you prefer for your package.

Code dev:

The next major step is to develop your code in the lib folder. Make sure your code follows a good practice (code reusability, well documented).

Sample Code:

import 'package:flutter/material.dart';

class Gradienttextfield extends StatefulWidget {
  Gradienttextfield(
      {Key? key,
      required this.height,
      required this.width,
      required this.colors,
      required this.text,
      this.radius,
     required this.controller,
      this.fontColor,
      this.fontWeight,
      this.fontSize})
      : super(key: key);
  double? height;
  double? width;
  List<Color> colors;
  String? text;
  double? radius;
  TextEditingController? controller;
  Color? fontColor;
  FontWeight? fontWeight;
  double? fontSize;
  @override
  _GradienttextfieldState createState() => _GradienttextfieldState();
}
class _GradienttextfieldState extends State<Gradienttextfield> {
 
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(left: 20.0, right: 20),
      child: Container(
        height: widget.height,
        width: widget.width,
        decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: widget.colors,
            ),
            borderRadius: BorderRadius.circular(widget.radius ?? 20.0)),
        child: TextField(
          controller: widget.controller,
          decoration: InputDecoration(
              hintText: widget.text,
              hintStyle: TextStyle(
                  color: widget.fontColor ?? Colors.black,
                  fontSize: widget.fontSize ?? 18,
                  fontWeight: widget.fontWeight ?? FontWeight.bold),
              enabledBorder: const OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.transparent)),
              focusedBorder: const OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.transparent))),
        ),
      ),
    );
  }
}

This code shows a Flutter Stateless Widget for a login/signup screen that uses a custom Gradienttextfield widget.

The widget is a StatelessWidget named Login that creates a Scaffold

• Inside the build method, it creates a TextEditingController for the email field
• The main UI element is a Gradient text field with these properties:

radius: 40 (border-radius)

height: 60, width: 400 (dimensions)

colors: gradient from grey to white

text: “Email” (placeholder/label)

font styling: black color, size 15, normal weight

The code appears to be part of a larger form or login interface, showing just the email input field implementation.

Once completed the development is time to document the package make sure to include these mandatory files before publishing:

README

LICENSE

CHANGELOG.md

Github:

Create a public GitHub repository and push your code. You can customize your repository’s README to showcase your package effectively.

What Next :

After completing your code, focus on your README and include these essential details:

1. Brief about the package
2. Installation method
3. Code sample
4. Output of your package
5. Upcoming releases

Structure:

Publish:

Run this command in your terminal

dart pub publish --dry-run

This command checks for any warnings before publishing.

Publishing gradient_textfield 1.0.0
.gitignore CHANGELOG.md
lib
src
gradienttextfield.dart gradienttextfield.dart
pubspec.yaml Package has 0 warnings.

Then run:

dart pub publish

When running this command for the first time, you’ll need to authenticate your Google account with pub.dev. Simply copy the URL from the terminal and paste it into your browser to authenticate. Once completed, your package will be published.

After publishing, you’ll receive a confirmation email, and the package will appear in your dashboard.

Conclusion:

Publishing a package is an exciting step in your Flutter development journey. It allows you to contribute to the developer community while creating reusable, well-documented solutions. By following the guidelines mentioned in this blog, you can ensure a smooth publishing process, from structuring your package to authenticating your account.

Remember, a strong README, clear documentation, and clean code are crucial for a successful package. Keep iterating on your package based on community feedback and update it with new features or improvements. Happy coding!

About The Author:

Naveena J is a software Developer at Codestax, with a background in networking from my time at Nokia. My passion for technology led me to shift my domain from networking to development, where I now focus on building solutions with modern tech stacks. I have a strong interest in design and a deep enthusiasm for Flutter development, constantly exploring new frameworks and tools to enhance my skills. Always eager to learn, I stay updated on emerging technologies to create innovative and efficient applications.

About CodeStax.Ai

At CodeStax.AI, we stand at the nexus of innovation and enterprise solutions. We offer technology partnerships that empower businesses to drive efficiency, innovation, and growth, harnessing the transformative power of no-code platforms and advanced AI integrations.

But what is the real magic? It’s our tech tribe behind the scenes. If you have a knack for innovation and a passion for redefining the norm, we have the perfect tech playground. CodeStax. Ai offers more than a job — it’s a journey into the heart of what’s next. Join us and be part of the revolution that’s redefining the enterprise tech landscape.