如何为Flutter创建Dart包在Flutter中，我们使用Dart编程语言来构建跨平台应用程序。Dart包就像您可能

在Flutter中，我们使用Dart编程语言来构建跨平台应用程序。Dart包就像您可能习惯于使用npm或yarn为Node.js项目安装的库。这些包是由Flutter开发人员为Flutter开发人员构建的。

在本教程中，我们将向您展示如何构建Dart包，并与世界各地的其他Flutter开发者分享它们。

我们将通过实际例子介绍以下内容。

什么是Dart包？
Flutter项目要求
Dart包的类型
创建一个 Flutter/Dart 包
初始化一个Git repo
编写一个Flutter小部件
测试您的 Flutter 包
发布和共享您的 Flutter 包

什么是 Dart 包？

Dart 包可以帮助我们解决问题，并为问题创建变通方案，而不必自己从头开始编写代码。

例如，假设我们正在构建一个Flutter应用程序，我们发现我们需要从本地文件系统上传一张图片并在应用程序中显示。如果我们自己来实现这个功能，将是非常乏味和耗时的。

很有可能，某个地方的开发者已经为Flutter建立了一个Dart包，为我们处理图片的提取和显示功能。我们所要做的就是安装这个包，然后使用它的方法和类来寻找和显示图片。这使我们有更多的时间来关注我们应用程序的核心业务逻辑。

Flutter项目要求

要继续学习本教程，请确保你的机器上安装了Flutter SDK。

Flutter SDK用于构建、编译和运行Flutter项目。要安装它，请前往Flutter官方网站，根据您的操作系统下载相应的SDK。

Dart包的类型

在Dart中有两种类型的包：普通的Dart包和插件包。

Dart包是用Dart编写的一般包。它们独立于任何原生平台，如Android和iOS。这些包是针对Flutter的，只能在Flutter框架上使用。
插件包是平台特定的，包含用Dart代码编写的API。这些包可以为Android（使用Kotlin或Java）、iOS（使用Swift或Objective-C）、Web、macOS、Windows或Linux编写。

在本教程中，我们将演示如何创建一个Dart包。

创建一个Flutter/Dart包

要创建一个Flutter包，请运行以下命令。

flutter create --template=package flutter_pkg

create 子命令用于创建一个Flutter项目或包。在这种情况下，它将创建一个Flutter包
--template=package 标志告诉它要创建一个 Flutter 包。
flutter_pkg 是创建Flutter包的文件夹。你可以给它起任何你想要的名字

该命令将像这样运行。

Creating project flutter_pkg...
  flutter_pkg/LICENSE (created)
  flutter_pkg/test/flutter_pkg_test.dart (created)
  flutter_pkg/flutter_pkg.iml (created)
  flutter_pkg/.gitignore (created)
  flutter_pkg/.metadata (created)
  flutter_pkg/pubspec.yaml (created)
  flutter_pkg/README.md (created)
  flutter_pkg/lib/flutter_pkg.dart (created)
  flutter_pkg/.idea/libraries/Dart_SDK.xml (created)
  flutter_pkg/.idea/modules.xml (created)
  flutter_pkg/.idea/workspace.xml (created)
  flutter_pkg/CHANGELOG.md (created)
Running "flutter pub get" in flutter_pkg...                         5.3s
Wrote 12 files.

All done!
Your package code is in flutter_pkg/lib/flutter_pkg.dart

这个包的主文件或入口文件是lib/flutter_pkg.dart 。Flutter将主文件设置为与包名相同，扩展名为.dart 。我们的软件包名称是flutter_pkg ，所以主文件将是flutter_pkg.dart 。如果包的名字是modalpicker ，主文件将是modalpicker.dart 。

让我们看一下我们生成的一些文件和文件夹，了解它们各自的作用。

pubspec.yaml 包含了有关Flutter包的信息以及该工程的依赖性。它还能让我们指定要添加到Flutter项目中的资产，如图片、字体等。
.gitignore 告诉 Git 在推送我们的代码到仓库时要忽略 Flutter 项目中的哪些文件。
README.md 包含用Markdown编写的关于项目的一般信息。这个文件描述了如何安装、运行和贡献给项目，以及其他一些事情。
CHANGELOG.md 是我们添加对项目所做修改的地方。这个文件也是用Markdown编写的

初始化Git repo

在我们继续前进之前，我们需要在项目中初始化一个Git repo。这在我们需要推送我们的包到pub.dev时有帮助。

运行下面的代码。

echo "# flutter_pkg" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:flutter-prjs/flutter_pkg.git
git push -u origin main

我们将在我们的homepage 或repository 字段中包含一个pubspec.yaml 。在homepage ，我们将添加我们包项目的Git repo URL。我们还将添加一个description ，向开发者清楚地描述这个包的作用。

name: flutter_pkg
description: A new Flutter package with a customized TextButton.
version: 0.0.1
author: Chidume Nnamdi
homepage: https://github.com/flutter-prjs/flutter_pkg

编写一个Flutter小部件

