Flutterアプリにimage_pickerを使ってカメラ呼び出しボタンをつける

心はRubyistなのですが、毎日Flutterを触っているので今日も今日とてFlutterネタ。
Flutterといえば今日小田急線のロゴを見かけて、「Flutterのアイコンと似てる!!」とテンションがあがったのですが、帰って確認してみたら共通点は三角形ということと水色ということだけでした。
そんな大雑把な記憶を留める為に今日も小ネタを記してゆきます!

Flutterアプリにカメラ呼び出しボタンをつける

image_pickerというパッケージを使います。
手順としてはこんな感じ。

  1. image_pickerパッケージの読み込み
  2. image読み込みメソッド記述
  3. カメラ呼び出しアイコンを記述

順番にやっていきます。

image_pickerパッケージの読み込み

pubspec.yamlに追記します。

dependencies:
  flutter:
    sdk: flutter
  image_picker: # => Added

バージョン指定はなくても構いません。
書いたらflutter packages getでインストール。

なお、インストールしてるのにうまく反映されないな?てときはキャッシュが悪さしてることが往々にしてあるようなので、flutter clean & flutter runを行うと解決する場合があるようです。

image読み込みメソッドを記述

exampleがすごく充実してるのでその通りやるだけ。
main.dartimportを記述します。

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

RandomWordsStateクラスにgetImageメソッドを追記。
(前回の続きに追記しているのでRandomWordsクラスですが、example通りだと_MyHomePageStateクラス)

class RandomWordsState extends State<RandomWords> {
  // (略)
  File _image;

  Future getImage() async {
    var image = await ImagePicker.pickImage(source: ImageSource.camera);

    setState(() {
      _image = image;
    });
  }
  // (略)
}

カメラ呼び出しアイコンを記述

getImageを呼び出す為のアイコンを追記します。

class RandomWordsState extends State<RandomWords> {
  // (略)
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Startup Name Generator'),
      ),
      body:_buildSuggestions(),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add_a_photo),
        onPressed: getImage,
      ),
    );
  }
  // (略)
}

これで、ボタンを押すとカメラアプリが呼び出されるようになりました!