How to create packages for Flutter: developer guide

Flutter Packages are a powerful way to share and reuse code in your Flutter projects. Whether you want to contribute to the Flutter community or streamline your Flutter app development process, creating Flutter packages is key.

In this article, I’ll walk you through the process of creating Flutter packages, from setting up your development environment to publishing your package to Dart’s package repository, pub.dev. Whether you’re a seasoned Flutter developer looking to share your expertise or a newcomer looking to contribute to the Flutter community, this article will walk you through the steps to efficiently package your Flutter code.

About the Flutter package

A Flutter package is a broader term that refers to any piece of self-contained code that can be imported and used in a Flutter project. Packages can contain widgets, utility functions, plugins, or other code that can be reused across multiple Flutter projects.

Benefits of creating packages:

Flutter Packages are the cornerstone of the Flutter framework, providing developers with a wide range of benefits that significantly streamline development and increase productivity.

Reusability: By creating packages, you enable code reuse across multiple projects. This is particularly useful for sharing common functionality or maintaining a consistent design language across different applications. This saves time because you don’t need to recreate the same things over and over again.

Decoupling: Packages can be developed in such a way that they are decoupled from the specific context of the application. This makes it easier to replace or update individual components without affecting the entire application.

Code Sharing: Developers in your organization can easily share packages across different projects, speeding up development cycles and reducing duplication of effort.

Targeted development: Package development allows teams to focus on specific modules without being overwhelmed by the code base of the entire application.

Versioning and updates: Packages can have their own versioning and update cycles, which can be beneficial when different parts of the application evolve at different rates.

Interview: If a module requires updates or fixes, you can resolve them in the context of the package without affecting the rest of the application.

Now let’s start with a practical step-by-step guide on creating packages for Flutter.

Step 1: Create a Flutter Package

To create a Flutter package, navigate to your CLI and the directory where you want to create the Flutter package and run the command mentioned below:

flutter create --template=package mi_flutter_package

Replace mi_flutter_package with the desired name for your package.

This command will create a Flutter package project with mi_flutter_package folder under the mentioned folder structure.

package_name/
├── lib/
│   └── mi_flutter_package.dart
├── pubspec.yaml
├── README.md
└── example/
    ├── lib/
    └── …

LICENCE

This file is largely empty and is intended to add legal terms regarding use of the package.

test/mi_flutter_package_test.dart

THE Unit tests for the package.

mi_flutter_package.iml

A configuration file used by IntelliJ IDEs.

.gitignore

A hidden file that tells Git which files or folders to ignore when tracking changes in a project.

.metadata

A hidden file is used by IDEs to track Flutter project properties.

Pubspec.yaml

A YAML file containing metadata that specifies package dependencies. Used by the advertising tool.

README.md

A markdown file that briefly describes the purpose of the package and its usage.

Step 2: Implementing your package

We need to write our package code in the lib folder. This is where you will define the classes, functions, widgets or other functionality of your package.

In our package, we will add a class to define a flexible custom app bar widget named MIAppBarWidget for Flutter apps. Developers can use this widget and customize various aspects of the app bar’s appearance and behavior by providing values ​​through builder settings. This allows for greater flexibility in designing the application’s user interface.

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


class MIAppBarWidget extends StatelessWidget implements PreferredSizeWidget {
 final Widget? leading;
 final double? leadingWidth;
 final bool automaticallyImplyLeading;
 final Widget title;
 final Function(BuildContext context) onBackButtonTapped;
 final TextStyle? titleTextStyle;
 final List<Widget>? actions;
 final bool centerTitle;
 final double toolbarHeight;
 final double toolbarOpacity;
 final ShapeBorder? shapeBorder;
 final double? elevation;
 final Color? backgroundColor;
 final IconThemeData? actionsIconTheme;
 final Color? shadowColor;
 final double sideMargin;
 final Color? statusBarColor;
 final Gradient? gradient;
 final BorderRadiusGeometry? gradientRadius;


 const MIAppBarWidget(
     {Key? key,
     this.leading,
     this.automaticallyImplyLeading = false,
     required this.onBackButtonTapped,
     required this.title,
     this.titleTextStyle,
     this.actions,
     this.centerTitle = false,
     this.toolbarHeight = 60,
     this.toolbarOpacity = 1,
     this.shapeBorder,
     this.elevation = 8,
     this.backgroundColor,
     this.leadingWidth = 56,
     this.actionsIconTheme =
         const IconThemeData(color: Colors.black, size: 36),
     this.shadowColor,
     this.sideMargin = 0,
     this.gradient,
     this.gradientRadius,
     this.statusBarColor})
     : super(key: key);


 @override
 Widget build(BuildContext context) {
   return Container(
     margin: EdgeInsets.only(left: sideMargin, right: sideMargin),
     child: Center(
       child: AppBar(
           leading: InkWell(
             onTap: () => {onBackButtonTapped(context)},
             child: leading,
           ),
           flexibleSpace: Container(
               decoration: BoxDecoration(
                   gradient: gradient, borderRadius: gradientRadius)),
           leadingWidth: leadingWidth,
           iconTheme: actionsIconTheme,
           automaticallyImplyLeading: automaticallyImplyLeading,
           title: title,
           titleTextStyle: titleTextStyle,
           centerTitle: centerTitle,
           actions: actions,
           actionsIconTheme: actionsIconTheme,
           elevation: elevation,
           toolbarHeight: toolbarHeight,
           toolbarOpacity: toolbarOpacity,
           backgroundColor: backgroundColor,
           shadowColor: shadowColor,
           systemOverlayStyle: SystemUiOverlayStyle(
             statusBarColor: statusBarColor, 
           ),
           shape: shapeBorder),
     ),
   );
 }


