開発

【Flutter】Flutterでお絵かきアプリ(ペイント機能)の実装を紹介します

こんにちは。

スマホアプリをメインに開発しているロッキーカナイです。

今回は、Flutterでお絵かき機能を実装してみましたので、その紹介をいたします。

 

ざっくり仕様

  1. 画面をなぞると線が描写されるようにする
  2. undo(元に戻す)機能の実装
  3. redo(やり直す)機能の実装
  4. clear(削除)機能の実装
  5. undoとredo、clearボタンはフローティングボタンに配置する

以上!

 

コーディング

 

main.dartはペイントのページを呼び出すだけなので、以後変更はありません。

PaintPage.dartではフローティングボタンの用意をしただけのクラスになります。

こちらをベースに変更を加えていきお絵かき機能の実装をしていきます。

 

Flutterでペイント機能で全体の制御をまとめると、

新規でPainterクラス、PaintControllerクラス、_CustomPainterクラス、PaintHistoryクラスをつくります。

Painterクラスでは以下の機能や制御を行います。

  • ペイントをコントロールするクラス(PaintController)を保持。
  • 指のジェスチャーの取得
  • 線を描写するクラス(_CustomPainter)を保持

 

PaintControllerクラスでは以下の機能や制御を行います。

  • ペイントの履歴(PaintHistory)を保持
  • 線の太さなどの設定データを保持(または変更できる)
  • undoやredo、clearの制御の受け取り口を持っていて実行をPaintHistoryへ指示する

 

PaintHistoryクラスでは以下の機能をもっています。

  • ジェクチャーを受け取り線のデータを管理
  • undoやredo、clear機能

 

_CustomPainterクラスは、CustomPainterを継承しており、描写のカスタマイズをするためのものです。

 

全体コード

PaintPage.dart

 

Painter.dart

 

PaintHistory.dart

 

iOSシュミレータで確認

我ながら画伯っぷりを炸裂しましたな。

ちなみにundoやredo、clearも正常に動作しました。

 

PaintControllerを改変することで線の幅や色なども変更できます。

今回_PaintDataクラスには触れませんでしたが、ここに図形データや画像を入れられるようにすることで、線以外のお絵かきも可能です。それはまた機会があれば、紹介したいと思います。

 

エンドロール

エンドロールって書きたかっただけです。特になにもありません。

Flutter Webなるものがあるので、今後触る機会があったら記事にしたいと思います。

それでは。

ABOUT ME
ロッキーカナイ
ロッキーカナイ
SwiftやObjective-CでiOS開発や、Flutterを用いたiOS/Androidアプリ開発、PHPでLaravelを使ったWebアプリ開発などをしてます。趣味は猫と戯れる事、キックボクシングにハマってます。ちなみに名前のロッキーカナイは以前よく昼飯を食べてた所。