Slide 1

Slide 1 text

ColorFiltered で カメラフィルタを実装する 2023/06/05 YOUTRUST x ゆめみ Flutter LT会 @kumamo_tone

Slide 2

Slide 2 text

@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

Slide 3

Slide 3 text

CapsCamera ● 青色のカメラフィルターアプリ ● カメラの映像にリアルタイムで フィルターをかけることができる ● 個人の依頼で作った ※Android

Slide 4

Slide 4 text

経緯 ● 何故青色のカメラフィルターアプリ? ○ アイドルグループのファン有志で、 アイドルの誕生日を祝うためにアプリを作る という企画 ○ 祝われる方に以下の要素があるらしい ■ フィルムカメラが好き ■ イメージカラーが青 ● その他の機能 ○ ステッカーをデコする機能がある ○ 作成した画像のダウンロード、シェア

Slide 5

Slide 5 text

ライブラリ検討 ● photo_filters ○ https://pub.dev/packages/photofilters ○ ◯ WidgetにImageを渡すだけで フィルター画面のUIが構築できる ○ ◯ 最初から使える フィルターが多数用意されている ○ △ 撮影中にリアルタイムで フィルターする機能の example がない ○ △ 青系のフィルターがあんまり青くなく、うま くカスタマイズできなかった

Slide 6

Slide 6 text

最終的に採用した案 ColorFiltered( colorFilter: ColorFilter.matrix(filters[selectedFilterIndex]), child: CameraAwesome( … ), ), ● 標準のWidget `ColorFiltered` で囲むだけ

Slide 7

Slide 7 text

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引数: モード

Slide 8

Slide 8 text

ColorFiltered.mode の例 Colors.red, BlendMode.multiply Colors.red, BlendMode.screen Original

Slide 9

Slide 9 text

ColorFilter.matrix ● 行列を使ってRGB+Aの値を変化させる ○ さらに微妙な色合いの変化をつけたいとき ● どの色味をどのくらい変化させるか指定することができる https://api.flutter.dev/flutter/dart-ui/ColorFilter/ColorFilter.matrix.html

Slide 10

Slide 10 text

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,

Slide 11

Slide 11 text

matrix 作成の補助ツール ● SVG Color Matrix Mixer ○ https://fecolormatrix.com/ ● 行列を入力するとリアルタイムに フィルター結果を見ることができる Webツール ● ノンプログラマでも使える ○ 色味の微調整を人にお願いできる (共同制作者が協力的な場合)

Slide 12

Slide 12 text

まとめ ● カメラフィルターアプリを作った ● 色味を変えるのは標準の ColorFiltered ウィジェットでできる ● 詳細に色味を指定したいときは ColorFilter.matrix を使うと良い ● matrix の確認に使える SVG Color Matrix Mixer という Webツールがある