ColorFiltered で カメラフィルタを実装する

2023/06/05 YOUTRUST x ゆめみ Flutter LT会
https://yumemi.connpass.com/event/284933/

Transcript

1. ColorFiltered で カメラフィルタを実装する 2023/06/05　YOUTRUST x ゆめみ Flutter LT会 @kumamo_tone
2. @kumamo_tone 2020 Flutter の学習をし始める 2021　カメラフィルターアプリ CapsCamera リリース 2022　株式会社Hataluck and Person（副業）で 　　　 Flutterアプリの技術選定、設計など 2023　株式会社YOUTRUSTに入社　←New! @@@https://twitter.com/kumamo_tone YOUTRUST https://youtrust.jp/users/kumamo_tone
3. CapsCamera • 青色のカメラフィルターアプリ • カメラの映像にリアルタイムで フィルターをかけることができる • 個人の依頼で作った ※Android
4. 経緯 • 何故青色のカメラフィルターアプリ？ ◦ アイドルグループのファン有志で、 アイドルの誕生日を祝うためにアプリを作る という企画 ◦ 祝われる方に以下の要素があるらしい ▪ フィルムカメラが好き ▪ イメージカラーが青 • その他の機能 ◦ ステッカーをデコする機能がある ◦ 作成した画像のダウンロード、シェア
5. ライブラリ検討 • photo_filters ◦ https://pub.dev/packages/photofilters ◦ ◯ WidgetにImageを渡すだけで フィルター画面のUIが構築できる ◦ ◯ 最初から使える フィルターが多数用意されている ◦ △ 撮影中にリアルタイムで フィルターする機能の example がない ◦ △ 青系のフィルターがあんまり青くなく、うま くカスタマイズできなかった
6. 最終的に採用した案 ColorFiltered( colorFilter: ColorFilter.matrix(filters[selectedFilterIndex]), child: CameraAwesome( … ), ), • 標準のWidget `ColorFiltered` で囲むだけ
7. ColorFiltered の基本的な使い方 ColorFiltered( colorFilter: const ColorFilter.mode( Colors.red, BlendMode.color, ), child: Image.network( 'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg', ), ), • colorFilter に ColorFilter.mode() を追加する ◦ 第1引数: 色 ◦ 第2引数: モード
8. ColorFiltered.mode の例 Colors.red, BlendMode.multiply Colors.red, BlendMode.screen Original
9. ColorFilter.matrix • 行列を使ってRGB+Aの値を変化させる ◦ さらに微妙な色合いの変化をつけたいとき • どの色味をどのくらい変化させるか指定することができる https://api.flutter.dev/flutter/dart-ui/ColorFilter/ColorFilter.matrix.html
10. ColorFilter.matrix の例 Gのみ + alpha (0, 0.1, 1) 0, 1, 0, 0, 0, 0, 1, 0, 0.1, 0, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, Inverted -1, 0, 0, 0, 255, 0, -1, 0, 0, 255, 0, 0, -1, 0, 255, 0, 0, 0, 1, 0, Original 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0,
11. matrix 作成の補助ツール • SVG Color Matrix Mixer ◦ https://fecolormatrix.com/ • 行列を入力するとリアルタイムに フィルター結果を見ることができる Webツール • ノンプログラマでも使える ◦ 色味の微調整を人にお願いできる （共同制作者が協力的な場合）
12. まとめ • カメラフィルターアプリを作った • 色味を変えるのは標準の ColorFiltered ウィジェットでできる • 詳細に色味を指定したいときは ColorFilter.matrix を使うと良い • matrix の確認に使える SVG Color Matrix Mixer という Webツールがある