There are two tools for the three parties of Flutter: Package and Plugin. The difference is that the Plugin includes not only Dart code but also iOS and Android native code, such as the commonly used Image_picker. A Package is simply a library that contains the Dart code.

Package development

Create by commandPackage 包

To create the Dart package, execute the FLUTTER create with the –template=package argument.

flutter create --template=package 'package_name"
Copy the code

throughAndroid StudiocreatePackage 包

When creating a Package with Android Studio, select the Package type for Project Type.

Here, we extract the index control code in wechat Demo to create our own Package and use it in the project.

Code that

library chenxi_chat_index_bar; import 'package:flutter/material.dart'; class IndexBar extends StatefulWidget { final void Function(String str)? indexBarCallBack; const IndexBar({this.indexBarCallBack, Key? key}) : super(key : key); @override _IndexBarState createState() => _IndexBarState(); } // get the selected item text int _getIndex(BuildContext Context, Offset globalPosition) { RenderBox box = context.findrenderObject () as RenderBox; Double y = box. GlobalToLocal (globalPosition).dy; double y = box. GlobalToLocal (globalPosition).dy; Var itemHeight = screenHight(context) / 2 / index_words.length; Int index = (y ~/ itemHeight).clamp(0, INDEX_WORDS.length-1); return index; } class _IndexBarState extends State<IndexBar> {Color _bkColor = color.fromrgbo (1, 1, 1, 0.0); Color _textColor = Colors.black; Double _indicatorY = 0.0; String _indicatorText = 'A'; bool _indicatorHidden = true; @override Widget build(BuildContext context) { final List<Widget> _words = []; for (int i = 0; i < INDEX_WORDS.length; i++) { _words.add( Expanded(child: Text(INDEX_WORDS[i], style: TextStyle(fontSize: 10, color: _textColor),)) ); } return tourists (right: 0.0, top: screenHight(context) / 8, height: screenHight(context) / 2, width:120, child: Row( children: [ Container( alignment: Alignment(0, _indicatorY), width: 100, child: _indicatorHidden ? null : Stack(alignment: alignment (-0.2, 0), children: [Image(Image: AssetImage('images/ bubble.png ')), width: 60,), Text( _indicatorText, style: TextStyle( fontSize: 35, color: Color.white,),)],),),), // Indicator GestureDetector(onVerticalDragUpdate: (DragUpdateDetails details){ final Function(String str) callBack = widget.indexBarCallBack as Function(String str);  int index = _getIndex(context, details.globalPosition); callBack(INDEX_WORDS[index]); SetState (() {_indicatorY = 2.2 / INDEX_WORDS. Length * index-1.1; _indicatorText = INDEX_WORDS[index]; _indicatorHidden = false;});}, // Click onVerticalDragDown: (DragDownDetails details){ final Function(String str) callBack = widget.indexBarCallBack as Function(String str);  int index = _getIndex(context, details.globalPosition); callBack(INDEX_WORDS[index]); SetState (() {_bkColor = color.fromrgbo (1, 1, 1, 0.4); _textColor = color.white; _indicatorY = 2.2 / INDEX_WORDS. Length * index-1.1; _indicatorText = INDEX_WORDS[index]; _indicatorHidden = false; });}, // Index bar click cancel onVerticalDragEnd: (DragEndDetails details){setState(() {_bkColor = color.fromrgbo (1, 1, 1, 0.0); _textColor = color.black;  _indicatorHidden = true; }); }, child: Container( width: 20, color: _bkColor, child: Column( children: _words,),),),), // index bar],),); } // const Color CahtThemColor = color.fromrgbo (230, 230, 230, 1.0); Double screenWidth(BuildContext Context) => mediaQuery.of (context).sie.width; double screenHight(BuildContext context) => MediaQuery.of(context).size.height; Const INDEX_WORDS = [' 🔍 ', 'being', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I' and 'J' and 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z' ];Copy the code

First, we extracted all the index control-related code into the chenxi_chat_index_bar.dart file.

Resource file processing in Package

First, it is not recommended to use resource files in the Package, because it will be inconvenient for others to use. But if it’s a UI related resource this is something we can’t avoid, but it can be handled.