接下来，我们将根据自己的喜好创建一个自定义按钮的样式。

在lib/flutter_pkg.dart 中清除Flutter生成的原始代码。然后，添加CustomButton widget。

library flutter_pkg;

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
    );
  }
}

library flutter_pkg 的代码将我们的包的名称设置为flutter_pkg 。

首先，我们导入Flutter Material包--这是所有Flutter应用程序的根。接下来，我们创建了一个CustomButton 类，它扩展了StatelessWidget 类。这使得我们的CustomButton widget不持有或管理本地状态。

我们有三个属性，CustomButton widget构造函数将接收。

onPressed - 当CustomButton widget被按下或点击时，这个函数将被调用。
style - 这个属性将保存用户对按钮的自定义样式。用户可能会决定按照他们的口味来设计我们的CustomButton widget，所以他们会对样式进行编码，并通过style 属性将其传递给CustomButton widget。
child - 这是一个CustomButton 小组件的小组件树。这个树通常是一个Text widget，显示按钮上的文本

build 方法渲染了一个TextButton ，并对按钮进行了如下的样式设计。

padding - 填充物被设置为16.0 单位的所有侧面
primary - 按钮的主色被设置为蓝色
backgroundColor - 按钮的背景颜色被设置为蓝色
elevation - 按钮的阴影被提升到9.0 单位。
textStyle - 字体大小被设置为20个单位，使按钮看起来更大。
child - 这个属性渲染了CustomButton 小组件的小组件树。

我们的自定义按钮就像一个较小版本的 [TextButton](https://blog.logrocket.com/new-material-buttons-in-flutter/#textbutton).这个按钮渲染了一个定制的TextButton 。在我们的CustomButton ，我们增加了TextButton 的padding、levation、背景颜色和文本样式。

要使用这个小部件，请输入以下内容。

CustomButton(
    onPressed: _incrementCounter,
    child: const Text("Click me")
),

测试您的Flutter包

我们将需要测试我们的包，看看它是否在工作。要做到这一点，我们必须在我们的项目中创建一个Flutter项目。

flutter create example

在我们的flutter_pkg 项目中，将创建一个example 文件夹。

接下来，我们要在example Flutter项目中安装我们的flutter_pkg 。由于该软件包还没有发布到pub.dev，我们将参考本地的路径。

在example 项目中打开pubspec.yaml ，并添加这一行。

dependencies:
  flutter:
    sdk: flutter
  flutter_pkg:
    path: ../

path: ../ 告诉 Flutter 从路径../ 中获取flutter_pkg 依赖关系 - 也就是从它的父文件夹中。

打开lib/main.dart ，在_MyHomePageState widget中添加以下代码。

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            CustomButton(
              onPressed: _incrementCounter,
              child: const Text("Click me")
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

我们导入了flutter_pkg 包，然后我们将CustomButton widget设置在两个Text widget之间。

通过在命令行中运行flutter run ，运行example 项目。如果你使用的是VS Code，右键点击lib/main.dart 文件，点击 "不调试运行"。

我们的应用程序将看起来如下。

Flutter App Example

很好!我们的软件包正在工作。现在我们可以把它发布到pub.dev，这样其他开发者就可以使用我们的包了。

发布和分享您的Flutter包

现在我们知道我们的Dart包正在工作，我们现在可以把它发布到pub.dev，这样其他开发者就可以使用我们的包。

在我们发布我们的包之前，让我们在LICENSE 文件中添加一个许可证。

Copyright (c) 2021 Chidume Nnamdi
Permission is hereby granted to use this software as deemed fit.

接下来，我们将把我们的修改推送到Git。运行下面的代码。

git add . && git commit -m "Made some changes" && git push

现在是时候发布我们的包了。

flutter packages pub publish

会出现类似这样的内容。

Publishing flutter_pkg 0.0.1 to https://pub.flutter-io.cn:
|-- .gitignore
|-- .metadata
|-- CHANGELOG.md
|-- LICENSE
|-- README.md
|-- example
...

在底部，如果你还没有在pub.dev上获得授权，它将需要授权。

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&...wpFwBAMgkc&code_challenge_method=S256&scope=openid+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email
Then click "Allow access".

Waiting for your authorization...

然后你将不得不点击上面终端中的链接（Ctrl + Click）。最后，你会被提示通过你选择的Gmail账户授权访问。

Authorize via Gmail

注意：Flutter说，发布是永远的，意味着包不能被取消发布。

请看pub.dev上与此演示相关的已发布包。

Flutter pkg

Flutter pkg 0.0.1

总结

我们在本教程中涵盖了很多内容。我们首先介绍了Dart中的包，它们是什么，以及它们是如何被设计来与其他开发者分享代码的。

后来，我们学习了如何为Flutter包项目搭建脚手架以及如何编写包的代码。接下来，我们学习了如何在本地测试我们的Flutter包，最后，如何将我们的Flutter包发布到pub.dev。

The postHow to create Dart packages for Flutterappeared first onLogRocket Blog.