Image Load

Hello world,

Setiap aplikasi kebanyakan akan memiliki fitur untuk membagikan halaman/artikel/konten ke aplikasi lain seperti sosial media, chat dan lain-lain. Tujuannya adalah untuk mengirimkan url dari konten dalam aplikasi ke aplikasi lain tanpa harus melakukan copy paste isi kontennya. Selain memudahkan orang untuk mengirimkan konten, ini juga memudahkan penerima konten/sosial media karena yang dikirimkan adalah url saja. Properti lain yang biasanya ikut dikirimkan adalah title dan deskripsi.

Kali ini saya akan coba berbagi cara untuk membuat tombol share pada flutter. Kalau biasanya di html kita akan membuat beberapa tombol sesuai kebutuhan seperti tombol share facebook, twitter dll, di flutter/app kita hanya perlu membuat satu tombol saja. Lalu pilihan sharenya bagaimana? Untuk pilihan sharenya akan bergantung pada aplikasi apa saja yang terinstall pada handphone masing-masing. Contohnya jika di handphone tidak ada aplikasi facebook maka tidak ada tombol/pilihan untuk membagikan ke aplikasi facebook. Oke langsung saja kita masuk ke contoh. Saya sudah mencoba beberapa plugin dari flutter dan beberapa sumber sampai akhirnya saya menemukan yang cocok dan lancar tanpa error seperti berikut.

Tahap 1.tambahkan pada pubspec.yml lalu install/save

dependencies:
  share: ^0.6.3+5

Tahap 2. Import

import 'package:share/share.dart';

Tahap 3. Buat fungsi seperti berikut

import 'package:share/share.dart';

void share(BuildContext context) {
var url = "https://byriza.com/";
final RenderBox box = context.findRenderObject();

Share.share("$url",
subject: "Website Riza",
sharePositionOrigin: box.localToGlobal(Offset.zero) & box.size);
}

Tahap 4. Buat tombol share

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {
@override
_MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {

@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: const Text('Plugin example app'),
),
body: new Center(
child: RaisedButton(
child: Text("Share"),
onPressed: (){},
)
)
),
);
}
}


Ketika tombol share diklik maka kita kita arahkan actionnya ke fungsi yang sudah kita buat sebelumnya sehingga bentuknya akan menjadi seperti berikut.

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

void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {
@override
_MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {

void share(BuildContext context) {
var url = "https://byriza.com/";
final RenderBox box = context.findRenderObject();

Share.share("$url",
subject: "Website Riza",
sharePositionOrigin: box.localToGlobal(Offset.zero) & box.size);
}

@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: const Text('Plugin example app'),
),
body: new Center(
child: RaisedButton(
child: Text("Share"),
onPressed: () {
share(context);
},
))),
);
}
}

Untuk modifikasinya kalian bisa mengubah konten yang ada dalam fungsi share seperti url dan subject yang ada di dalamnya menjadi seperti versi yang kalian inginkan.


Selamat mencoba :)