First we create an images folder and put the image resources in it.

Do the configuration in pubspec.yaml.

Publishing Configurations

The publishing-related configuration is also done in pubspec.yaml.

name ：PackageThe name of the
description ：PackageA description of the
version ：PackageThe version number of the
homepage: You can put a link to your own website, it needs to be noted that the website can be accessed, otherwise it will be deducted points.

Release the Package

checkPackage

flutter packages pub publish --dry-run
Copy the code

CD to the Package file directory to be published, if there is no error, it means there is no missing information, you can proceed to the next step.

release

flutter packages pub publish
Copy the code

Note: currently, you need a Google account to publish plug-ins and packages, and you need to cross the wall.

Do you want to publish chenxi_chat_index_bar 0.0.1 (y/N)? y Pub needs your authorization to upload packages on your behalf. In a web browser, go to https://accounts.google.com/o/oauth2/auth?access_type=offline&approval_prompt=force&response_type=code&client_id=8183688 55108-8grd2eg9tj9f38os6f1urbcvsq399u8n.apps.googleusercontent.com&redirect_uri=http%3A%2F%2Flocalhost%3A56076&code_chall enge=jjz5gCzNNt_s5GYyQ3L_Pz4u_mSErJgx9BXoxUlY2XY&code_challenge_method=S256&scope=openid+https%3A%2F%2Fwww.googleapis.co m%2Fauth%2Fuserinfo.email Then click "Allow access".Copy the code

Sometimes even scaling the wall does not solve the problem. Because there is an image configured, the official Flutter suggests that the image be configured. Therefore, the following errors will occur when the plugin or package is released due to the image.

The solution is simply to specify server publishing.

Specify server publishing

flutter packages pub publish --server=https://pub.dartlang.org
Copy the code

LICENSE Certificate Problem

The next thing you should see is this error, which is copyright, which was not required before, but is now required. It can be solved by the following steps.

To Create a repository on Github, select Choose a license, select BSD 3-clause, and click Create Repository.

Once created, you can see that the repository has the LICENSE file.

Open the LICENSE file and copy all contents.

Paste the copied content into the LICENSE file in the Package and run the publish command again.

You can see here that it has been published successfully.

We can also see our published Package on the pub website.

Use your own Package

Execute Pub get to see that the Package we uploaded has been pulled locally.

Import the following header files when using:

import 'package:chenxi_chat_index_bar/chenxi_chat_index_bar.dart' as chenxi;
Copy the code

As chenxi is added to prevent class name conflicts.

Use code:

chenxi.IndexBar(indexBarCallBack: (String str) { if(_groupOffsetMap[str] ! = null) { print(str); _scrollController! .animateTo(_groupOffsetMap[str], duration: Duration(microseconds: 100), curve: Curves.elasticIn); }}),// Float index barCopy the code

Package optimization

Resource file processing

Since Package uploads lib files, if you need image resources in Package, you need to add image resources to the lib path.

AssetImage('images/bubble.png', package: 'chenxi_chat_index_bar')
Copy the code

You can specify package names when using images. The Package needs to be updated after modification, and the version number in pubspec.yaml and changelog. md file needs to be modified and re-published.

  assets:
     - images/
     - packages/chenxi_chat_index_bar/images/bubble.png
Copy the code

In this case, when the Package is introduced into the project, the image resource configuration should be as shown above, which will be quite troublesome. In this case, let the image be uploaded for external use.

class IndexBar extends StatefulWidget {
  final void Function(String str)? indexBarCallBack;
  final ImageProvider image;
  const IndexBar(this.image, {this.indexBarCallBack, Key? key}) : super(key : key);
  @override
  _IndexBarState createState() => _IndexBarState();
}
Copy the code

When you show it, just use the external image.

Image(image: widget.image, width: 60,),
Copy the code

Grade optimization

After uploading the Package, the official website will score our Package. If the score is too low, others will have concerns when using it. The total score here is 130. We currently have 90 points, which can then be optimized according to the hints on the official website.

The package description is too short

The description is too short, so we can add the description.

No example foundNo example project

As with Github, there are sample projects to look at when using more established third parties. Here we also create a sample project.

