How to share text with image on flutter excluding icons? - flutter

Question

I am currently able to share the text on top of the image using share package but I want to share the image and text along with it without my icons of refresh and share. Couldn't find any answers for this. Have used multiple share packages but couldn't achieve the expected result.
Widget build(BuildContext context) {
return Scaffold(
body: Stack(children: <Widget>[
Container(
constraints: BoxConstraints.expand(),
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage("${imgUrl}$count"),
fit: BoxFit.fill)
),
),
FutureBuilder<Advice>(
future: advice,
builder: (context, snapshot) {
if (snapshot.hasData) {
return SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 30.0),
child: FadeTransition(
opacity: _animation,
child: Text(
snapshot.data!.adviceText,
style: TextStyle(
decoration: TextDecoration.none,
fontSize: 30.0,
color: Colors.white,
fontFamily: 'quoteScript'),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
IconButton(
icon: Icon(Icons.refresh, color: Colors.white),
onPressed: () async {
setState(() {
_controller.reset();
_controller.forward();
count++;
advice = fetchAdvice();
});
},
),
IconButton(
icon: Icon(Icons.share, color: Colors.white),
onPressed: () {
Share.share("Here's an advice for you: ${snapshot.data!.adviceText}");
},
),
],
),
],
),
);
} else if (snapshot.hasError) {
return Text("${snapshot.error}");
}
// By default, show a loading spinner.
return Center(child: CircularProgressIndicator());
},
),
]),
);
}
This is the text and image widget. Can be shared with the dynamic text.

Answer 1

SHARE: The best way I think is to use screenshot package to capture the widget which contains both image and text that you need to share, then share it as a picture with share_plus package.
For instance:
// Create a controller
ScreenshotController screenshotController = ScreenshotController();
[...]
// Wrap the widget which you want to capture with `Screenshot`
Screenshot<Widget>(
controller: screenshotController,
child: Container(
child: [...]
),
),
[...]
// Create a method to take a screenshot and share it
// This method I get from my project, so you can modify it to fit your purpose
Future<void> shareScreen(String title, String name) async {
final screenShot = await screenshotController.capture();
if (screenShot != null) {
final Directory tempDir = await getTemporaryDirectory();
final File file = await File('${tempDir.path}/$name').create();
await file.writeAsBytes(screenShot);
await Share.shareFiles(<String>[file.path], subject: title, text: name);
file.delete();
}
}
Then replace the Share.share method in the below example with the shareScreen method just created above.
HIDE BUTTON: You can create a new variable like bool isSharing = false; to control the visible state of those 2 buttons. The important part is the Share.share method must be an async method to make the code works because it needs await to know when the share action is done.
For instance:
[...]
if (!isSharing) // <--- Add this line
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
IconButton(
icon: Icon(Icons.refresh, color: Colors.white),
onPressed: () async {
setState(() {
_controller.reset();
_controller.forward();
count++;
advice = fetchAdvice();
});
},
),
IconButton(
icon: Icon(Icons.share, color: Colors.white),
// And modify here <---
onPressed: () async {
setState(() => isSharing = true); // Hide the buttons
await Share.share(
"Here's an advice for you: ${snapshot.data!.adviceText}");
setState(() => isSharing = false); // Show the buttons
},
),
],
),
[...]