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

插件介绍

link_preview_generator 是一个跨平台的 Flutter 插件，用于将链接转换为丰富且美观的预览卡片。该插件灵感来源于 Any Link Preview 包，但整个解析和抓取逻辑已经重写，以更健壮并支持更多类型的链接。此外，它还提供了对小部件的完全自定义控制。

特点

• 支持多种链接类型
• 提供丰富的自定义选项
• 高效的缓存机制
• 易于使用的 API

使用方法

安装

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  link_preview_generator: ^latest_version

示例代码

Widget 示例

以下是一个简单的示例，展示如何使用 LinkPreviewGenerator 小部件生成链接预览：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Link Preview Generator Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 列表中的链接将被预览
  List<String> get urls => const [
        'https://github.com/ghpranav/link_preview_generator',
        'https://www.espn.in/football/soccer-transfers/story/4163866/transfer-talk-lionel-messi-tells-barcelona-hes-more-likely-to-leave-then-stay',
        'https://speakerdeck.com/themsaid/the-power-of-laravel-queues',
        'https://twitter.com/laravelphp/status/1222535498880692225',
        'https://www.youtube.com/watch?v=W1pNjxmNHNQ',
        'https://www.instagram.com/p/CQ3WCUOru1T/',
        'https://www.google.com/'
      ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        brightness: Brightness.dark,
        title: Text('Link Preview Generator'),
      ),
      body: ListView.builder(
        itemCount: urls.length,
        itemBuilder: (context, index) => Container(
          key: ValueKey(urls[index]),
          margin: const EdgeInsets.all(15),
          // 生成每个链接的预览
          // 交替显示大、小预览样式
          child: LinkPreviewGenerator(
            link: urls[index],
            linkPreviewStyle: index % 2 == 0
                ? LinkPreviewStyle.large
                : LinkPreviewStyle.small,
          ),
        ),
      ),
    );
  }
}

Function 示例

你也可以使用 LinkPreview 类的方法来获取链接的元数据，并根据这些数据构建自定义的小部件：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Link Preview Generator Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late Future<WebInfo> _webInfoFuture;

  @override
  void initState() {
    super.initState();
    _webInfoFuture = LinkPreview.scrapeFromURL('https://github.com/ghpranav/link_preview_generator');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Link Preview Generator'),
      ),
      body: Center(
        child: FutureBuilder<WebInfo>(
          future: _webInfoFuture,
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return CircularProgressIndicator();
            } else if (snapshot.hasError) {
              return Text('Error: ${snapshot.error}');
            } else if (!snapshot.hasData) {
              return Text('No data found');
            } else {
              final WebInfo info = snapshot.data!;
              return Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(info.title ?? 'No title'),
                  Text(info.description ?? 'No description'),
                  Image.network(info.image ?? 'https://via.placeholder.com/150'),
                  Text('Domain: ${info.domain}'),
                  Text('Type: ${info.type}'),
                  Text('Video: ${info.video ?? 'No video'}'),
                ],
              );
            }
          },
        ),
      ),
    );
  }
}

属性与方法

LinkPreviewGenerator

贡献

欢迎贡献！请遵循以下步骤：

1. Fork 项目
2. 创建你的功能分支 (git checkout -b my-new-feature)
3. 提交你的更改 (git commit -am 'Added some feature')
4. 推送到分支 (git push origin my-new-feature)
5. 创建新的 Pull Request

贡献者

许可证

MIT License