心はRubyistなのですが、毎日Flutterを触っているので今日も今日とてFlutterネタ。
Flutterといえば今日小田急線のロゴを見かけて、「Flutterのアイコンと似てる!!」とテンションがあがったのですが、帰って確認してみたら共通点は三角形ということと水色ということだけでした。
そんな大雑把な記憶を留める為に今日も小ネタを記してゆきます!
Flutterアプリにカメラ呼び出しボタンをつける
image_pickerというパッケージを使います。
手順としてはこんな感じ。
- image_pickerパッケージの読み込み
- image読み込みメソッド記述
- カメラ呼び出しアイコンを記述
順番にやっていきます。
image_pickerパッケージの読み込み
pubspec.yaml
に追記します。
dependencies: flutter: sdk: flutter image_picker: # => Added
バージョン指定はなくても構いません。
書いたらflutter packages get
でインストール。
なお、インストールしてるのにうまく反映されないな?てときはキャッシュが悪さしてることが往々にしてあるようなので、flutter clean
& flutter run
を行うと解決する場合があるようです。
image読み込みメソッドを記述
exampleがすごく充実してるのでその通りやるだけ。
main.dart
にimport
を記述します。
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, ), ); } // (略) }
これで、ボタンを押すとカメラアプリが呼び出されるようになりました!