Flutter - 使用 flutter 插件共享图像给我带来黑屏？

Question

目前，我想使用以下代码使用 esys_flutter_share 和 wc_flutter_share 插件与其他应用程序共享我的图像。

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);
          },
        ),
      ),
    );
  }

我没有收到任何错误。但是，分享图像时我的屏幕变黑了。

在我的情况下，两个插件都给我一个黑屏（如附图所示）。

提出解决方案。

谢谢。

Answer 1

概述：用 Container + 颜色包装你的 ExtendedImage.network() 将解决你的问题。 例如 ExtendImage.network();

分享时背景会变黑。所以用 Container 包裹 ExtendedImage.network() 并给它任何颜色。

新工作代码 -> Container(color:Colors.white,child:ExtendedImage.network());

详细：使用屏幕截图插件和 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')
                          ],
                        )),
                  )),
            ),
          ),
        ],
      ),
    ),
  ),
);}

Answer 2

您必须将小部件背景颜色更改为白色或任何颜色

backgroundColor: Colors.white,

Answer 3

我遇到了类似的问题，但我找到了一个解决方案，并且它对我有用。

只需将屏幕截图小部件包装为父小部件，子小部件为容器或 ColoreBox，并指定颜色为白色（这是背景色）。

      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),
              ],
            ),
          ),
        ),
      ),

我使用了 ColoredBox，效果很好。

这是将屏幕截图保存在所需位置的代码。

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);

  }
}

请注意，要在所需位置创建文件夹/下载路径，您必须在 AndroidManifest.xml 文件中执行一些操作，这是必需的。

我希望这对你有用。

Answer 4

通过将用于屏幕截图的小部件包装在容器中并为容器提供白色来解决此问题

Answer 5

我通过将屏幕截图的小部件包装在容器中并给它一个白色来解决这个问题。