[flutter]ものすごく簡単にカメラと画像選択(ギャラリー)を実装して画像を取得できる様にする

LINEでの画像アップロードのような、カメラで撮影した画像を取得したりギャラリーで選択した画像を取得する処理は、かなり実装が面倒なのですが、そこはさすがFlutter。公式がパッケージを出しているので使っていきます。

導入

まずはpubspec.yamlにて記述を追加。

dependencies:
  image_picker: ^0.6.7+22

バージョンは適宜適切なものを指定してください。

image_picker install | Flutter package
Flutter plugin for selecting images from the Android and iOS image library, and taking new pictures with the camera.

その後、iOS側でinfo.plistに追加。ios/Runnerの中にあります。

<key>NSPhotoLibraryUsageDescription</key>
<string>requires to access photo library</string>
<key>NSCameraUsageDescription</key>
<string>requires to use your camera</string>
<key>NSMicrophoneUsageDescription</key>
<string>requires to use your microphone</string>

英語力は壊滅的なので良い感じに変えてください。

Android側はSDKバージョンが<29ならパーミッションが必要だと書いてあります。とりあえずbuild.gradleのtargetSdkVersionを29に変えておきました。

ここの変更はホットリロードでは反映されないので気をつけてくださいね。

実装

使いたいpageにてimport追加。

import 'dart:io';
import 'package:image_picker/image_picker.dart';

そして以下のコードを実装。まずはカメラです。

final picker = ImagePicker();


var pickedFile = await picker.getImage(source: ImageSource.camera);
File file = File(pickedFile.path);

ちなみに許可されていない場合は以下のエラーが発生します。

PlatformException (PlatformException(camera_access_denied, The user did not allow camera access., null, null))

なのでtry-catchも書いておきましょう。

try{

}
on PlatformException catch (err) {
  print(err);
}

ここで何かしら、設定画面を開いて変更するように促す必要がありますね。

ギャラリーで画像選択はこちら。

var pickedFile = await picker.getImage(source: ImageSource.gallery);
File file = File(pickedFile.path);

なんと列挙型の値をgalleryに変えるだけなのです。非常に簡単です。

ちなみに2021/02現在、iOSのシミュレータだと2度目のImagePicker起動時に落ちてしまう現象が発生します。シミュレータのバグだそうです。またカメラも使えませんので、しっかりとデバッグするなら実機が必要かも。

あとはimageで表示したりするだけ!簡単ですね。また、端末内に保存したい場合もFileのままでいいので助かります。

レンタルサーバはConohaWINGが最強にオススメ!

muchilogでは今までいろんなレンタルサーバやSaaSを使ってきましたが、今では全てをConohaWINGにて運営しています。

■今まで使ってきたサービス一覧
・さくらレンタルサーバ(ベーシックプラン)
・カゴヤ
・Azure
・AWS

今ではこのブログは勿論、webサービスのバックエンドやアプリのサーバ機能もConohaWINGで動かしています。
そんなConohaWINGのメリットをいくつか紹介します!

【国内最速No.1】高性能レンタルサーバーConoHa WING

無料で最大2個の独自ドメインが使える!

サイト運営に必要な独自ドメインをなんと無料で取得することが可能です!これだけでも月100円以上は運営費が節約できます。

優れた速度と安定感

私がAzureやさくらを解約した大きな理由はこれ。Conohaは非常に安定して稼働しており、ダウンタイムがほぼ発生しません。発生した場合は潔くお知らせしてくれます。
また、このブログは勿論、バックエンドとして動いてるプログラムも処理速度が大幅に向上しました(体感で倍速以上)。 Azure等のSaaSからレンタルサーバに移行するって普通考えられませんよね?しかし実際に大きなメリットを感じているのです。

頻繁に開催されるキャンペーン

ConohaWINGは半額に迫るようなキャンペーンを頻繁に開催しています。このキャンペーンによって、性能的には業界トップクラスであるにも関わらず、 月額料金換算で最安値クラスで使えるのです。
基本的に長期一括契約の方がお得になるため、muchilogでは最長で契約することをオススメします。価格と性能のバランスを考えれば他に乗り換えることも考えれられませんし。

レンタルサーバは必須です!

web系のプログラミング学習を進める際には、レンタルサーバの契約は必須と思ってください。ローカルの環境と本番環境で動作が違うことは良くありますし、ポートフォリオを公開するのも大切です。

学習や制作に集中するためにも、満足度、速度、安定度全てのレベルが高いConohaWINGを最強にオススメします!

web系サービス開発会社に転職したい!

muchilogではIT系へ転職したいという方には「自社サービスを運営しているweb系企業」への転職をおすすめしています。

web系は「自由な社風」「成長できる環境」「ホワイトな労働条件」であることが多いからです。

そんなweb系企業への転職を確実にするためのプログラミングスクールが登場しました。


RUNTEQ

RUNTEQはただのスクールじゃない!

RUNTEQはweb系の開発会社。開発会社が運営するスクールなので必要とされる技術力は勿論習得可能。しかしそれだけではないのです。

特にweb系で転職・就職活動を行う際にはポートフォリオを求められることがあります。ポートフォリオとは自分自身の作品のことで、技術力や企画力を示すものです。

RUNTEQではポートフォリオの作成を企画段階からサポートしてくれます!

他のプログラミングスクールでは提携企業の派遣やアルバイトとして就職するしかなかったりもしますが、RUNTEQはあなたの市場価値を高める方法まで教えてくれるということですね。

また、RUNTEQが扱う教材はどれも第一線で当たり前に使われている技術。特に未経験者の独学ではどうしてもスキルセットに穴が出来てしまいます。その点RUNTEQは確実に現場力を養えます。

そして2020年2月〜2021年12月までの内定者の98%がweb系企業に内定しています。これはRUNTEQの指導力とサポートが優れていることの証拠でしょう。

まずは無料説明会に申し込んではいかがでしょうか?

RUNTEQ


Flutter
muchiをフォローする
MUCHILOG
タイトルとURLをコピーしました