CODEWITHSUNDEEP
androidfluttershareflutter-layoutflutter-dependencies
Jay Mungara
Jay Mungara

Reputation: 7148

Flutter - Image share using flutter plugin giving me a blackend screen?

Currently, i want to share my image with other apps using esys_flutter_share and wc_flutter_share Plugin using following code.

import 'package:esys_flutter_share/esys_flutter_share.dart' as esysShare;
import 'package:wc_flutter_share/wc_flutter_share.dart';
import 'package:flutter/material.dart';
import 'package:extended_image/extended_image.dart';

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ExtendedImage.network(
          "https://picsum.photos/250?image=9",
          fit: BoxFit.cover,
          width: 250,
          height: 250,
          //enableLoadState: false,
          mode: ExtendedImageMode.gesture,
          loadStateChanged: (ExtendedImageState state) {
            switch (state.extendedImageLoadState) {
              case LoadState.completed:
                return GestureDetector(
                  onTap: () async {
                    ByteData data=await state.extendedImageInfo.image.toByteData();
                    print("data : ${data}");
                    Uint8List list=data.buffer.asUint8List();
                    print("list : ${list}");

                    // EasyFlutterShare plugin not working. It is also giving me a blackend screen as attached image
                    esysShare.Share.file("Share Image", "Test.png", list, "image/png");

                    // Even WcFlutterShare plugin not working. It is also giving me a blackend screen as attached image
                    WcFlutterShare.share(sharePopupTitle: "Share Image 2", mimeType: "image/*",bytesOfFile: list,fileName: "Test.png");
                  },
                  child: ExtendedRawImage(
                    image: state.extendedImageInfo?.image,
                    width: 250,
                    height: 250,
                  ),
                );
                break;
              case LoadState.loading:
                return Center(
                  child: CircularProgressIndicator(
                    valueColor: AlwaysStoppedAnimation<Color>(Colors.blueAccent),
                  ),
                );
                break;
              case LoadState.failed:
                return Center(
                  child: CircularProgressIndicator(
                    valueColor:
                        AlwaysStoppedAnimation<Color>(Colors.deepOrangeAccent),
                  ),
                );
                break;
            }
          },
          initGestureConfigHandler: (state) {
            return GestureConfig(
                minScale: 0.9,
                animationMinScale: 0.7,
                maxScale: 3.0,
                animationMaxScale: 3.5,
                speed: 1.0,
                inertialSpeed: 100.0,
                initialScale: 1.0,
                inPageView: false);
          },
        ),
      ),
    );
  }

I didn't get any errors. But, my screen gets blackened while share the image.

Both plugins are giving me a black screen as attached image in my case.

Blackend_Shared_Image

Suggest a work-around solution.

Thanks.

Upvotes: 0

Views: 2784

Answers (5)

Nayana Jangale
Nayana Jangale

Reputation: 11

Screenshot( controller: screenshotController, child: Container( color: Colors.white, child: Widget(), ), ),

I have solved this problem by wrapping the widget taken for a screen shot in a container and giving it a white color.

Upvotes: 0

sahil prajapati
sahil prajapati

Reputation: 544

I faced a similar problem but I found one solution and it was work for me.

Simply wrap make your screenshot widget as parent widget and child widget is container or ColoreBox and give color is white this is for background color.

      body: SingleChildScrollView(
        physics: const BouncingScrollPhysics(),
        child: Screenshot(
          controller: _screenshotController,
          child: ColoredBox(
            color: Colors.white, // this color for white backgroud color for screenShot
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  margin: const EdgeInsets.only(
                    top: 15,
                    bottom: 12,
                  ),
                  alignment: Alignment.center,
                  padding: const EdgeInsets.all(1.5),
                  width: size.width,
                  color: const Color.fromARGB(255, 213, 221, 223),
                  child: Text(
                    resumeSharedPref.resumeName,
                    style: CvTextStyle.roboto(
                      fontSize: size.width * 0.042,
                      fontWeight: FontWeight.w400,
                    ),
                  ),
                ),
                const ProfilePhoto(),
                const ResumeBuildDivider(),
                const ResumeAboutSection(),
                const ResumeBuildDivider(),
                ResumeHeaderAndList(
                  header: 'LANGUAGES',
                  list: programmingLang,
                ),
                const ResumeBuildDivider(),
                ResumeHeaderAndList(
                  list: skills,
                  header: 'SKILLS',
                ),
                const ResumeBuildDivider(),
                ResumeHeaderAndList(
                  list: hobbies,
                  header: 'HOBBIES',
                ),
                const ResumeBuildDivider(),
                ResumeHeaderAndList(
                  list: courses,
                  header: 'COURSES',
                ),
                const ResumeBuildDivider(),
                ResumeHeaderAndList(
                  list: working,
                  header: "WORKING PLATEFORM",
                ),
                const ResumeBuildDivider(),
                EducationalDetails(education: education),
                const ResumeBuildDivider(),
                ResumeHeaderAndList(
                  list: extraCarricularActivity,
                  header: 'EXTRA CURRICULAR ACTIVITY',
                ),
                const ResumeBuildDivider(),
                TrainingDetails(training: training),
                const ResumeBuildDivider(),
                const MyPersonalDetails(),
                const SizedBox(height: 22),
              ],
            ),
          ),
        ),
      ),

