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() 将解决您的问题。 例如 ExtendedImage.network();

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

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

详细说明：使用 Screenshot 插件和 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

Answer 2

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

backgroundColor: Colors.white,

Answer 3

解决了这个问题，通过包装容器截屏的小部件并为容器提供白色