Tech

[Flutter]画像のトリミングを簡単に行えるimage_cropperを使ってみる

投稿日:

はじめに

今回は、トリミングなど画像加工を簡単に行えるimage_cropperを使ってみたいと思います。

準備

次のコマンドを使用し、パッケージをインストールします。

pubspec.yamlに以下が追加されていればOKです。

Androidで動かす場合、AndroidManifest.xmlに以下の追加が必要になります。

また、本サンプルではトリミングする画像を端末から取得するために、パッケージのimage_pickerを使用します。

こちらもpubspec.yamlに以下が追加されます。

また、image_pickerをiOSで使用する際は、端末の画像にアクセスするためNSPhotoLibraryUsageDescriptionを付与してください。

 

実装

サンプルのコードは以下になります。

 

image_cropperが画像の編集画面を用意しており、

画像の回転や

範囲を選択して切り抜きをこなうことができます。

また、切り抜く範囲の比率もある程度選択でき、例えばSquareを選択すると、切り抜き範囲が正方形になります。

さいごに

かなり簡単に使える上に、viewも用意してくれていてかなり優秀なパッケージだと思いました。プロフィールのアイコンなど画像設定するような機能を実装する際にはお供にしても良いかと思います。

おすすめ書籍

現場で使える Flutter開発入門 (Compass Booksシリーズ) はじめてのFlutter入門: iOS/Androidアプリ開発の⼀歩を踏み出そう!

blog-page_footer_336




blog-page_footer_336




-Tech
-

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

Firestoreのルール設定とdumpやrestoreが簡単に行えるfsrpl

1 はじめに2 Firestoreのルール設定2.1 全て許可2.2 本番環境でのルール設定例3 fsrpl3.1 fsrplとは3.2 インストール3.3 秘密鍵3.4 copy3.5 開発環境から ...

【Swift】Xcode13XCTestの新機能、繰り返し実行で遊んでみた。

1 はじめに2 XCTestについて3 繰り返しのテストについて4 実際に使ってみる5 テストコードについて6 テストの設定7 さいごに8 おすすめ書籍 はじめに こんにちは、suzukiです。とうと ...

ReactNativeでアニメーションの実装

1 はじめに2 準備3 実装3.1 イベントを通しての実行3.2 アニメーションについて4 lottie-react-native4.1 Lottieとは5 準備6 実装7 さいごに8 おすすめ書籍 ...

[Flutter]カメラのフレームデータを使ってリアルタイム画像認識

1 はじめに2 準備3 実装3.1 カメラプレビューの作成3.2 プレビューからフレームデータ取得3.3 フレームデータから画像認識3.4 画像認識した箇所に枠線の表示4 さいごに5 おすすめ書籍 は ...

ReactNative画面遷移

1 はじめに2 React Navigation3 React Navigationのインストール4 実装5 さいごに6 おすすめ書籍 はじめに こんにちはnukkyです。 ブログを書きながらアプリを ...

フォロー

blog-page_side_responsive

2022年4月
 12
3456789
10111213141516
17181920212223
24252627282930

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。