Flutterでライブラリを作ってみた - ユニファ開発者ブログ

この記事は Unifa Advent Calendar 2023 の19日目の記事です。

こんにちは、Androidエンジニアのジャズニーです。

世の中にあるほとんどのサービスがウェブの入力フォームを記入することで登録ができてしまうこんにち。インターネットさえあれば、何時でも、何処でも登録や申し込みができてすごく便利ですが、外国人の僕からするとそうではない場合が多いです。

例えば、僕は苗字が二つに名前なので、氏名欄の入力可能文字数が20文字程度、スペースの使用禁止のフォームには毎回確認ボタン後に編集作業があります。　また、全角のみ受け付ける入力欄でアルファベットの名前を入力するのもちょっと手間なので、自動で全角に変換される入力欄がある場合は涙が出るほど嬉しいです。

これ以外にもまだいくつかあるのですが、リストアップするとキリがないのでこれくらいにしておきます。最大入力可能文字数は自分ではどうしようもないので諦めたのですが、他の入力欄でもう少し楽に入力したり、自分が慣れている感じの入力欄に近づけることはできないかと考えていた時に、開発の勉強を始めた当初から頭の片隅で埋もれていたアイデアを思い出して自分に宣言。

「そうだ！ライブラリを作ろう！」

技術選定

ライブラリを作ると決めたタイミングで、Android用にライブラリを作っても、日本で使って欲しいので、使用数がかなり限られると思いより多くの人に使ってもらうにはどうしようと悩んでいた時に、友人からFlutterを勧められて、少し調査をして初めてだったので少し苦労はするが面白そうだったのでFlutterを採用。

仕様の取り決め

入力フォームといっても入力欄の文字制限のようにライブラリだけではどうしようも無いものもあるので、まずは自分がモヤモヤしている電話番号や郵便番号などの入力欄でハイフンの左右に入力欄があるタイプのUI、クレジットカード等の番号で複数の入力欄に分かれているが、一つの入力欄の上限に達しても次の入力欄に移動してくれない。

デザイン上入力欄を分けた方が見栄えがいいのかもしれないが、今回は入力のしやすさ重視で一つの入力欄にとにかく情報だけを入れれば、自動で指定したフォーマットにしてくれる、そういったちょっと便利なフォーマッターが集まっている簡単なライブラリにすることに決めました。

実装

右も左もわからない状態でスタートしたライブラリ開発。とりあえず簡単なプロジェクトを作成し画面に複数の入力欄を追加してFlutterのTextInputFormatterクラスのドキュメンテーションを確認。あとは、TextInputFormatterを継承した自分のクラスにロジックのコードを追加して、画面でフォーマッターを入力欄に設定、動かして、試して、微調整しての繰り返し、こうして一つ目のフォーマッター、郵便番号用のフォーマッターが完成。

/// A [TextInputFormatter] that format the input to the japanese postal code
/// format(XXX-XXXX).
///
/// If [enableMark] is true, then the postal code mark (〒) will be add at
/// the beginning of input
class PostalCodeInputFormatter extends TextInputFormatter {
  //define the field max length
  final int maxLength = 7;

  final bool enableMark;

  PostalCodeInputFormatter({this.enableMark = false});

  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    final newValueLength = newValue.text.length;
    var substrIndex = 0;

    if (newValueLength == 0) {
      return newValue;
    }

    if (newValueLength > maxLength) {
      return oldValue;
    }

    final newText = StringBuffer();

    if (enableMark) {
      newText.write('〒');
    }

    if (newValueLength >= 4) {
      newText.write('${newValue.text.substring(0, substrIndex = 3)}-');
    }

    if (newValueLength > substrIndex) {
      newText.write(newValue.text.substring(substrIndex));
    }

    return TextEditingValue(
      text: newText.toString(),
      selection: TextSelection.collapsed(offset: newText.length),
    );
  }
}

ライブラリ公開

やり方が全くまからない状態で始めたライブラリ開発、公開するためには、プロジェクトの構成が普通のプロジェクト違っていてそれを知らずに作業を進めた自分。　プロジェクトの構成を変更する作業が発生、その後に、ライセンスの選択、Readmeをなるべく誰が見てもわかるように書くなどの細々とした作業の末ようやく公開の準備ができたところで、公開作業をDartのパッケージ公開ページの手順に沿って実施して無事公開できました。

まとめ

ライブラリ自体は去年から公開されていますが、初めてライブラリを作ってみて最初は戸惑ったりしましたが、他の方が作成したライブラリのコードや作り方のブログ投稿などをみて無事作成することができました。　この経験でコミュニティーへの貢献がどんなに大事なものなのか改めて考えるきっかけになりました。

今回作成したライブラリについて詳しく知りたい、使ってみたい場合は以下のリンクを使ってください。

pub.dev

ユニファではプロダクトを一緒に創っていく仲間を募集しています！

unifa-e.com