Flutterパッケージを作りました

2021.5.22 Sat.

Flutter Meetup Osaka #7

​

中條 剛（ちゅうじょう つよし） @chooyan_i18n

自己紹介

中條 剛（ちゅうじょう つよし）

• フリーランスエンジニア
• Flutterでアプリ開発してます
• 講師・メンターもしています

記事書いてます

Zenn�Flutterの how it works な記事

Qiita�いろいろ技術記事

エンジニアファースト�フリーランスの真面目な話

​

@chooyan_i18n

@chooyan-eng

Flutterパッケージを作って公開しました

crop_your_image

画像の切り抜きパッケージ

draw_your_image

フリーハンドのお絵描きパッケージ

Flutterパッケージを作って公開しました

いい感じの

LIKESとPOPULARITY

“crop image” で検索して2番目！

Flutterパッケージを作って公開しました

ありがたいお声の数々（issueより抜粋）

Flutterパッケージを作って公開しました

Flutter パッケージを開発し、公開し、そして Reddit で 100 Upvote された話

https://zenn.dev/chooyan/articles/f358c9a80f471e

今日話したいこと

1. どこにでも置ける Crop
2. Crop と CropController
3. 最低限のAPI

crop_your_image の設計こだわりポイント

1. どこにでも置ける Crop

• Flutter標準のWidget（Text や Image など）と同じようにどこにでも気軽に置けるようにした。�
• Crop を置いたときに表示されるのは □ で囲った部分のみ。
• 元画像
• 切り抜き範囲を選択するUI
• 余白�
• 理屈上は（不具合などがなければ）ダイアログのやボトムシートの中にも置けちゃう。�
• 切り抜いた後どんなUIを出すかも自由。

2. Crop と CropController

• インターフェースとなるクラスはシンプルに以下の2つ
• Crop
• CropController�
• Crop
• 前ページの通り、切り抜きのUIを表すWidgetクラス
• CropController
• 切り抜きに関する操作を実行するためのController
• 任意のタイミングで好きなメソッドを呼び出せる�
• □ で囲った部分は全てパッケージを利用する “アプリ側” で用意したUI。

3. 最低限のAPI

​

​

• crop_your_imageが提供しないものを明確に決めた
• 切り抜き範囲選択以外のUI
• 切り抜き実行ボタン
• 比率変更ボタン
• など
• 切り抜きに直接関係のない機能
• 画像データの読み込み（カメラロールから画像を取得する、とか）
• 画像のデータ型の変換（File → UInt8List の変換とか）�
• 開発やメンテが楽になるとともに、好きなパッケージと組み合わせられる効果を狙った。

課題

​

• ズームイン / アウト操作ができない
• issueでも要望が多いが、ズーム値に応じた切り抜き範囲の計算が大変！
• 今の切り抜きUIとズームイン / アウトが絶妙にマッチしない。仕様の検討が必要。�
• 手をつける時間がとれなくなってきた
• たぶん多くのオープンソースであるあるな問題
• 地味にissueが来る（ありがたいことに）ので、放置してる感じになってしまう

プルリクいつでもお待ちしています！（切実）

https://github.com/chooyan-eng/crop_your_image/issues

ご静聴いただきありがとうございました

パッケージ開発はいいぞ

その他のアピールポイント

• Null-Safety
• デスクトップアプリでも使える
• 丸く切り抜ける
• 任意の比率で固定できる
• プログラムでも切り抜き範囲指定できる
• 四隅のドットも好きなWidgetに変更できる
• いろいろ色変えられる
• など