Closed4
Flutterのカメラ・写真パッケージを使ってみる
はじめに
前回は下記3点のFlutterのデータ管理パッケージを使ってみた
- drift
- shared_preferences
- flutter_secure_storage
今回はカメラ・写真パッケージのimage_pickerとimage_gallery_saverを使ってみる
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
実行結果
image_gallery_saver
準備コマンド
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グループの中にしっかり保存されていた
おわりに
以上で一旦クローズ、次はFlutterの通知パッケージを使ってみる
このスクラップは2023/01/10にクローズされました