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

neplox_linkpreviewer 是一个用于从URL中提取并显示丰富链接预览的Flutter插件。它支持自定义样式和行为，非常适合需要展示网页摘要的应用场景。

主要特性

• 自动元数据提取：轻松获取标题、描述、图片和图标等信息。
• 内置预览组件：NeploxLinkPreviewer 提供了一个预设样式的链接预览。
• 可定制性：
  • 控制缩略图位置（NThumbnailPreviewDirection）。
  • 自定义文本和背景颜色。
  • 选择在应用内或外部浏览器中打开链接（NURLLaunch, NURLLaunchIn）。
• 灵活的元数据访问：使用 NeploxMetaDataFetcher 获取元数据以实现自定义UI。
• 缓存机制：通过缓存提高性能。
• 扩展性强：支持自定义小部件构建器，完全控制预览布局。
• 错误处理：优雅地处理无效URL和网络问题。

快速开始

安装

将以下内容添加到您的pubspec.yaml文件中：

dependencies:
  neplox_linkpreviewer: ^1.0.8

使用方法

1. 使用内置预览组件

// 底部方向样式
NeploxLinkPreviewer(
  url: 'https://example.com',
  linkPreviewOptions: NLinkPreviewOptions(
    thumbnailPreviewDirection: NThumbnailPreviewDirection.bottom,
    urlLaunch: NURLLaunch.enable,
    urlLaunchIn: NURLLaunchIn.browser,  // 或者 NURLLaunchIn.app
  ),
)

// 左至右方向样式
NeploxLinkPreviewer(
  url: 'https://example.com',
  linkPreviewOptions: NLinkPreviewOptions(
    thumbnailPreviewDirection: NThumbnailPreviewDirection.ltr,
    urlLaunch: NURLLaunch.enable,
    urlLaunchIn: NURLLaunchIn.app,
  ),
  cardStyle:NCardStyle( // 卡片样式
    width: 0.95 * MediaQuery.of(context).size.width,
    height: 0.45 * MediaQuery.of(context).size.height,
   )
)

2. 获取元数据以创建自定义组件

final metaDataFetcher = NeploxMetaDataFetcher.instance;
final elementModel = await metaDataFetcher.fetchData('https://example.com');

// 使用elementModel.title, elementModel.description等构建自己的UI。

3. 属性配置

/// 显示方向 [normal,top,bottom,ltr,rtl]
final NThumbnailPreviewDirection thumbnailPreviewDirection;

/// 配置URL启动属性 [enable,disable]
final NURLLaunch urlLaunch;

/// 配置URL启动位置 [browser,app,none]
final NURLLaunchIn urlLaunchIn;

/// 配置卡片样式 [cardStyle]
final NCardStyle cardStyle;

/// 配置排版样式 [typographyStyle]
final NCTypographyStyle typographyStyle;

示例代码

下面是一个完整的示例项目，演示了如何使用该插件：

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:neplox_linkpreviewer/neplox_linkpreviewer.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> urls = [
    "https://ekantipur.com/news/2023/02/05/167556100681196555.html",
    "https://www.youtube.com/watch?v=A9hcJgtnm6Q&list=RDRDwrng3YkNU&index=5",
    "https://www.youtube.com/watch?v=q_HEQajNwyY&list=RDq_HEQajNwyY&start_radio=1",
    "https://www.youtube.com/watch?v=qik_1dDvzEs&list=RDq_HEQajNwyY&index=3",
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: ListView.builder(
            itemCount: urls.length,
            itemBuilder: (context, index) {
              return LinkPreviwer(url: urls[index]);
            }));
  }
}

class LinkPreviwer extends StatefulWidget {
  const LinkPreviwer({Key? key, required this.url}) : super(key: key);
  final String url;

  [@override](/user/override)
  State<LinkPreviwer> createState() => _LinkPreviwerState();
}

class _LinkPreviwerState extends State<LinkPreviwer> {
  final random = Random();
  List<NThumbnailPreviewDirection> directions = [
    NThumbnailPreviewDirection.ltr,
    NThumbnailPreviewDirection.bottom,
    NThumbnailPreviewDirection.rtl,
    NThumbnailPreviewDirection.top,
    NThumbnailPreviewDirection.normal
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    int randomIndex = random.nextInt(directions.length);

    return Padding(
      padding: const EdgeInsets.all(10.0),
      child: NeploxLinkPreviewer(
        url: widget.url,
        linkPreviewOptions: NLinkPreviewOptions(
          urlLaunch: NURLLaunch.enable,
          urlLaunchIn: NURLLaunchIn.browser,
          thumbnailPreviewDirection: directions[randomIndex],
        ),
      ),
    );
  }
}