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


関連記事

ReactNative開発のスタート、シミュレータでのデバッグ

1 はじめに2 改めてシミュレータの起動3 表示内容を変更してみる3.1 App.js3.2 表示テキストの変更3.3 シミュレータの更新「command + R」4 デバッグメニュー4.1 Real ...

ReactNative入門

1 はじめに2 そもそもReact Nativeとは3 JSXとは3.1 JSXに値を埋め込む3.2 属性の値を設定する3.3 関数でJSXを作る4 コンポーネントとは4.1 再利用性4.2 新規コン ...

iOS13ダークモード対応

1 はじめに2 一時しのぎ3 実装3.1 UI Element Colors3.2 Color Set3.3 コードで描きたい3.4 カスタムのカラーを定義する3.5 画像をモードで動的に変更したい4 ...

【Unity】TextMeshProで文字の表示と日本語入力

1 はじめに2 プロジェクトに追加3 TextMeshProのプロパティ4 日本語を使うには5 さいごに6 おすすめ書籍 はじめに こんにちはsuzukiです。unityをアップデートしたらTextが ...

【Unity】Animatorを利用するための基本知識

1 はじめに2 Animator3 Stateの追加4 Transitionの追加5 パラメーターの作成6 さいごに7 おすすめ書籍 はじめに こんにちはsuzukiです。今回はunityのanima ...

フォロー

blog-page_side_responsive

2022年4月
 12
3456789
10111213141516
17181920212223
24252627282930

アプリ情報

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