Blog スタッフブログ

Flutter システム開発 ひとくちコードスニペット

[Flutter]Flutterで写真撮影を行うコードスニペット

こんにちは、株式会社MIXシステム開発担当のBloomです。

今回はFlutterで利用できるコードスニペットを紹介します。まずはこちらのパッケージを導入しましょう。

flutter pub add image_picker

次にiOS/Androidそれぞれへ権限の記載を行いましょう。

<plist version="1.0">
<dict>
  <key>NSCameraUsageDescription</key>
  <string>カメラを使用する理由を記載します</string>
  <key>NSPhotoLibraryUsageDescription</key>
  <string>フォトライブラリにアクセスする理由を記載します</string>
</dict>
</plist>

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.CAMERA"/>
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

これでカメラ機能を利用する準備ができました。このまま画面を実装しましょう。

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

class CameraPage extends StatefulWidget {
  @override
  _CameraPageState createState() => _CameraPageState();
}

class _CameraPageState extends State<CameraPage> {
  final ImagePicker _picker = ImagePicker();

  Future<void> _pickImage(ImageSource source) async {
    final pickedFile = await _picker.pickImage(source: source);

    if (pickedFile != null) {
      final timestamp = DateTime.now().toString();
      Navigator.pop(context, '${source == ImageSource.camera ? '撮影' : '選択'}: $timestamp');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('写真を撮る / 選ぶ')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton.icon(
              icon: Icon(Icons.camera_alt),
              label: Text('カメラで撮影'),
              onPressed: () => _pickImage(ImageSource.camera),
            ),
            SizedBox(height: 20),
            ElevatedButton.icon(
              icon: Icon(Icons.photo),
              label: Text('フォトライブラリから選択'),
              onPressed: () => _pickImage(ImageSource.gallery),
            ),
          ],
        ),
      ),
    );
  }
}

カメラかフォトライブラリにアクセスしている部分は_pickImage関数となり、ImagePickerのpickImage関数の呼び出しで実現しています。

これだけで写真を取得することができました。良かったですね。

戻る 一覧へ戻る