Flutter链接预览生成插件flutter_link_previewer_advn的使用

Flutter链接预览生成插件flutter_link_previewer_advn的使用

简介

插件详情 
<a href="https://pub.dartlang.org/packages/flutter_link_previewer" rel="ugc"><img src="https://img.shields.io/pub/v/flutter_link_previewer" alt="Pub"></a>
<a href="https://github.com/flyerhq/flutter_link_previewer/actions?query=workflow%3Abuild" rel="ugc"><img src="https://github.com/flyerhq/flutter_link_previewer/workflows/build/badge.svg" alt="build"></a>
<a href="https://www.codefactor.io/repository/github/flyerhq/flutter_link_previewer" rel="ugc"><img src="https://www.codefactor.io/repository/github/flyerhq/flutter_link_previewer/badge" alt="CodeFactor"></a>

自定义链接和URL预览，可以从提供的文本中提取，并且具有从缓存中渲染的能力。非常适合聊天应用。


🇺🇦🇺🇦 我们是乌克兰人。如果您喜欢我们的工作，请考虑捐赠以帮助拯救我们的国家。 🇺🇦🇺🇦

入门指南

首先，确保在pubspec.yaml文件中添加了插件依赖：

dependencies:
  flutter_link_previewer_advn: ^最新版本号

然后导入插件：

import 'package:flutter_link_previewer_advn/flutter_link_previewer.dart';

接下来，你可以使用LinkPreview组件来显示链接预览：

LinkPreview(
  enableAnimation: true,
  onPreviewDataFetched: (data) {
    setState(() {
      // 保存预览数据到状态              
    });
  },
  previewData: _previewData, // 从状态传递预览数据
  text: 'https://flyer.chat',
  width: MediaQuery.of(context).size.width,
)

自定义

你还可以自定义LinkPreview组件的各种样式和参数。例如，可以设置链接样式、元数据文本样式、元数据标题样式、内边距等：

final style = TextStyle(
  color: Colors.red,
  fontSize: 16,
  fontWeight: FontWeight.w500,
  height: 1.375,
);

LinkPreview(
  linkStyle: style,
  metadataTextStyle: style.copyWith(
    fontSize: 14,
    fontWeight: FontWeight.w400,
  ),
  metadataTitleStyle: style.copyWith(
    fontWeight: FontWeight.w800,
  ),
  padding: EdgeInsets.symmetric(
    horizontal: 24,
    vertical: 16,
  ),
  onPreviewDataFetched: _onPreviewDataFetched,
  previewData: _previewData,
  text: 'https://flyer.chat',
  textStyle: style,
  width: width,
);

更多关于Flutter链接预览生成插件flutter_link_previewer_advn的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter链接预览生成插件flutter_link_previewer_advn的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flutter_link_previewer_advn 是一个用于在 Flutter 应用中生成链接预览的插件。它可以帮助你在应用中显示链接的标题、描述、图片等信息，类似于社交媒体应用中常见的链接预览功能。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 flutter_link_previewer_advn 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_link_previewer_advn: ^1.0.0 # 请检查最新版本

然后运行 flutter pub get 来安装插件。

使用插件

安装完成后，你可以在代码中使用 flutter_link_previewer_advn 来生成链接预览。以下是一个简单的示例：

import 'package:flutter/material.dart';
import 'package:flutter_link_previewer_advn/flutter_link_previewer_advn.dart';

class LinkPreviewExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Link Preview Example'),
      ),
      body: Center(
        child: LinkPreview(
          url: 'https://www.example.com', // 替换为你想预览的链接
          builder: (info) {
            if (info == null) {
              return CircularProgressIndicator();
            }
            return Column(
              children: [
                if (info.image != null)
                  Image.network(info.image!),
                if (info.title != null)
                  Text(
                    info.title!,
                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                  ),
                if (info.description != null)
                  Text(info.description!),
              ],
            );
          },
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: LinkPreviewExample(),
  ));
}

参数说明

  • url: 要预览的链接。
  • builder: 一个回调函数，用于构建链接预览的 UI。该回调函数接收一个 LinkPreviewInfo 对象，包含链接的标题、描述、图片等信息。

LinkPreviewInfo 属性

  • title: 链接的标题。
  • description: 链接的描述。
  • image: 链接的图片 URL。
  • url: 链接的 URL。

自定义样式

你可以根据需要自定义链接预览的样式。例如，你可以调整图片的大小、修改文本的样式等。

LinkPreview(
  url: 'https://www.example.com',
  builder: (info) {
    if (info == null) {
      return CircularProgressIndicator();
    }
    return Container(
      padding: EdgeInsets.all(10),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.grey),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          if (info.image != null)
            ClipRRect(
              borderRadius: BorderRadius.circular(8),
              child: Image.network(
                info.image!,
                width: double.infinity,
                height: 150,
                fit: BoxFit.cover,
              ),
            ),
          SizedBox(height: 10),
          if (info.title != null)
            Text(
              info.title!,
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
          SizedBox(height: 5),
          if (info.description != null)
            Text(
              info.description!,
              style: TextStyle(fontSize: 14, color: Colors.grey[700]),
            ),
        ],
      ),
    );
  },
)
回到顶部