Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Flutterで写真を取得したい君に

More than 1 year has passed since last update.

何をやるの?

タイトルのままです。
最近、趣味でFlutterを使ってアプリ開発をしているのですが、アプリを作っている中で「そういえばFlutterでどうやって写真とかカメラとか操作するんや?」と思ったので忘れないように書いてみました。

環境

android studio 3.5.1
macOS Catalina 10.15.1

準備

今回はimage_pickerというパッケージを使います。
まず、pubspec.yamlにパッケージを追記します。

pubspec.yaml
dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  image_picker: ^0.6.3 # 追加部分

そしたら、ターミナルで

$ flutter packages get

を実行する。

iOSのinfo.plistを設定する

パッケージをインポートしたが、iOSだとこのままでは動かない。
iOSのinfo.plistでいくつか設定しておくことがあるのでそれをする。
プロジェクト内のios/Runner/Info.plistを開く。
下のキーと値をInfo.plistの中に追加する

Info.plist
    <key>NSCameraUsageDescription</key>  
    <string>画像のアップロードのため</string>
    <key>NSPhotoLibraryAddUsageDescription</key>
    <string>画像のアップロードのため</string>
    <key>NSMicrophoneUsageDescription</key>
    <string>画像のアップロードのため</string>

コード

レイアウト

今回、画面は適当にデフォルトのサンプルアプリを少しいじったものを使う
サンプルアプリの_MyHomePageStateを以下のように修正

main.dart
class _MyHomePageState extends State<MyHomePage> {
  File _image; // 画像を入れる変数

  /// 画像が取れたら、setState()で更新する
  Future _insertImage() async {
    // TODO 更新する処理を書く
    setState(() {

    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '写真を選択してね',
            ),
            SizedBox(
              child: (_image != null)
                  ? Image.file(_image)
                  : Container()),
            RaisedButton(
              child: Text("写真を選択"),
              onPressed: () => _insertImage() /// ここにImagePickerの処理を書く,
            )
          ],
        ),
      ),
    );
  }
}

とりあえず形だけ作っておく。
一応軽く説明しておくと、、、

_imageは画像を取得できたときに、入れるための変数として定義している。
あと、void insertImage()は同じく_imageに取得できた画像を代入するための場所

SizedBox(
  child: (_image != null)
    ? Image.file(_image)
    : Container()),

ここでは、画像を取得できているかどうかを判別して、できていなかったら(_imageがnull)だったら、空のContainer()を表示させるようにしている。

画像を取得

まずは画像をImagePickerで取得する処理を書いていく

main.dart
  /// 画像が取れたら、setState()で更新する
  Future _insertImage() async {
    var image = await ImagePicker.pickImage(source: ImageSource.gallery);  // ==追加==

    setState(() {
      // TODO 更新する処理を書く
      _image = image; // ==追加==
    });
  }

順に説明すると、まずvar image = .....の部分でユーザーのライブラリー開き、画像が選択されるまでawaitで待つようにする。
その後、そこで選択された画像がimageFile型で代入される。

setState()では選択された画像を先ほど定義したプライベート変数の_imageして更新する。

次は、画像を選択させるRaisedButtonに追記していく。

これで完成!!

toshinobu111
新潟の大学生ですが、今は京都にいます 色々やっています 最近はFlutterにハマってます 趣味で触ったり遊んだりしたことをメモ程度に書いていきたい
revoneo
京都を拠点にフリーランスが集まり組織としてシステム設計・開発やWebサイト構築を承っています。柔軟に対応可能で、土日でも対応致します。仕様書通りのものを仕上げることはもちろん、個々のビジネス目標の達成に重点を置き、経営課題解決に向けた現状分析から改善案、顧客ニーズに合ったシステムや技術を提案することを強みとしています。
https://www.revoneo.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away