flyerhq / flutter_link_previewer Goto Github PK

I'm using this package inside of a chat screen
when I send a link it fetches the image of the previously sent link .

Very good library and very useful.

I would like to understand If you would be open to provide this feature.

Add another Widget call:
LinkPreviewerBuilder({this.url, required Widget Function(PreviewData) builder});

Basically, this widget is giving the user full control about how to display the preview. As a first step all logic of retrieving the data can be moved to the LinkPreviewerBuilder class and the LinkPreview can use the LinkPreviewerBuilder to display and animate it as of today.

Am just providing a url to previewer , which used to work in ealier versions , to be exact it was working in Ver 1.0.4 , now with latest version its only showing a link text .

                                     LinkPreview(
                                        text: urltxt ,
                                        width:MediaQuery.of(context).size.width,
                                      ),  

its placed inside a list builder . Any thoughts ?

Flutter 2.6.0-6.0.pre.83 • channel master • https://github.com/flutter/flutter.git
Framework • revision b889915997 (19 hours ago) • 2021-09-14 14:08:36 +0200
Engine • revision abb1980f65
Tools • Dart 2.15.0 (build 2.15.0-96.0.dev)

import

usage

i want to custom layout ui, how to do?
thanks!

Some url is very long, I'm looking for another parameter to shorten url in characters length, but still pass full url as text parameter. Sometimes title bottom margin is huge to fetched picture below it.
Thank you for your work

It converts numbers in the text to a link. For example, '4.7 miles' is converted to 'http://4.27'

On flutter WEB I'm getting CORS policy error.
Other requests I use in my app work properly. What am I doing wrong ?

I used the code from the sample and tried with www.google.com

Please have a look at this example:
https://www.loom.com/share/3ef149cb9d77428d8812b827411b4ab6

Looks like if an error prevents the URL preview from connecting, it just tries again forever.

