Closed4

Flutterのカメラ・写真パッケージを使ってみる

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

image_picker

準備コマンド

flutter create hello_image_picker
cd hello_image_picker
flutter pub add image_picker

コード

hello_image_picker/bin/main.dart
import 'dart:io';

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  XFile? _image;

  Future<void> _pickImage() async {
    final picker = ImagePicker();
    final image = await picker.pickImage(source: ImageSource.camera);

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

  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: _image != null
            ? Image.file(File(_image!.path))
            : Text(
                'Take a photo',
                style: Theme.of(context).textTheme.headline4,
              ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _pickImage,
        tooltip: 'Increment',
        child: const Icon(Icons.camera_alt),
      ),
    );
  }
}

実行コマンド

iOSまたはAndroid実機で実行する

flutter run

実行結果

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

準備コマンド

flutter create hello_saver
cd hello_saver
flutter pub add image_picker image_gallery_saver

コード

hello_saver/lib/main.dart
import 'package:flutter/material.dart';
import 'package:image_gallery_saver/image_gallery_saver.dart';
import 'package:image_picker/image_picker.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _message = 'Take a photo';

  Future<void> _pickImage() async {
    final picker = ImagePicker();
    final image = await picker.pickImage(source: ImageSource.camera);

    if (image != null) {
      final result = await ImageGallerySaver.saveFile(image.path);
      setState(() {
        _message = result.toString();
      });
    }
  }

  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Text(
          _message,
          style: Theme.of(context).textTheme.headline4,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _pickImage,
        tooltip: 'Increment',
        child: const Icon(Icons.camera_alt),
      ),
    );
  }
}

実行コマンド

flutter run

実行結果

メモ

フォトアプリに写真が表示されなくて「失敗したかな?」と思った

ライブラリタブのPicturesグループの中にしっかり保存されていた

このスクラップは2023/01/10にクローズされました