Create a Package

Parameter Description:

  • To create a package with pure Dart libraries, use the--template=packagelogoflutter createThe command
flutter create --template=plugin 'plugin_name'
Copy the code

Once created, you can see that there is no native code in this directory. There is no previous iOS and Android directory

For more information about Flutter commands and shortcuts, see: Flutter- the most common Flutter shortcut

This is about the development, release and use of the Flutter-Plugin

Release the Package

To improve the code in the package, I simply wrote a custom Dialog code here, and then others reference my package and use this custom upgrade Dialog. After writing the code, upload the package at this point. The code for the specific package is at the end of the article.

Yaml pubspec.yaml

Name: specifies the package name. Description: specifies the package description. Version: specifies the package version. If example is uploaded, enter 1.0.0 homepageCopy the code

Change the corresponding version number in Changelog. md

First check the Dart package

Go to the directory of the package_dialog_demo package project and execute

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

If the package has a problem, it can be detected. You can obviously see here that there is no problem

Release the Dart package

flutter packages pub publish
Copy the code

FAQ:

  • Ask if you want to publish0.0.1Version of the package

  • Type y, and press Enter. Ask to Google this address for verification, so make sure you have one firstGoogle mailaccount

  • Copy the address, type it into your browser, and then log in to your Google account

As long as the authentication is complete in the browser, the terminal automatically prompts that the authentication is complete

And then it stuck for a long time, and it failed

  • At this time, an error will be reported, looking at the network problem, need to climb over the wall, and need to set up proxy in the terminal

Specify the server for publishing

flutter packages pub publish --server=https://pub.dartlang.org
Copy the code
  • After solving the last problem, I found the following license problem

To solve this problem, create a repository on GitHub and select the appropriate license

Then after creating the warehouse, enter the warehouse to see a more this file

Open this file, copy and paste the contents into the package LICENSE

Check again to see if there is a problem. If there is no problem, upload again

Package_dialog_demo = package_dialog_demo = package_dialog_demo

Use the Package

Create usage project

Create a project flutter_CUSTOM_dialog and import the custom package to see if it can be used successfully

Introducing the package bag

Package_dialog_demo: ^ 0.0.1Copy the code

Then pub get, in the project inside the introduction, I set here alias DialogDemo to prevent conflict, can be used normally

import 'package:package_dialog_demo/package_dialog_demo.dart' as DialogDemo;
Copy the code

Problems with using images in packages

Note: Although it can be used normally, we found that a picture in the package cannot be displayed properly. At this time, we need to add images. Since our package upload only shows the lib folder, we create an images folder in this folder to put the images to be displayed

Update version 0.0.2 again, then upload. And you need to introduce the specific path in the project using your package, otherwise the picture will not be found

So again after a 0.0.2 package, running the project found that the picture was using normally

In fact, the package contains pictures inside the package is very inconvenient to use, others use your library also need to introduce the specific picture path you use, otherwise it will not be able to display normally. In fact, it’s better to use fewer images, or to expose the image attributes in the bag.

Optimization Package

At this time, the package we uploaded was only 100 points, with a full score of 130 points. We need to add 60-80 words for the package description and an example Demo

Increase the Example

We can use the flutter_custom_dialog project code created above to create an example file inside the package and copy the main.dart code there. Then the terminal still checks the package for problems, and the upload operation starts. At this point, the sample code is uploaded, and it is still null and secure.

The score here is only 110, one is the description of the need to configure, the other is the number of API is not enough, after filling in these two can reach 130 points.

Add functional modules

In ordinary development, we can also see that other people’s development packages, and do not want to expose all the contents of the file, but only expose the corresponding use, the implementation process is invisible.

  • I’ve recreated a file herecustom_dialog.dartFile, implement corresponding functions in it, and then expose topackage_dialog_demo.dart
part of 'package_dialog_demo.dart';
Copy the code

  • inpackage_dialog_demo.dartAnd some of the other files that need to be imported just need to be imported here
part 'custom_dialog.dart';
Copy the code

The code inside the Package Package

import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; Enum DialogType {upgrade, alert} class CustomDialog extends Dialog {final String? title; // Title final String? content; // Content final DialogType? dialogType; final void Function()? cancelCallBack; final void Function()? confirmCallBack; CustomDialog( {this.title, this.content, this.dialogType, this.confirmCallBack, this.cancelCallBack}); @override Widget build(BuildContext context) { switch (this.dialogType) { case DialogType.upgrade: return Material( type: MaterialType.transparency, child: Center( child: upgradeDialog(context), ), ); break; case DialogType.alert: return Material( type: MaterialType.transparency, child: Center( child: customAlertDialog(context), ), ); break; default: return Material( type: MaterialType.transparency, child: Center( child: upgradeDialog(context), ), ); } } Widget customAlertDialog(BuildContext context) { return Container( height: 300, margin: EdgeInsets.only(left: 40, right: 40), color: Colors.white, child: Column( children: [ Padding( padding: EdgeInsets.all(20), child: Stack( children: [ Align( child: Text( title!, style: TextStyle(fontSize: 20, color: Color(0xFF2D2D2D)), ), ), Align( alignment: Alignment.centerRight, child: InkWell( child: Icon(Icons.close), onTap: () { Navigator.of(context).pop(); }, ), ), ], ), ), Divider(), Container( width: double.infinity, margin: EdgeInsets.all(10), child: Text( content!, textAlign: TextAlign.left, ), ) ], ), ); } Widget upgradeDialog(BuildContext context) { return Container( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Container( margin: EdgeInsets.only(left: 20, right: 20), decoration: const ShapeDecoration( color: Color(0xfff2f2f2), shape: RoundedRectangleBorder( borderRadius: BorderRadius.all( Radius.circular(10), ), ), ), child: Column( children: [ Container( height: 250, decoration: const BoxDecoration( borderRadius: BorderRadius.only( topLeft: Radius.circular(10), topRight: Radius.circular(10)), image: DecorationImage( image: AssetImage('images/head_icon.png'), fit: BoxFit.cover, )), ), SizedBox( height: 20, ), Container( padding: EdgeInsets.only(left: 10, right: 10), width: Double. Infinity, child: const Text(' this update ', style: TextStyle(fontSize: 20, color: color (0xFF2D2D2D), decoration: TextDecoration.none), textAlign: TextAlign.left, ), ), SizedBox( height: 15, ), Container( padding: EdgeInsets. Only (left: 10, right: 10), width: double. Infinity, child: Text(' solve some known problems ', style: TextStyle(fontSize: 16, color: Color(0xFF333333), decoration: TextDecoration.none), textAlign: TextAlign.left, ), ), SizedBox( height: 20, ), Divider(), Container( height: 40, margin: EdgeInsets.only(bottom: 15), child: Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ TextButton( onPressed: () {navigator.of (context).pop(); this.confirmcallback!();}, child: Text(' update ', style: TextStyle(fontSize: TextStyle) 18), ), ), VerticalDivider( color: Colors.grey, width: 1, ), TextButton( onPressed: () {navigator.of (context).pop(); this.cancelcallback!();}, child: Text(' do not update ', style: TextStyle(fontSize: TextStyle) () [() [() [() [() [() [() [() [() [() }}Copy the code

Development, release and use of the Flutter-Plugin

Refer to the article: flutterchina club/developing -…

Welcome to follow, like and forward.