How To Create Package In Flutter

In this tutorial How To Create Package In Flutter, you’ll learn how to create your own Dart packages to be used in Flutter apps.

How To Create Package In Flutter? Dart packages help us solve issues and create workarounds for problems without having to write the code ourselves from scratch.

Some advantages of being a package publisher:

You’ll learn a ton about open source projects: documentation, versions, releases, issues, licenses, CHANGELOG and README files, and more!
It’s a great accomplishment to add to your resume.
You’ll meet new people who are using your package or are helping you maintain it.
Your package can help develop many production apps.
You’ll be giving back to the Flutter community.

Transform your app idea into reality with our Flutter app development services.

Creating a Flutter/Dart package

On your Android Studio’s menu bar, click File ▸ New ▸ New Flutter Project. Then, select Flutter Package and click Next.

Now, follow the instructions to fill in the fields:

Project name: Type in <project name>.
Flutter SDK path: Make sure the default value is the right path to your Flutter SDK.
Project location: Choose where you want to store your project.
Description: Type in Detects when your widget appears or disappears from the screen.

Click Finish and wait for Android Studio to create and load your new project.

Or you can you terminal

flutter create --template=package &lt;project name&gt;

1	flutter create --template=package <project name>

Writing a Flutter widget

Next, we’ll create a custom button styled to our liking.

Clear the original code generated by Flutter in the lib/<project name>.dart. Then, add the CustomButton widget

import 'package:flutter/material.dart';

class CustomButton extends StatelessWidget {
  var onPressed;
  final Widget child;
  var style;
  CustomButton({Key key, @required this.onPressed, this.child, this.style})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextButton(
      onPressed: onPressed,
      style: TextButton.styleFrom(
        padding: const EdgeInsets.all(16.0),
        primary: Colors.white,
        backgroundColor: Colors.blue,
        elevation: 9.0,
        textStyle: const TextStyle(
          fontSize: 20,
        ),
      ),
      child: child
    );
  }
}

import 'package:flutter/material.dart';

