Flutterで作るお絵かきアプリ

GitHub: https://github.com/takashi0602/oekaki_sample
Demo: https://drive.google.com/file/d/163V7whyjhksQ8ZA5zAYGYDMb4NdwzaKf/view?usp=sharing

Transcript

1. Flutterで作る お絵かきアプリ たかし
2. 目次 - 自己紹介 - 完成デモ - アプリの構成 - 前提知識 - CustomPaintウィジェットとは - CustomPainterクラスとは - コードを見る - 改めて完成デモ - おわりに
3. 自己紹介
4. 自己紹介 - 名前: たかし（高橋秀明） - 所属: 株式会社ゆめみ - 趣味: 旅行 - 好きな人: 大谷翔平 - X（旧Twitter）: https://x.com/takashimelon - よかったらフォローしてね！
5. 完成デモ
6. 参照: https://drive.google.com/file/d/163V7whyjhksQ8ZA5zAYGYDMb4NdwzaKf/view?u sp=sharing
7. アプリの構成
8. アプリの構成 - Flutter v3.22.1 - Riverpod v2.5.1 - https://github.com/takashi0602/oekaki_sample
9. 前提知識
10. CustomPaintウィジェットとは - ペイントを描画するキャンバスを提供するウィジェット - CustomPainterクラスを用いて、キャンバスに描画する 参照: https://api.flutter.dev/flutter/widgets/CustomPaint-class.html
11. CustomPainterクラスとは - ペイント（図やパスなど）を扱うクラス - 抽象クラスのため、サブクラスを作成して使用する - paintメソッドとshouldRepaintメソッドをオーバーライドする必要がある - paintメソッド: 何をどのように描画するかを指定する - shouldRepaintメソッド: 再描画の条件を指定する 参照: https://api.flutter.dev/flutter/rendering/CustomPainter-class.html
12. コードを見る
14. コードを見る - CustomPainterを継承したPathPainterを作成する - 引数にpathを受け取るような作りとしている - paintメソッド内でdrawPathメソッドでパスを描画する - shouldRepaintメソッドの返り値を常にtrueにすることで、ペンの動きに合わせてパ スを再描画する 参照: https://github.com/takashi0602/oekaki_sample/blob/main/lib/components/path_pai nter.dart
16. コードを見る - PathPainterで使用するPathを保持するプロバイダーの作成する - Pathクラスと命名が被るため、 DrawPathとしている - moveToメソッドでパスの描画を開始する - lineToメソッドで点と点を繋いでパスを生成する - その際にref.notifyListeners()を実行することで、lineToメソッドで作成されたパスをキャンバスに描 画している - endPathメソッド内でdrawPathHistoryProviderにパスを追加し、新しいPathクラス を作成することで、新たなパスを描画することが可能に 参照: https://github.com/takashi0602/oekaki_sample/blob/main/lib/providers/draw_path_ provider.dart
18. コードを見る - 各プロバイダーからパスとパスの履歴を取得 - GestureDetectorを使用してOffsetを取得し、Offsetを用いてプロバイダーのステー ト（パス）を更新する - CustomPaintを使用してPathPainterをキャンバスに描画する - Stackで囲むことにより、過去のパスの上に現在描画しているパスを重ねて表示することができる 参照: https://github.com/takashi0602/oekaki_sample/blob/main/lib/components/canvas_ area.dart
19. 改めて完成デモ
20. 参照: https://drive.google.com/file/d/163V7whyjhksQ8ZA5zAYGYDMb4NdwzaKf/view?u sp=sharing
21. おわりに
22. おわりに - 今回のサンプルはお絵描きアプリの超基本機能のみ実装している - PathPainterのPaintを更新できるような機構を作ることで、パスの色や太さを変更 できる - 可能性は無限大⭐
23. ご清聴ありがとうございました