This is on WEB btw (haven't tried this scenario on other platforms yet)

It would be great to support different image builder, eg. CachedNetworkImage, or our own shimmer image widget...

LinkPreview(
  enableAnimation: true,
  imageBuilder: (context, imageUrl){
    return CachedNetworkImage(imageUrl: imageUrl);
  },
 ...
}

Hello,
Great package, and most is working very well,

I just have an issue when the website data returned in a different language than English, then it shows strange characters (try website which is in Arabic or so.), I searched about the problem, and I found solutions say that the data returned has to be utf-8 decoded, actually I tried to implement that to the final data returned from the package (I mean to encode it later before displaying) but I went into many errors.

Appreciate if you can help solving the issue once url data is returned by http.get, thanks in advance

I can not define PreviewData previewData varible for state. and If i define as dynamic. then the argument complain about type.

Due to CORS issues when running on Flutter Web it may block at some point.
This is not a problem in general if you use a cors-proxy. But there is on bug at least in the code:

In the Util.dart

Future<Size> _getImageSize(String url) {
  final stream = Image.network(url).image.resolve(ImageConfiguration.empty);
  final completer = Completer<Size>();

  void onError(Object e, StackTrace? __) {
    print(e);
  }

  void listener(ImageInfo info, bool _) {
    if (!completer.isCompleted) {
      completer.complete(
        Size(
          height: info.image.height.toDouble(),
          width: info.image.width.toDouble(),
        ),
      );
      stream.removeListener(ImageStreamListener(listener, onError: onError));
    }
  }

  stream.addListener(ImageStreamListener(listener, onError: onError));
  return completer.future;
}

The problem is that the completer never complete is it encounter a CORS problem for fetching the image.
At least you can change the onError to:

void onError(Object e, StackTrace? s) {
    completer.completeError(e, s);
  }

See flyerhq/react-native-link-preview#25

I'm getting this issue

Running "flutter pub get" in echata...                          
Because import_js_library 1.0.2 depends on html ^0.14.0+3 and no versions of import_js_library match >1.0.2 <2.0.0, import_js_library ^1.0.2 requires html ^0.14.0+3.

And because flutter_link_previewer >=0.2.0 depends on html ^0.15.0, flutter_link_previewer >=0.2.0 is incompatible with import_js_library ^1.0.2.
And because wakelock_web 0.1.0+3 depends on import_js_library ^1.0.2 and no versions of wakelock_web match >0.1.0+3 <0.2.0, flutter_link_previewer >=0.2.0 is incompatible with wakelock_web ^0.1.0+3.


And because wakelock 0.2.1+1 depends on wakelock_web ^0.1.0+3 and no versions of wakelock match >0.2.1+1 <0.3.0, flutter_link_previewer >=0.2.0 is incompatible with wakelock ^0.2.1+1.


And because chewie 0.12.2 depends on wakelock ^0.2.1+1 and no versions of chewie match >0.12.2 <0.13.0, flutter_link_previewer >=0.2.0 is incompatible with chewie ^0.12.2.
So, because echata depends on both chewie ^0.12.2 and flutter_link_previewer ^1.0.5, version solving failed.
pub get failed (1; So, because echata depends on both chewie ^0.12.2 and flutter_link_previewer ^1.0.5, version solving failed.)
exit code 1

Hello,

What about to update 'http' dependency to 1.0?

Reason (as just one of examples):
0.13.6 prevents to build an app with the last stable versions of flutter_map(5.0.0) and flutter_chat_ui(1.6.8) together

p.s. looks like http-0.13.x is only needed to make some tests with 'dart-code-metrics', which itself in a 'deprecation process'
https://github.com/dart-code-checker/dart-code-metrics/blob/98f908a1ab1370b02a4fec9a6f8d7f7de4ae8f35/README.md?plain=1#L9

json_serializable depends on json_annotation and other packages depends on the new version of the same package.

Can you please update json_serializable if possible, thanks!

There's some issue that the data from LinkPreview can not fetch image from link like ChatGPT or TikTok, but works well some common link like Google, YouTube, Drive, StackOverFlow, etc

LinkPreview(
              enableAnimation: true,
              onPreviewDataFetched: (data) => setPreviewDataURL(data),
              previewData: previewURLdata, // Pass the preview data from the state
              text: urlString,
              width: widget.width,
              previewBuilder: (p0, p1) {
                return Column(
                  children: [
                    // IMAGE
                    if (p1.image != null)
                      Container(
                          height: 100,
                          width: widget.width + 4,
                          margin: const EdgeInsets.fromLTRB(1, 1, 1, 10),
                          child: ClipRRect(
                            borderRadius: const BorderRadius.only(
                              topLeft: Radius.circular(15),
                              topRight: Radius.circular(15),
                            ),
                            child: Image.network(p1.image!.url, fit: BoxFit.cover),
                          )),

                    // TITLE
                    if (p1.title != null)
                      Container(
                          margin: const EdgeInsets.only(left: 10, right: 10, top: 5),
                          child: Text(p1.title!,
                              maxLines: 3, style: TextStyle(fontWeight: FontWeight.w600, color: widget.titleColor))),

                    // URL
                    if (p1.link != null)
                      Container(
                        margin: const EdgeInsets.only(left: 10, right: 10, bottom: 8),
                        child: Text(
                          p1.link!,
                          overflow: TextOverflow.ellipsis,
                          maxLines: 1,
                          style: TextStyle(
                            color: widget.urlColor,
                          ),
                        ),
                      )
                  ],
                );
              }),```

I tried with some Twitter post urls but it seems the package can not crawl them. For eg:

• Twitter post -> Only Twitter title

But there are some other networks that are good displaying:

• Reddit post -> Good
• Quora post -> Good

Pls help to support it! Thanks!

Hello, I am using this sdk very well.

However, due to the cors policy, related data cannot be received normally on the web.

In nginx, the error "No 'Access-Control-Allow-Origin' header is present on the requested resource.", even though the 'Access-Control-Allow-Origin' command allows the cors.

I tried to resolve it using the coursesProxy parameter and header parameter provided by sdk, but I don't know how to use it for normal use.

Are there any good examples?

Hi,

I think i saw a way to integrate this previewer on the Chat UI, but i couldn't remembere when or how.

Is there any officla tutorial about it?

Thank you.

The following code is placed on my StatefulWidget.

    LinkPreview(
      enableAnimation: true,
      onPreviewDataFetched: (data) {
        print(data);  // data is empty
        setState(() {
          httpdata = data;
        });
      },
      previewData: httpdata,
      text: s, // the url is passed here
      width: MediaQuery.of(context).size.width * 0.7,
    ),

Called with two URLs on the Web platform I get the following response in the data parameter and (of course) no preview is shown, but why is the PreviewData object empty? I have a feeling that the data are never fetched because of an async call somewhere in the flutter_link_previewer library?

_PreviewData(null, null, https://dr.dk, null)
_PreviewData(null, null, https://tv2.dk, null)

An error comes in getPreviewData when http.get is called and it goes to the catch block.

[log] XMLHttpRequest error.

Please have a look at this post for solving the problem: dart-flutter-http-request-raises-xmlhttprequest-error as it is probably the issue???

Hi, it would be awesome if we could provide our custom URL handler.

Proposed change

 LinkPreview(
    ...
    onLinkPressed:(url){
        if(url!=null){
            // handle url here
        }
    }
    text: widget.body,
    ...
  )

Thanks for this useful package.
But it will be nice if we have one more option that enable/disable link's selectable.

/// Regex to find all links in the text.
const regexLink =
r'((http|ftp|https)://)?([\w_-]+(?:(?:.[\w_-][a-zA-Z_][\w_-])+))([\w.,@?^=%&:/+#-]*[\w@?^=%&/+#-])?[^\.\s]';

/// Regex to find all links in the text.
const regexLink =
r'https?://(?:[А-Яа-яA-Za-z0-9-]+.)+[А-Яа-яA-Za-z]{2,}(?:/[^/#?]+)+.(?:[A-Za-z0-9]+(?:.[A-Za-z0-9]+))?(?:?[^#\s])?(?:#\S*)?'

Thanks for an amazing package.
It would be great if we can have a flag that makes the preview image hide.
Thanks

_bodyWidget method has a constant padding value. Can we extend this so that we can customize this value too?