I was used ColoredBox and it work nicely.

Here is code to save screenshot in the desired location.

downloadResume2({required Uint8List screenshot}) async {
  //  path is for desire location download
  final dir = Directory("/storage/emulated/0/MyApp"); // my app is folder name
  String fileName = 'resume.jpeg';
  bool status = await storagePermission(); // here  get storage permission  from another function

  if (status) {
    if (await dir.exists()) {
      dir.path;
    } else {
      dir.create();
      dir.path;
    }
    File file = File('${dir.path}/$fileName');
    log('file : $file');
    log('dir : ${dir.path}');
    file.writeAsBytes(screenshot);

  }
}

Please note that to make folder/download path in the desired location you must have to do some work in AndroidManifest.xml file this is required.

I hope this will work for you.

Upvotes: 1

Doss
Doss

Reputation: 11

you have to change your widget background color to white or any color no

backgroundColor: Colors.white,

Upvotes: 1

Noel Jayson
Noel Jayson

Reputation: 11

Solved this problem by wrapping the widget taken for screen shot by a container and give a white color for container

Upvotes: 0

Kapil Sahu
Kapil Sahu

Reputation: 599

Overview: Wrap your ExtendedImage.network() with a Container + color will solve your problem. Eg ExtendedImage.network();

will give a blackened background while sharing. So wrap the ExtendedImage.network() with Container and give any color to it.

new working code -> Container(color:Colors.white,child:ExtendedImage.network());

Detailed: with Screenshot plugin and esys_flutter_share

  void _share() async {
// This is my share function
screenshotController.capture().then((File image) async {
  final ByteData bytes = await rootBundle.load(image.path);
  await Share.file('', 'esys.png', bytes.buffer.asUint8List(), 'image/png',
      text: "https://commentrapp.page.link/TQ6UbwkFTa2TZEXYA");
}).catchError((onError) {
  print(onError);
});

}

  Widget build(BuildContext context) {
final w = MediaQuery.of(context).size.width;
return Scaffold(
  backgroundColor: Color(0xfff5f5f5),
  appBar: AppBar(
    title: Text(
      widget.label,
      style: TextStyle(fontFamily: 'SanRegular'),
    ),
    actions: <Widget>[
      IconButton(
          icon: Icon(Icons.share),
          onPressed: () {
            _share();
          })
    ],
    backgroundColor: Color(0xff323639),
    leading: Container(),
  ),
  body: Screenshot(
    controller: screenshotController,

    // Wrapping this column with a Container and providing a color help me remove black background.
    // below is Screenshot child.
    child: Container(
      color: Colors.white,
      child: Column(
        children: <Widget>[
          Container(
              width: double.infinity,
              constraints: BoxConstraints(maxHeight: 300),
              child: Image(
                image: NetworkImage(widget.img ?? ""),
                fit: BoxFit.contain,
              )),
          Container(
            child: Padding(
              padding: const EdgeInsets.only(
                left: 18,
              ),
              child: ListTile(
                  title: Text("@ ${widget.name}",
                      style: TextStyle(
                          color: Colors.black,
                          fontSize: 16,
                          fontFamily: 'SanMedium')),
                  subtitle: Text(
                    widget.body,
                    style: TextStyle(
                        fontSize: 13,
                        color: Colors.green,
                        fontFamily: 'SanBold'),
                  ),
                  leading: FittedBox(
                    fit: BoxFit.fitWidth,
                    child: Container(
                        padding: EdgeInsets.fromLTRB(16, 10, 16, 10),
                        decoration: BoxDecoration(
                            color: AppColor.redText,
                            borderRadius:
                                BorderRadius.all(Radius.circular(6))),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Text(
                              "33" ?? 0,
                              style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 12,
                                  fontFamily: 'SanRegular'),
                            ),
                            SizedBox(
                              width: 4,
                            ),
                            SvgPicture.asset('assets/images/like.svg',
                                height: 9,
                                fit: BoxFit.cover,
                                color: Colors.white,
                                semanticsLabel: 'popup close')
                          ],
                        )),
                  )),
            ),
          ),
        ],
      ),
    ),
  ),
);}

case 1: with blackend background

case 2: after adding Container with white color

Upvotes: 4

Related Questions