FlutterでのDartパッケージ作成手順

FlutterでDartパッケージ（いわゆるライブラリ）を作成したため、備忘のため作成手順をまとめておきます。

Flutterには「Dartパッケージ」と「プラグインパッケージ」がありますが、今回は「Dartパッケージ」の作成手順になります。
参考: https://docs.flutter.dev/development/packages-and-plugins/developing-packages#types

開発にはAndroidStudioを利用しています。

Android Studio Bumblebee | 2021.1.1 Patch 2
Build #AI-211.7628.21.2111.8193401, built on February 17, 2022
Runtime version: 11.0.11+0-b60-7772763 aarch64
VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o.
macOS 12.2.1

AndroidStudioでFlutterプロジェクトを作成する

AndroidStudioを起動後、「Plugins」から「Flutter」と「Dart」プラグインをインストールします。

その後、「Projects」の「New Flutter Project」から新規プロジェクトを作成します。

「Flutter」を選択し、Flutter SDKが保存されているパスを指定して「Next」を押下します。

次にプロジェクト名や保存場所を指定します。「Project type」を「Package」にすることで、Flutterのパッケージを作成することが可能です。
ここが初期値の「Application」のままだと通常のFlutterアプリのテンプレートとして作成されるため、忘れずに指定しましょう。
設定完了後に「Finish」を押下します。

以上でFlutterパッケージのテンプレートが作成されます。

動作確認用のアプリを作成する

初期状態では、アプリにパッケージを組み込んだ際の動作確認がプロジェクト内でできません。
そのため、パッケージの動作確認用のアプリをプロジェクト内に作成します。
プロジェクト直下で書きコマンドを実行し、 example アプリを作成します。

flutter create example

コマンド実行後、example というディレクトリが作成されます。

その後、 example/pubspec.yaml に下記を追加します。
これによって、パッケージのコードをアプリ内で読み込んで使用できるようになります。

example/pubspec.yaml

dependencies:
  flutter:
    sdk: flutter

  # ここから追加
  sample_package:
    path: ../
  # ここまで

パッケージの機能をアプリで読み込んでみる

アプリ作成時のサンプルコードを、一部パッケージに移動させて読み込ませてみます。
下記コードを、パッケージの lib/sample_package.dart に記述します。

lib/sample_package.dart

library sample_package;
import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

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>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

次に、 example/lib/main.dart で、パッケージのコードを読み込みます。
2行目の import 'package:sample_package/sample_package.dart'; でパッケージ内のファイルをインポートして、パッケージ内で定義されている MyHomePage クラスを使用できるようにしています。

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:sample_package/sample_package.dart'; // パッケージファイルをインポート

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

ビルド設定を行い動作確認

上部ツールバーから「Edit Configuretions...」を選択します。

その後、表示されるダイアログの左上の「＋」ボタンから「Flutter」を追加し、「Dart entrypoint」に example/lib/main.dart までのパスを指定します。
「Name」は main.dart とします。

設定完了後、「Run -> Run 'main.dart'」を選択し、動作を確認します。

無事に動いてそうです！

以上で、パッケージの作成から読み込みまで完了することができました。
パッケージ側に処理を追加していって、アプリ側から読み込む流れが理解できました。