Leading a successful Flutter application development project often results from the strong organization of the application architecture.  Using Flutter packages is an excellent way to group your application files and functional sections into reusable components that make team collaboration easier. This tutorial will take you through all the steps needed to create a custom package for your next Flutter project.

A complete step-by-step video and full code are also available.

Overview

Before explaining how to create a custom package, let’s review why Flutter developers need to use packages and how custom packages are used.  The goal of the package is to isolate reusable functionality and make it easily accessible to other parts of your application. There can be multiple custom packages for a single application.

For example, we can create a custom package to handle HTTP network API connections for different buttons to display the results to different screens.   A good way to organize your code is to isolate all the connection functionality into a new directory called, connection.  The connection directory becomes the connection package. You can also create another package for animation and organize your custom animations in that package.   Each package you create is put into a common directory called packages.

Once the code is isolated in a package, you can make the package accessible to your application in your main project pubspec.yaml application configuration file. The syntax of the pubspec.yaml file differs slightly depending on how you distribute your package.

Once the package is made available to the application using pubspec.yaml, each file that uses the package imports the package using the syntax import 'package:name/file.dart`;

Let’s illustrate the process with examples, starting with the pubspec.yaml configuration.

3 Types of Package Dependency Configuration Formats 

There are three strategies for building and distributing your custom Flutter package:

  1. Publish to pub.dev;
  2. Publish to a GitHub or equivalent as a standalone repository;
  3. Store the package within your main project repository.

1. pub.dev

If you publish the package to pub.dev, you can access it from pubspec.yaml, under dependencies. As my library is not on pub.dev, I’ll show the syntax with the HTTP package.

2. Remote Git Server

In most cases, you don’t need to make your package accessible to a wide group of people.  In these cases, you can access the library from the network with the syntax below.

In the example above, the package name is theta. The package is available on GitHub under the main branch.

3. Packages Folder of Your Project

You can also store the package within your main application project folder.  If the package name is theta, then store it in the main project directory under packages/theta.

If the package is stored locally, the pubspec.yaml syntax is as follows.

Using a Custom Package

In all three methods, you import your custom package into your application to use it.

Application Code

Custom Package Code

To illustrate what part of the code is from the package, I’ll include a short snippet of the library. 

In the example above, the section Camera.info is a static getter located in the package at theta/lib/src/protocols.dart

Once the package is created, it is easy to access all the classes and methods in your package.

Recommendation on Distribution Strategy

You should start by putting your package inside of your application repository packages directory and only use the package for your one application initially.  Once the application and package are stable, you can then distribute it on GitHub for other members of your team or organization to use directly from their pubspec.yaml file. 

After you make the package accessible to other groups and they start to use it, you will need to spend more time with package version management.

Creating a Package

Create a new project.  I called my project theta_api_intro_tutorial.

Create a folder called, packages, in the main project top-level directory.

Packages in Top-Level Directory

Change into the directory and create a new package. In this example, my package is called, theta_connection.

flutter create --template=package theta_connection

When you create a package with flutter create, it will automatically create another set of lib, pubspec.yaml, and README.md files.

Under the newly created lib directory, there is the main theta_connection.dart file that functions as the central connection point for the rest of the files in your package.

Delete the example code from both theta_connection.dart and test/theta_connection.dartfiles.

library theta_connection

part of

Create a new file to hold the first method of your new package.  I’ve called my file protocols/test_hello.dart.

The key learning point for this file is to learn how to include part of '../theta_connection.dart' to the top of the file. This is the connection point from each file in your package to the main package file and will later allow your application to access the method.

test_hello.dart

part

In addition to connecting the file with the method to theta_connection.dart, you also need to add a connection from theta_connection.dart to protocols/test_hello.dart

part 'protocols/test_hello.dart'

Congratulations, you’ve just created a custom package!

Review of Steps

  1. Create a package with flutter create --template=package name.
  2. Create a new file for your package functionality and link it to the main package file with part of.
  3. In the main package file, link to the new file with part.

Using Your New Package

In the pubspec.yaml file in your main project directory, add the path for your new package.

path:packages/theta_connection

 Import the package in main.dart and use it by calling the method hello().

hello() Method

When you press the button, you should see ‘Hello, world’ in the console.
Hello World in Console

Expanding Your Package

Using this technique, you can add additional directories and files to each new directory.  You can also create different packages for different types of functionality.

As your application grows, you will need to manage the state of your application.  My previous article, Flutter 2.0 State Management Introduction with Provider 5.0, explains how to manage the state of your Flutter application with the provider. 

Summary

Strong organization of your application architecture is the key to a successful project.  Failure to manage fundamental areas such as functionality and state can lead to delays and in some cases unfinished projects.  Effective use of the standard Flutter package system is a great tool to organize your application architecture.  To keep development simple, place your packages inside of your main application repository to reduce the complexity of version management for your package.  By reducing the complexity of package version management, you increase the chances that you and your team will uses packages, putting everyone on the path to a successful project launch.



Source link

Write A Comment