 @override
 Size get preferredSize => Size.fromHeight(toolbarHeight);
}
Code language: PHP (php)

Make sure to add the export ‘mi_app_bar_widget.dart’; line in your mi_flutter_package.dart file. By doing this you will make the contents of the specified file (mi_app_bar_widget.dart in this case) available for use in other parts of your application.

export 'mi_app_bar_widget.dart';Code language: JavaScript (javascript)

Important: When developing custom widgets in your package, make sure to export these files. This action allows other applications using your package to access and use these custom widgets.

Step 3: Adding a sample application to our package

To create a sample application in your package, navigate to your CLI and project root folder and run the command mentioned below:

flutter create example

This command will create a sample Flutter app in your package folder.

Step 4: Using MIAppBarWidget in the sample app

– Add this package to your sample application, navigate to your pubspec.yaml file under the add app example mi_flutter_package under dependencies.

• If you are using the terminal, run the “flutter pub get” command.
• In VS Code, simply click “Get Packages” located on the right side of the action ribbon at the top of your “pubspec.yaml” file. This is represented by a download icon.
• If you are working in Android Studio/IntelliJ, go to the action ribbon at the top of your “pubspec.yaml” file and select “Pub get” to grab the necessary packages.

dependencies:
  flutter:
    sdk: flutter
  mi_flutter_package:
    path: ../

– Add MIAppWidget in your sample app. This is what our updated AppBar code looks like –

Scaffold(
    appBar: MIAppBarWidget(
      automaticallyImplyLeading: true,
      title: const Text(
        "MI AppBar",
        style: TextStyle(color: Colors.white),
      ),
      toolbarHeight: 56,
      leadingWidth: 50,
      centerTitle: true,
      backgroundColor: Colors.blue,
      statusBarColor: Colors.blueGrey,
      elevation: 10,
      shadowColor: Colors.black,
      
      shapeBorder: const RoundedRectangleBorder(
        borderRadius: BorderRadius.only(
          bottomRight: Radius.circular(10),
          bottomLeft: Radius.circular(10),
        ),
      ),
      onBackButtonTapped: (BuildContext context) {},
    ),
  );
Code language: JavaScript (javascript)

Step 5: Running a sample app in an iOS/Android simulator/emulator

If you don’t see any simulator or emulator option to run your code in Android Studio, please follow the steps mentioned below.

• Click Add Configuration -> Add New Configuration -> Fluter
• Enter “Name” as primary
• For Dart Entrypoint -> Select the path of the main.dart file in your sample application
• Click Apply and press Ok

We are all ready! You can now run the application and voila!

We have now successfully integrated mi_flutter_package in our application example.

Step 6: Using Your Flutter Package in Other Apps

Adding mi_flutter_package locally in your other Flutter apps:

To add mi_flutter_package to your application, navigate to your application’s pubsec.yaml file and add it under dependencies.

mi_flutter_package:

path: /Users/../mi_flutter_package
Code language: JavaScript (javascript)

Above, mi_flutter_package is defined as a dependency in a pubspec.yaml file. It is specified as a local dependency, which means the package will be fetched from the local path located on the provided path (/Users/../mi_flutter_package)

Adding mi_flutter_package to your Flutter apps via private Git repository:

To add mi_flutter_package to your application, navigate to your application’s pubsec.yaml file and add it under dependencies.

mi_flutter_package:
  git:
    url: gi[email protected]:flutter_package/miflutterpackage.git
    ref: main

Above, mi_flutter_package is defined as a dependency in a pubspec.yaml file. It is specified as a Git dependency, which means the package will be fetched from the Git repository located at the provided URL ([email protected]:flutter_package/miflutterpackage.git). The ref property specifies the branch or commit reference (in this case, main) to use from the Git repository. This allows the Flutter project to pull code and assets from the specified Git repository and use them in the project.

Step 7: Publish your package to pub.dev

To publish your package to pub.dev you will need to use the pub command line tool, which is the Dart package manager.

Open your terminal and navigate to your package directory.

– Connect to Pub.dev:

Before you can publish, you must authenticate with your pub.dev account using the following command:

pub connection

Follow the prompts to sign in with your Dart/Google account.

– Post your package: To publish your package, use the following command:

ad publication – dry test

The –dry-run flag allows you to check if your package can be published successfully without actually publishing it. It is a good practice to use this indicator first to detect any problems. If the dry run succeeds, remove the –dry-run flag and publish your package:

publication in a pub

Check the post: After publishing, visit pub.dev to ensure your package is listed correctly. You can search for your package by name to find it.

Note: Make sure your `pubspec.yaml` is correctly filled out. It should include essential information about your package, such as name, version, description, author, and dependencies.

In summary

I hope you enjoyed this tutorial on creating packages for Flutter. To download the code for this application, please click here.

Flutter packages are essential tools for developers, promoting collaboration and efficiency. With this guide, you are now well prepared to create and use packages effectively. By sharing your code or leveraging existing packages, you can streamline your Float development process and deliver an intuitive user experience. If you have any questions or comments, please do not hesitate to contact us. We’re here to help you improve the performance of your Flutter app.

Authors biography