A Step by Step Guide on How to Create and Publish Your Own Flutter Package

If you’re interested in contributing to the Flutter community, writing and publishing your own Flutter packages is a great way to do it. In this article, we’ll walk you through the process of creating a Flutter package from scratch and publishing it to pub.dev, so you can share your own code with others. We’ll CREATE and PUBLISH a package named fl_bootstrap, which will make responsiveness in flutter web easier. This is the output.

One of the critical advantages of Flutter is its support for packages, which are reusable components that can be shared across multiple projects.

Part 1: Creating the Package

1. Open your preferred code editor and create a new Flutter package by running the command flutter create --template=package fl_bootstrap. This will create a new package with the name fl_bootstrap.
2. In the lib folder, create a folder called src and inside it create a new file called responsive_row_column.dart. This file will contain the logic for arranging the three widgets based on the device screen size.
3. In responsive_row_column.dart, define a new class called ResponsiveRowColumn that extends StatelessWidget. This class will take three widgets as input and arrange them in rows or columns based on the device screen size.

import 'package:flutter/material.dart';

class ResponsiveRowColumn extends StatelessWidget {
  final Widget widget1;
  final Widget widget2;
  final Widget widget3;

  ResponsiveRowColumn({
    required this.widget1,
    required this.widget2,
    required this.widget3,
  });

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth < 600) {
          return Column(
            children: [
              widget1,
              widget2,
              widget3,
            ],
          );
        } else {
          return Row(
            children: [
              widget1,
              widget2,
              widget3,
            ],
          );
        }
      },
    );
  }
}

The ResponsiveRowColumn widget takes three Widget objects as input and checks the width of the device screen using LayoutBuilder. If the screen width is less than 600 pixels, the widgets are arranged in a Column. Otherwise, they are arranged in a Row.

4. Create a new file called fl_bootstrap.dart in the lib directory of the package. This file will export the ResponsiveRowColumn class.

library fl_bootstrap;

export 'src/responsive_row_column.dart';

5. Create a new file called example.dart in the root directory of the package. This file will contain an example of how to use the ResponsiveRowColumn widget.

import 'package:flutter/material.dart';
import 'package:fl_bootstrap/fl_bootstrap.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),
        body: Center(
          child: ResponsiveRowColumn(
            widget1: Container(
              width: 100,
              height: 100,
              color: Colors.red,
            ),
            widget2: Container(
              width: 100,
              height: 100,
              color: Colors.green,
            ),
            widget3: Container(
              width: 100,
              height: 100,
              color: Colors.blue,
            ),
          ),
        ),
      ),
    );
  }
}

In this example, we import the ResponsiveRowColumn widget from the fl_bootstrap package and use it to arrange three Container widgets with different background colors.

6. Finally, run the command flutter pub get to install the dependencies for the package. Then, run the command flutter create . to generate the necessary files for the package.

That’s it, chief cook! You’ve created a flutter package

Part 2: Publishing the Package

1. Before publishing your package, you need to make sure that your code is clean, well-structured, and documented. You should also test your package thoroughly to make sure that it works as intended.
2. Go to the pub.dev website and sign up for an account if you don’t already have one.
3. In your package directory, create a pubspec.yaml file if you haven't already. This file is used to configure your package and its dependencies.

name: fl_bootstrap
version: 1.0.0
description: A Flutter package that arranges three widgets in rows or columns based on the device screen size.
homepage: https://github.com/yourusername/fl_bootstrap
repository: https://github.com/yourusername/fl_bootstrap
environment:
  sdk: ">=2.12.0 <3.0.0"
dependencies:
  flutter:
    sdk: flutter

In this file, replace yourusername with your GitHub username. Also, make sure that the version number is appropriate for your package.

4. Create a README.md file in your package directory. This file will contain information about your package and how to use it.

5. Also, create a LICENSE file in your root directory (It is important for publishing to pub.dev). You can use this as a sample and make modifications to it.

Once you’ve done these, you can publish your package using the “pub publish” commands. These commands will upload your package to the pub.dev repository and make it available for other developers to use.

Run the first command in your terminal

dart pub publish --dry-run

This command performs all the checks and verification on your package to ensure they’re ready for upload. You’ll also be prompted to enter your pub.dev credentials (i.e. your username and password)

If no error occurs, then proceed to the next command

dart pub publish 

That’s it! You’re now a contributor to the flutter ecosystem. You’ll receive a mail telling you that your package has been published.

Lastly, this package is available on pub.dev (link here) and it’s open source, so feel free to contribute and improve it. You sharpen your skill by doing that

Thanks for staying through. Kindly follow and leave a clap

Source code: GitHub

Contact me: WhatsApp