Flutterでアプリ開発 Image Pickerで写真を簡単切り替え（実践編）

こんにちはー！お肉大好き、さささです！

久しぶりの投稿になります。
前回に引き続き今回も実践編となり、少しずつではありますがアプリを形にしつつあります。
できれば今月中にはストアへ申請を出したいものです。

今回は、Image Pickerというプラグインを導入して、カメラ/ギャラリーから写真を取り込む方法です。

image_picker | Flutter package

使い方はとっても簡単です。

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.3
 image_picker: ^0.6.7+4 # <- 追加

あとはExampleがしっかり整ってますので、それをもとにmain.dartに実装していきます。

import 'package:flutter/material.dart';
import 'dart:io'; // File利用
import 'package:image_picker/image_picker.dart'; // ImagePicker利用

void main() {
 runApp(MyApp());
}

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'Image Picker Demo',
     home: UploadPhoto(),
   );
 }
}

class UploadPhoto extends StatefulWidget {
 @override
 _UploadPhotoState createState() => _UploadPhotoState();
}

class _UploadPhotoState extends State<UploadPhoto> {
 File _image;
 final picker = ImagePicker();

 /**
  * true: カメラ起動
  * false: ギャラリー起動
  */
 Future getImage(bool isCamera) async {
   ImageSource type = (isCamera)
       ? ImageSource.camera : ImageSource.gallery;
   final pickedFile = await picker.getImage(source: type);

   setState(() {
     _image = File(pickedFile.path);
   });
 }

 @override
 Widget build(BuildContext context) {
   return new Scaffold(
     appBar: AppBar(
       title: const Text('Image Picker Demo'),
     ),
     body: Container(
       child: Center(
         child: photoArea(),
       ),
     ),
   );
 }

 // 画像に対する処理を共通化
 GestureDetector photoArea() {
   return GestureDetector(
     onTap: () {
       getImage(true);
     },
     child: Container(
       child: _image == null
           ? Image.asset('images/sample.png')
           : Image.file(_image, fit: BoxFit.cover),
     ),
   );
 }
}

載せているコードでは、写真をタップしたらギャラリーが起動し、選択した写真に切り替わるように実装しています。
動画のような動作です。

Image Pickerを使えば、簡単にカメラやギャラリーから写真をアプリ内に取り込む事ができます。
たったこれだけで組めるなんて、凄いですね。
今後は、ここに「端末のストレージへ保存」や「複数の写真を並べて、タップした写真のみ切り替え」などを実装してみようと考えています。

それでは今回は短めですが、この辺で失礼します。
お読みいただき、ありがとうございました。

（2020/08/18 追記）
動画の体裁が開発中のデザイン無視の状態だったので、少しだけ整えたものでサンプルとして載せることにしました。
※動画も改訂版へ差し替えています。

基礎から学ぶ Flutter