Hello friends, In today’s tutorial we would learn about Share Pub package. We would share TextField entered text message to another mobile apps. Using Share package we can share TextField typed message to WhatsApp, Instagram, Message, Copy to Clipboard, Gmail, Notes and Email. So in this tutorial we would learn about Example of Share TextField Data to Other Apps in Flutter.
Contents in this project Example of Share TextField Data to Other Apps in Flutter :-
1. First of all we have to install Share Pub package in our flutter project. So open your flutter project Root directory in Command Prompt or Terminal and execute below command.
|
1 |
flutter pub add share |
2. Open your project’s main.dart file and import material.dart and share.dart package.
|
1 2 |
import 'package:flutter/material.dart'; import 'package:share/share.dart'; |
3. Creating void main runApp() method and here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Creating our main MyApp extends StatelessWidget class. Here we would call our ContentShare() class.
|
1 2 3 4 5 6 7 8 9 10 11 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: const Text("Share TextField Message"), ), body: Center(child: ContentShare()))); } } |
4. Creating ContentShare extends StatefulWidget class. In this class we would make our main child class ShareState.
|
1 2 3 |
class ContentShare extends StatefulWidget { ShareState createState() => ShareState(); } |
5. Creating ShareState extends State<ContentShare> class.
|
1 2 3 4 5 6 |
class ShareState extends State<ContentShare> { } |
6. Creating 2 String variables text and subject. They are used to hold Text message and text subject.
|
1 2 |
String text = ''; String subject = ''; |
7.Creating a ASYNC type of function named as _onShare(). This function is used to share TextField message to other apps.
|
1 2 3 4 5 6 |
_onShare(BuildContext context) async { final RenderBox box = context.findRenderObject() as RenderBox; await Share.share(text, subject: subject, sharePositionOrigin: box.localToGlobal(Offset.zero) & box.size); } |
8. Creating Widget Build area -> Column widget and Now we would make 2 TextField widget and 1 ElevatedButton widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
Widget build(BuildContext context) { return Scaffold( body: SafeArea( top: true, child: Center( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Container( padding: const EdgeInsets.fromLTRB(10, 0, 10, 0), margin: const EdgeInsets.fromLTRB(0, 20, 0, 0), child: TextField( decoration: const InputDecoration( labelText: 'Share text:', border: OutlineInputBorder(), ), onChanged: (String value) => setState(() { text = value; }), )), Container( padding: const EdgeInsets.fromLTRB(10, 0, 10, 0), margin: const EdgeInsets.fromLTRB(0, 20, 0, 0), child: TextField( decoration: const InputDecoration( labelText: 'Share Subject:', border: OutlineInputBorder(), ), onChanged: (String value) => setState(() { subject = value; }), )), Container( margin: const EdgeInsets.fromLTRB(10, 20, 0, 0), child: ElevatedButton( child: const Text('Share'), onPressed: text.isEmpty ? null : () => _onShare(context), )) ], ), ))); } |
9. Complete source code for main.dart file :-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
import 'package:flutter/material.dart'; import 'package:share/share.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: const Text("Share TextField Message"), ), body: Center(child: ContentShare()))); } } class ContentShare extends StatefulWidget { ShareState createState() => ShareState(); } class ShareState extends State<ContentShare> { String text = ''; String subject = ''; _onShare(BuildContext context) async { final RenderBox box = context.findRenderObject() as RenderBox; await Share.share(text, subject: subject, sharePositionOrigin: box.localToGlobal(Offset.zero) & box.size); } @override Widget build(BuildContext context) { return Scaffold( body: SafeArea( top: true, child: Center( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Container( padding: const EdgeInsets.fromLTRB(10, 0, 10, 0), margin: const EdgeInsets.fromLTRB(0, 20, 0, 0), child: TextField( decoration: const InputDecoration( labelText: 'Share text:', border: OutlineInputBorder(), ), onChanged: (String value) => setState(() { text = value; }), )), Container( padding: const EdgeInsets.fromLTRB(10, 0, 10, 0), margin: const EdgeInsets.fromLTRB(0, 20, 0, 0), child: TextField( decoration: const InputDecoration( labelText: 'Share Subject:', border: OutlineInputBorder(), ), onChanged: (String value) => setState(() { subject = value; }), )), Container( margin: const EdgeInsets.fromLTRB(10, 20, 0, 0), child: ElevatedButton( child: const Text('Share'), onPressed: text.isEmpty ? null : () => _onShare(context), )) ], ), ))); } } |
Screenshots:-
