Flutterで手書きをする方法(Signature)

Signature のインストール

以下の文を実行するだけで必要なパッケージは揃います。

shell

$ flutter pub add signature

これでインストールは完了です。

実装

最小構成で実装してみます。
Signatureウィジェットにはcontorollerというプロパティが必須です。
そのため

SignatureController controller = SignatureController();

でcontollerを作成して

Signature(contoroller: contoroller);

と渡してあげることで表示されるようになります。
あとはcontorollerで保存やredo, undo, clearなどのメソッドを呼ぶことでSignatureに機能を追加することができます。

main.dart

import 'package:flutter/material.dart';
import 'package:signature/signature.dart';

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

class MyApp extends StatelessWidget {
  MyApp({super.key});

  SignatureController controller = SignatureController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Signature(
      controller: controller,
    ));
  }
}

とりあえず、これだけでも画面には表示されます。

こんな感じです。

ペンの太さなどの変更

main.dart

class MyApp extends StatelessWidget {
  MyApp({super.key});

  SignatureController controller = SignatureController(
+    penStrokeWidth: 10,
+    penColor: Colors.black,
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Signature(
      controller: controller,
+      backgroundColor: Colors.white,
    ));
  }
}

こんな感じです。

その他のカスタマイズ

• 大きさ変更

return MaterialApp(
    home: Signature(
+  width: 300,
+  height: 300,
  controller: controller,
  backgroundColor: Colors.white,
));

• 保存 クリア やり直し 先に戻る

controller.toImage(); //保存(他の保存形式もあります)
contoroller.clear(); // クリア
contoroller.undo(); //　やり直し
contoroller.redo(); // 先に戻る

これを呼ぶことで消したり保存したりできます。
これで一通り簡単な手書きを作成することはできると思います。

その他もっと機能がありますが、ここで紹介しきれないので公式ドキュメントを確認してください！
以上です。お疲れ様でした。