class CustomButton extends StatelessWidget {

var onPressed;

final Widget child;

var style;

CustomButton({Key key, @required this.onPressed, this.child, this.style})

: super(key: key);

@override

Widget build(BuildContext context) {

return TextButton(

onPressed: onPressed,

style: TextButton.styleFrom(

padding: const EdgeInsets.all(16.0),

primary: Colors.white,

backgroundColor: Colors.blue,

elevation: 9.0,

textStyle: const TextStyle(

fontSize: 20,

child: child

);

}

The library <project name> code sets the name of our package to <project name>.

First, we imported the Flutter Material package — this is the root of all Flutter apps. Next, we created a CustomButton class that extends the StatelessWidget class. This causes our CustomButton widget to hold or manage no local state.

We have three properties that the CustomButton widget constructor will receive:

onPressed — This function will be called when the CustomButton widget is pressed or clicked
style — This property will hold the custom styling of the button from its users. The users might decide to style our CustomButton widget to their taste, so they code the styling and pass it down to the CustomButton widget via the style property
child — This is a widget tree of the CustomButton widget. This tree is usually a Text widget that displays the text on the button

The build method renders a TextButton and styles the button as follows:

padding — The padding is set to 16.0 units all sides
primary — The primary color of the button is set to blue
backgroundColor — The background color of the button is set to blue
elevation — The box shadow of the button is elevated to 9.0 units
textStyle — The font size is set to 20 units to make the button appear much bigger
child — This property renders the widget tree of the CustomButton widget

Our custom button is something like a smaller version of TextButton. This button renders a customized TextButton. Inside our CustomButton, we increased the padding, elevation, background color, and text style of the TextButton.

Adjusting the Pubspec

Open your new project’s pubspec.yaml file. Notice that the content of the file is grouped into five sections: metadata, environment, dependencies, dev_dependencies, and flutter. For this tutorial, you’ll need only the first three:

name: &lt;package name&gt;
description: A new Flutter package project.
version: 1.0.0
homepage:

environment:
  sdk: "&gt;=2.16.2 &lt;3.0.0"

dependencies:
  flutter:
    sdk: flutter

name: <package name>

description: A new Flutter package project.

version: 1.0.0

homepage:

environment:

sdk: ">=2.16.2 <3.0.0"

dependencies:

flutter:

sdk: flutter

The Metadata

Everything users need to find your package comes out of here.

You already provided parts of this information when creating the project. Now you need only a few adjustments:

version: Replace 0.0.1 with 1.0.0. Unless you’re publishing unfinished or experimental code, avoid 0.*.* version numbers. It might scare off some users.
author: This property is no longer used, so delete it.
homepage: Put https://github.com/your_git_package_name. The URL doesn’t have to be from a git repository, but that’s the most common usage.

name: &lt;package name&gt;
description: your package description.
version: 1.0.0
homepage: <em>https://github.com/your_git_package_name</em>.

name: <package name>

description: your package description.

version: 1.0.0

homepage: <em>https://github.com/your_git_package_name</em>.

The Environment

Use this section to restrict the Dart or Flutter SDK versions of your users. This is useful if, for example, your package relies on a feature introduced in an earlier Flutter release or you still haven’t complied with a breaking change in the API.

The Dependencies

Packages can also depend on other packages. This section is no different than the one you find in your apps. You can also use other packages in your package, Specify the dependency, then make sure your section looks like this:

dependencies:
  flutter:
    sdk: flutter
  &lt;other package name&gt;

dependencies:

flutter:

sdk: flutter

Creating an Example Project

Every good package has an example app. The example app is the first thing your users will turn to if they can’t make your package work right off the bat. It should be as concise as possible while still showcasing every feature.

Create your example project by again clicking File ▸ New ▸ New Flutter Project. This time, select Flutter Application and click Next.

Like you did before, follow the instructions to fill in the fields:

Project name: Type in example. Don’t change this name, or your example project won’t follow the convention of being in the example folder.
Flutter SDK path: Make sure the default value is the right path to your Flutter SDK.
Project location: Choose the root folder of your package’s project.
Description: Here, you can type anything you want.

Click Next and, in the following window, type com.YOUR_APP_NAME.example in the Package name field. Finally, click Finish and wait until Android Studio opens your example project in a new window.

Specifying the Example’s Dependencies

Open your example project’s pubspec.yaml and replace the entire dependencies section with:

dependencies:
  flutter:
    sdk: flutter
  your_package_name:
    path: ../

dependencies:

flutter:

sdk: flutter

your_package_name:

path: ../

Open lib/main.dart and add the following code to the _MyHomePageState widget:

class _MyHomePageState extends State&lt;MyHomePage&gt; {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: CustomButton(
          onPressed: () {},
          child: const Text("Click me"),
        ),
      ),
    );
  }
}

class _MyHomePageState extends State<MyHomePage> {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text(widget.title),

body: Center(

child: CustomButton(

onPressed: () {},

child: const Text("Click me"),

);

}

We imported the your_flutter package, then we set the CustomButton widget in the Center widget.

Run the example project by running flutter run in the command line. If you’re using VS Code, right-click on the lib/main.dart file and click Run Without Debugging.

Conclusion

How To Create Package In Flutter in this blog we covered a lot in this tutorial. We started by introducing packages in Dart, what they are, and how they are designed to share code with other devs.

Later on, we learned how to scaffold a Flutter package project and how to write the package code. Next, we learned how to test our Flutter package locally.

If you want to learn about how to publish a package on https://pub.dev/ please visit this link:

https://www.raywenderlich.com/19421827-creating-and-publishing-a-flutter-package#toc-anchor-001

You can read more blogs from Mobikul on this website: https://mobikul.com/blog/

Parveen Baghel

28 Apr, 2023
Updated by - anchit
27 May, 2022
Created by - Parveen Baghel

. . .

How To Create Package In Flutter

Creating a Flutter/Dart package

Writing a Flutter widget

Adjusting the Pubspec

Creating an Example Project

Specifying the Example’s Dependencies

Conclusion

Leave a Comment Cancel Reply

Message Sent!