[Flutter] パッケージをpub.devへデプロイ

[Flutter] パッケージをpub.devへデプロイ

2023-05-29 hit count image

Flutterで使うパッケージをpub.devへデプロイする方法について説明します。

概要

Flutterでアプリを開発する時、共通ライブラリまたはオープンソースのためパッケージ(Package)を作ってhttps://pub.dev/へデプロイする時があります。

今回のブログポストではFlutterでアプリを開発する時必要なパッケージをpub.devへデプロイする方法について説明します。

pub.devデプロイ準備

pub.devへパッケージをデプロイするためにはpub.devに会員登録やPublisherを登録する必要があります。

まずhttps://pub.dev/サイトに移動した後、会員登録やログインをします。

Publish pub package - Login pub.dev site

その後、右上のMy pub.dev > Create publisherメニューを押します。

Publish pub package - Create publisher

pub.devへパッケージをデプロイするためにはGoogle Search Consoleに登録したドメインを持つ必要があります。ドメインを持ってる場合、Domain Nameへ当該ドメインを入力した後、START VERIFICATIONボタンを選択します。

Publish pub package - Add domain name

その後ドメインをチェックする手続きが進行します。全ての手続きが無事に通過したら、次のようにPublisherページに移動されることが確認できます。

Publish pub package - Publisher page

パッケージプロジェクト生成

次はpub.devへデプロイするパッケージプロジェクトを生成する必要があります。次のコマンドを実行してパッケージプロジェクトを生成します。

# flutter create --template=package [package_name]
flutter create --template=package deku_publish_example

その後lib/[package_name].dartファイルを修正してパッケージ内容を作成します。このブログポストではlib/round_button.dartファイルを生成して次のように修正しました。

import 'package:flutter/material.dart';

class RoundButton extends StatelessWidget {
  final String label;
  final Color? backgroundColor;
  final VoidCallback? onPressed;
  final bool? isLoading;

  const RoundButton({
    required this.label,
    this.onPressed,
    this.backgroundColor,
    this.isLoading,
    super.key,
  });

  Widget _renderLabel() {
    if (isLoading == true) {
      return const CircularProgressIndicator(
        color: Colors.white,
        strokeWidth: 3,
      );
    }

    return Text(label);
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: double.infinity,
      child: ElevatedButton(
        onPressed: isLoading == true ? null : onPressed,
        style: ElevatedButton.styleFrom(
          backgroundColor: backgroundColor,
          padding: const EdgeInsets.symmetric(vertical: 12.0),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(24.0),
          ),
        ),
        child: _renderLabel(),
      ),
    );
  }
}

その後、lib/deku_publish_example.dartファイルを次のように修正しました。

library deku_publish_example;

export 'round_button.dart';

もちろん、test/deku_publish_example_test.dartファイルを修正してテストがうまく動作するように修正しました。

Example生成

次はパッケージを使う例題プロジェクトを生成する必要があります。次のコマンドを使ってExampleプロジェクトを生成します。

# cd deku_publish_example
flutter create example

その後example/pubspec.yamlファイルを開いて下記のように先に作ったパッケージを追加します。

...
dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2
  deku_publish_example:
    path: ../
...

このように追加したパッケージを使って、lib/main.dartファイルを開いて次のように修正します。

import 'package:deku_publish_example/deku_publish_example.dart';
...
          children: <Widget>[
            ...
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            RoundButton(
              onPressed: _incrementCounter,
              label: 'Increment',
            ),
          ],
...

パッケージを使うように修正した後、シミュレータを実行して見ると次のようにパッケージの内容がうまく表示されることが確認できます。

Publish pub package - Package example

pubspec.yamlファイル修正

パッケージをデプロイするためにはpubspec.yamlに次のような内容を修正、追加する必要があります。

name: [Package Name]
description: [Description]
version: 0.0.1
homepage: [Homepage URL]
repository: [Repository URL]

Changelogファイル

バージョンの変更内容を記録するためChangelogファイルを生成する必要があります。CHANGELOG.mdファイルを生成して次のように修正します。

# CHANGELOG

## 0.0.1

Licenseファイル

当該パッケージのLinceseを作成する必要があります。LICENSEファイルを開いて次のように修正します。

MIT License

Copyright (c) [Project Owner]

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

この内容はGitHubで基本的提供するMITライセンスの内容です。

Readmeファイル

README.mdファイルもアップデートが必要です。今回のブログポストでは次のような内容を作成しました。

# Deku publish example

This is an example project for deployment.

デプロイテスト

全てのパッケージのデプロイ準備が終わりました。次のコマンドを実行してデプロイテストをやってみます。

flutter packages pub publish --dry-run

特に問題がなければ、次のような結果が表示されます。

...
Package has 0 warnings.
The server may enforce additional checks.

デプロイ

次は下記のコマンドを実行して実際パッケージをpub.devへデプロイしてみます。

flutter packages pub publish

そしたら、次のようにデプロイをするか確認する画面が表示されます。

...
Publishing is forever; packages cannot be unpublished.
Policy details are available at https://pub.dev/policy

Do you want to publish deku_publish_example 0.0.1 to https://pub.dev (y/N)?

yキーを押してデプロイを実行します。そしたら次のような結果が確認できます。

...
Uploading...
Successfully uploaded https://pub.dev/packages/deku_publish_example version 0.0.1.

結果に表示されたhttps://pub.dev/packages/deku_publish_exampleに移動したら次のようにうまくデプロイされたことが確認できます。

Publish pub package - Package is published

問題なくデプロイするためにはCHANGELOG.mdファイルのバージョンとpubspec.yamlのバージョンが同じにする必要がありますし、pub.devへデプロイされたことがないバージョンである必要があります。

デプロイ自動化

このようにパッケージを一回デプロイしたらGitHub Actionsを使ってデプロイを自動化することができます。デプロイを自動化する方法については下記のリンクを参考してください。

完了

これでFlutterで使うためのパッケージを作ってpub.devへデプロイする方法についてみてみました。皆さんもこのブログポストを参考して共通ウィジェットライブラリやオープンソースを作ってデプロイしてみてください。

私のブログが役に立ちましたか?下にコメントを残してください。それは私にとって大きな大きな力になります!

アプリ広報

今見てるブログを作成たDekuが開発したアプリを使ってみてください。
Dekuが開発したアプリはFlutterで開発されています。

興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。

Posts