Zenn
Open4

【Flutter】パッケージに依存する実装をAIと一緒に解決してみた

Flutter
ai開発
Gemini
olive_coffeeolive_coffee

記事の内容

要件

  • crop_your_imageを使用すること
  • ボトムシート内で画像のトリミングを行うこと
  • トリミング範囲を横幅を軸にした正方形で画面に固定し、トリミング位置の調整は画像を移動させること
  • ドラッグの操作はトリミングを行う際の画像の移動を優先すること
  • 画像の移動が限界値に達したときに、ボトムシートのスクロールを優先すること

該当パッケージ

https://pub.dev/packages/crop_your_image

利用するAIサービス

  • IDE: Cursor
  • Mode: Agent
  • Model: gemini-2.5-pro

現状の課題

ズームイン/ズームアウトを除いて、ボトムシートのスクロールが優先される

olive_coffeeolive_coffee

パッケージ全貌を吐き出させてみた

プロンプト

以下要件のMDファイルを作成してほしい。

# 要件
- このパッケージの仕様を把握したい
- クラスごとに表を作成し、仕様をまとめてください
- １クラスに対する表のレコードは、パラメータやfactoryメソッド等の粒度につき1レコード作成してください
- １クラスに対する表のカラムは、パラメータ名/メソッド名・種別（パラメータ or メソッド）・データ型/返却値・初期値・解説・実装例の6つで作成してください
- 可能な限り全てのますを埋めるようにしてください
# 該当パッケージ
@https://pub.dev/packages/crop_your_image

出力結果

こんな感じでMDファイルを作成してくれた。
まあ、APIリファレンス見ろよって話だけど、感覚としてはそれを日本語にしてくれたから少し読みやすくなったかなという感じ。でも英語疎い人間からすると、Google翻訳かけながらリファレンスを読み込むのは結構しんどいから、そこの手間を省けたのはありがたいかも。

これで分かったこと

  • そもそもボトムシート内で表示する想定がされてなさそう
  • トリミング方法として、クロップ領域を固定する方法とクロップ領域を動かす方法のどちらも考慮されている
  • スクロールに着目した時に、今回の課題を直接的に解決するパラメータはないが、画像の操作によるコールバックやメソッドは十分に用意されている
  • 初期位置のRectも取得できる。これは使えそう。
olive_coffeeolive_coffee

課題解決の具体化をしていく

今回AIにやらせたいこと

  • あくまで技術選定（ロジックの考案）は自分自身で行う
  • ロジックを渡した上でそれの実現に利用できるパッケージの機能をまとめてもらう

プロンプト

@crop_your_image_spec.md 
添付したMDファイルを参考に、以下の要件を満たすMDファイルを新しく作成してください。

# 前提
- ScrollableなWidgetの子要素にCropパッケージを置いたときに、画像の移動と親Widgetのスクロールが競合します
- 画像上部の位置がトリミング領域の一番上と重なった際にのみ、親Widegtのスクロールを優先する処理を実現させたい

# 要件
- Scrollの優先度を変更する処理を追加するとして、画像の上部がトリミング領域の上部と重なったことを確認したい
- 上記の判定の判断材料になるパラメータ/メソッドを添付したMDファイルから抜粋した表を作成してください

# 該当パッケージ
@https://pub.dev/packages/crop_your_image

出力結果

見ただけの感想…優秀。

これで分かったこと

  • 実装イメージまで言語化してくれたのはありがたい
  • 文章を読む限りは納得のいく内容となっているため、どのパラメータの動作から確かめればいいか明確になった
olive_coffeeolive_coffee

実際に書いてみた

まあそんなもんだよねって感じです。

前回の投稿で載せましたが、AIはonImageMovedのコールバック内でCropControllerのrectパラメータを取得し、画像とクロップ領域のRectを比較すればいいとのことだった。

実践した結果以下のエラーが発生。

エラー

// ゲッター「rect」はタイプ「CropController」に定義されていません。
The getter 'rect' isn't defined for the type 'CropController'.
// 「rect」を定義しているライブラリをインポートするか、名前を既存のゲッターの名前に修正するか、「rect」という名前のゲッターまたはフィールドを定義してみてください。
Try importing the library that defines 'rect', correcting the name to the name of an existing getter, or defining a getter or field named 'rect'.

そもそもCropControllerにrectなんていうプロパティは存在しないとのこと。

幸いなことに他の方法も提示してくれているので、詰みではなさそう。

疑問

なぜAIはCropControllerにrectというパラメータが存在しているというレスポンスを返してきたのか？？

ネクストアクション

  • CropController.rectの存在を確認する
  • クロップ領域の閾値(Rect)を別の方法で取得・管理する