Create a new Flutter project and introduce chenxi_chat_index_bar to specify the local path, then add the sample code. When we’re done, we’ll upload the sample program.

Create a new example file in our package chenxi_chat_index_bar and place the instance code file under example.

When we distribute packages with a lot of code, we can split the code and create multiple subfiles. And establish dependencies through code.

Specifies which master file the child file belongs to

part of 'chenxi_chat_index_bar.dart';
Copy the code

Specifies which subfiles the master file contains

part 'index_bar.dart';
Copy the code

After the above operations, you can update the version number for re-uploading.

Package link: chenxi_chat_index_bar

The Plugin development

Plugin command creation

Create the plug-in

To create the plugin package execute flutter create using the –template=plugin parameter.

flutter create --template=plugin 'plugin_name'
Copy the code

Specify the organization name

Specify your organization with the –org option and use reverse domain name notation.

The Dart package does not require an organization name, –org only works with –template=plugin.

flutter create --org com.example --template=plugin 'plugin_name
Copy the code

Specify other languages

Since Plugin includes iOS and Android code, and both support two languages respectively, iOS supports Object-C(default) and Swift, Android supports Java(default) and Kot in, So we can use -i or -a to specify the language for iOS or Android.

flutter create--template=plugin-i swift-ako tL in'plugin_name
Copy the code

Android Studio creates a Plugin

When creating the project, we choose plugin. The important thing here is to choose a development language that you are familiar with.

After the creation, you can see that there are more sample project files in the Package, including android and ios folders. The function of our sample project is to obtain the battery power of the phone, and only the relevant code of ios is implemented here.

Code implementation

dartcode

static Future<String> get platformBatteryLevel async {
    final int batteryLevel = await _channel.invokeMethod('getBatteryLevel');
    return batteryLevel.toString();
  }
Copy the code

occode

+ (void)registerWithRegistrar:(NSObject<FlutterPluginRegistrar>*)registrar {
  FlutterMethodChannel* channel = [FlutterMethodChannel
      methodChannelWithName:@"chenxi_battery_level"
            binaryMessenger:[registrar messenger]];
  ChenxiBatteryLevelPlugin* instance = [[ChenxiBatteryLevelPlugin alloc] init];
  [registrar addMethodCallDelegate:instance channel:channel];
}

- (void)handleMethodCall:(FlutterMethodCall*)call result:(FlutterResult)result {
  if ([@"getPlatformVersion" isEqualToString:call.method]) {
    result([@"iOS " stringByAppendingString:[[UIDevice currentDevice] systemVersion]]);
  } else if ([@"getPlatformBatteryLevel" isEqualToString:call.method]) {
      result(@([self getBatteryLevel]));
  } else {
    result(FlutterMethodNotImplemented);
  }
}

- (int)getBatteryLevel {
    UIDevice *device = UIDevice.currentDevice;
    device.batteryMonitoringEnabled = YES;
    if (device.batteryLevel == UIDeviceOrientationUnknown) {
        return -1;
    }
    return (int)(device.batteryState * 100);
}
Copy the code

Release the Plugin

checkPlugin

flutter packages pub publish --dry-run
Copy the code

Specify server publishing

flutter packages pub publish --server=https://pub.dartlang.org
Copy the code

Plugin publishing like Package, CD to Plugin file directory to execute the publishing command.

Plugin link: chenxi_battery_level

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Package and Plugin development in Flutter

Package development

Code that

Resource file processing in Package

Publishing Configurations

Release the Package

Use your own Package

Package optimization

Resource file processing

Grade optimization

The Plugin development

Plugin command creation

Android Studio creates a Plugin

Code implementation

Release the Plugin

Package and Plugin development in Flutter

Package development

Code that

Resource file processing in Package

Publishing Configurations

Release the Package

Use your own Package

Package optimization

Resource file processing

Grade optimization

The Plugin development

Plugin command creation

Android Studio creates a Plugin

Code implementation

Release the Plugin

Related Posts

IOS low-level exploration of multithreading (16) — lock analysis (NSLock, NSCondtion, NSRecursiveLock, NSCondition)

Calm down and read the Aspects of the source code

IOS Basic Interview Questions (3)