TL;DR
-
signature パッケージの紹介
- undo、redo、clear などの機能が用意されているので、ボタンクリック時に呼び出すだけでよい
- 署名は ui.Image、PNG（Uint8List）、SVG などに変換可能
- 詳細な実装は サンプルアプリ を参照
概要
- 業務で signature パッケージを利用した署名機能を実装したので、備忘録も兼ねて紹介する
- 当該記事において、署名とは契約書などに記載するサインのことを指す
調査内容
パッケージ選定
- Flutter アプリで署名機能を実現するためのパッケージはいくつかある。以下に例を挙げる
- 今回はシンプルで使いやすそう、実装例がある、LIKE数・ダウンロード数がそれなりに多いという理由で、signature パッケージを採用した
作ったサンプルアプリ
- 署名エリア、undo ボタン、redo ボタン、clear ボタン、完了ボタン（署名反映エリアに取得した署名を反映する）、署名反映エリアというレイアウト構造のサンプルアプリを作成した
| プラットホーム | 動作 |
|---|---|
| iPhone |  |
| Android |  |
| macOS |  |
| Chrome |  |
実装例
- 署名に関する変数を定義する
late final SignatureController _controller; // 署名を管理するコントローラー
bool _hasSignature = false; // 署名済かどうか
ui.Image? _signatureImage; // 署名データ
-
initState()で SignatureController のインスタンスを作成する
void initState() {
super.initState();
WidgetsBinding.instance.addObserver(this);
// SignatureController のインスタンスを作成
_controller = SignatureController(
penStrokeWidth: 3.0, // 署名の線の太さ
penColor: Colors.black, // 署名の色
);
// 署名完了時に呼ばれるコールバック
_controller.onDrawEnd = () {
setState(() {
// 署名完了時に署名データの有無をフラグに代入
// 署名の有無を _controller.isNotEmpty で判定したかったが、
// 取得したいタイミングで意図した値にならない（署名が存在するのに false を返す）ことがあったので、
// 別途フラグを用意している
_hasSignature = _controller.isNotEmpty;
});
};
}
- パッケージの README に記載のある通り、忘れず dispose する
@override
void dispose() {
WidgetsBinding.instance.removeObserver(this);
_controller.dispose(); // dispose を忘れないこと
super.dispose();
}
- 画面回転したときに署名が残っていると署名エリア内に正しく描画されないので、クリアする
@override
void didChangeMetrics() {
super.didChangeMetrics();
_handleClear();
}
- 完了ボタンをタップしたら署名反映エリアに署名画像を反映する
Future<void> _handleComplete() async {
final image = await _controller.toImage();
setState(() {
_signatureImage = image;
});
}
- クリアボタンをタップしたら、SignatureController の clear 関数を呼び出し、フラグや保持している署名画像も初期化する
void _handleClear() {
_controller.clear();
setState(() {
_hasSignature = false;
_signatureImage = null;
});
}
- 署名エリアは Signature Widget で実現する
child: Signature(
controller: _controller,
backgroundColor: Colors.white,
),
- undo 関数で直前の描画内容を取り消し、redo 関数で取り消した描画内容を復元できる
IconButton(
onPressed: _controller.undo,
icon: const Icon(Icons.undo),
),
IconButton(
onPressed: _controller.redo,
icon: const Icon(Icons.redo),
),
- SignatureController の toImage 関数で ui.Image に変換した署名画像を、RowImage Widget で描画する
child: RawImage(
image: _signatureImage,
width: double.infinity,
height: double.infinity,
fit: BoxFit.contain,
),
コード全体
-
signature_page.dart
import 'dart:ui' as ui; import 'package:flutter/material.dart'; import 'package:signature/signature.dart'; class SignaturePage extends StatefulWidget { const SignaturePage({super.key}); @override State<SignaturePage> createState() => _SignaturePageState(); } class _SignaturePageState extends State<SignaturePage> with WidgetsBindingObserver { late final SignatureController _controller; bool _hasSignature = false; ui.Image? _signatureImage; static const double _buttonAreaHeight = 44.0; static const double _buttonSpacing = 16.0; static const double _contentPadding = 16.0; @override void initState() { super.initState(); WidgetsBinding.instance.addObserver(this); _controller = SignatureController( penStrokeWidth: 3.0, penColor: Colors.black, ); _controller.onDrawEnd = () { setState(() { _hasSignature = _controller.isNotEmpty; }); }; } @override void dispose() { WidgetsBinding.instance.removeObserver(this); _controller.dispose(); super.dispose(); } @override void didChangeMetrics() { super.didChangeMetrics(); _handleClear(); } Future<void> _handleComplete() async { final image = await _controller.toImage(); setState(() { _signatureImage = image; }); } void _handleClear() { _controller.clear(); setState(() { _hasSignature = false; _signatureImage = null; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('署名'), ), body: SafeArea( child: Padding( padding: const EdgeInsets.all(_contentPadding), child: LayoutBuilder( builder: (context, constraints) { final contentHeight = (constraints.maxHeight - _buttonAreaHeight - _buttonSpacing * 2) / 2; return Column( children: [ SizedBox( height: contentHeight, child: Container( decoration: BoxDecoration( border: Border.all(color: Colors.grey), borderRadius: BorderRadius.circular(8), ), child: ClipRRect( borderRadius: BorderRadius.circular(8), child: Signature( controller: _controller, backgroundColor: Colors.white, ), ), ), ), const SizedBox(height: _buttonSpacing), SizedBox( height: _buttonAreaHeight, child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ IconButton( onPressed: _controller.undo, icon: const Icon(Icons.undo), ), IconButton( onPressed: _controller.redo, icon: const Icon(Icons.redo), ), IconButton( onPressed: _handleClear, icon: const Icon(Icons.clear), ), if (_hasSignature) ElevatedButton( onPressed: _handleComplete, child: const Text('完了'), ), ], ), ), const SizedBox(height: _buttonSpacing), SizedBox( height: contentHeight, child: Container( decoration: BoxDecoration( border: Border.all(color: Colors.grey), borderRadius: BorderRadius.circular(8), ), child: _signatureImage != null ? ClipRRect( borderRadius: BorderRadius.circular(8), child: RawImage( image: _signatureImage, width: double.infinity, height: double.infinity, fit: BoxFit.contain, ), ) : const Center( child: Text('署名を入力してください'), ), ), ), ], ); }, ), ), ), ); } }
まとめ
- なんとなく面倒なイメージがあった署名機能もパッケージを利用することで簡単に実装できた