Flutter で画像などのファイルやテキストをシェアしたい時に便利な【esys_flutter_share】パッケージの使い方について解説します。
esys_flutter_share の使い方
パッケージの追加とインポート
pubspec.yaml に以下のパッケージを追加してpub getします。
dependencies:
flutter:
sdk: flutter
# ↓これを追加
esys_flutter_share: ^1.0.2
dartのコードで以下をインポートします。
// ↓これをインポート
import 'package:esys_flutter_share/esys_flutter_share.dart';
シェア
シェア機能は、iOSの UIActivityViewController、Androidの ACTION_SEND Intent を呼び出します。
テキスト、画像など単一のファイル、複数ファイルのシェアが行えます。
// テキストの共有
Share.text('title', 'Share text.', 'text/plain');
// 画像の共有
Uint8List _buffer = await _image.readAsBytes();
await Share.file('Share image', 'photo.jpg', _buffer, 'image/jpg');
// 複数ファイルの共有
await Share.files(
'Share images',
{
'image1.png': _buffer1,
'image2.png': _buffer2,
'addresses.csv': _buffer3,
},
'*/*',
text: 'Optional text.');
サンプルコード
テキスト、単一の画像をシェアするサンプルコードです。

import 'package:flutter/material.dart';
// image_picker
import 'package:image_picker/image_picker.dart';
// image_gallery_saver
import 'package:image_gallery_saver/image_gallery_saver.dart';
// esys_flutter_share
import 'package:esys_flutter_share/esys_flutter_share.dart';
import 'dart:io'; //File
import 'dart:typed_data'; // Uint8List
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'esys_flutter_share'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
File _image;
final picker = ImagePicker();
// 画像の読み込み
Future _getImage() async {
//final pickedFile = await picker.getImage(source: ImageSource.camera);//カメラ
final pickedFile = await picker.getImage(source: ImageSource.gallery);//アルバム
if(pickedFile != null) {
setState((){
_image = File(pickedFile.path);
});
}
}
// 画像の保存
Future _saveImage() async {
if(_image != null) {
Uint8List _buffer = await _image.readAsBytes();
final result = await ImageGallerySaver.saveImage(_buffer);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_image == null
? Text('No image selected.')
: Image.file(_image),
RaisedButton(
child: Text('保存'),
onPressed: _saveImage,
),
RaisedButton(
child: Text('テキスト共有'),
onPressed: () {
Share.text('title', 'Share text.', 'text/plain');
},
),
RaisedButton(
child: Text('画像共有'),
onPressed: () async {
if(_image != null) {
Uint8List _buffer = await _image.readAsBytes();
await Share.file(
'Share image', 'photo.jpg', _buffer, 'image/jpg');
}
},
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _getImage,
tooltip: 'Pick',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
image_picker、image_gallery_saver、を使用したサンプルになっているので、以下の関連記事を参考にセットアップしてからお試しください。
コメント