Flutter链接预览生成插件link_preview

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

简介

link_preview_flutter 是一个用于生成链接预览的Flutter插件，它通过读取Open Graph标签来显示链接的标题、描述和图片。该插件支持多种自定义选项，如背景颜色、字体颜色、预览大小和布局样式等。

功能特性

可配置的背景颜色：通过 background 参数设置。
可配置的字体颜色：通过 fontColor 参数设置。
可配置的预览大小：通过 size 参数设置。
多种主题布局：
- rectangle-image-left
- rectangle-image-right
- square-image-up
- square-image-down
- square-image-center

截图

App Screenshot

使用示例

以下是一个完整的示例代码，展示了如何在Flutter应用中使用 link_preview_flutter 插件来生成链接预览。

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:link_preview_flutter/link_preview_flutter.dart';

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Widget _linkPreview1 = Container();
  Widget _linkPreview2 = Container();
  Widget _linkPreview3 = Container();
  Widget _linkPreview4 = Container();
  Widget _linkPreview5 = Container();
  final myController = TextEditingController();

  [@override](/user/override)
  void initState() {
    super.initState();
    initPlatformState();
  }

  Future<void> initPlatformState() async {
    try {
      // 创建第一个链接预览
      _linkPreview1 = await LinkPreviewFlutter.create(
        "https://medium.com/todo-sobre-flutter/flutter-sliverappbar-sliverlist-slivergrid-y-sliveranimatedlist-595b205c1abe",
      );

      // 创建第二个链接预览，使用矩形布局，右侧显示图片
      _linkPreview2 = await LinkPreviewFlutter.create(
        "https://freecons.herokuapp.com/",
        type: 'rectangle-image-right',
        size: 200,
        background: Colors.black,
        fontColor: Colors.white,
      );

      // 创建第三个链接预览，使用方形布局，图片在上方
      _linkPreview3 = await LinkPreviewFlutter.create(
        "https://www.npmjs.com/package/@arekjaar/link-preview",
        type: 'square-image-up',
        size: 200,
        background: Colors.black,
        fontColor: Colors.white,
      );

      // 创建第四个链接预览，使用方形布局，图片居中
      _linkPreview4 = await LinkPreviewFlutter.create(
        "https://www.buymeacoffee.com/martinmul",
        type: 'square-image-center',
        background: Colors.black,
        fontColor: Colors.white,
      );

      // 创建第五个链接预览，使用方形布局，图片在下方
      _linkPreview5 = await LinkPreviewFlutter.create(
        "https://medium.com/todo-sobre-flutter/flutter-sliverappbar-sliverlist-slivergrid-y-sliveranimatedlist-595b205c1abe",
        type: 'square-image-down',
        size: 400,
        background: Colors.black,
        fontColor: Colors.white,
      );
    } on HttpException {
      // 如果发生HTTP异常，返回空容器
      _linkPreview1 = Container();
      _linkPreview2 = Container();
      _linkPreview3 = Container();
      _linkPreview4 = Container();
      _linkPreview5 = Container();
    }

    if (!mounted) return;

    setState(() {
      // 更新状态
      _linkPreview1 = _linkPreview1;
      _linkPreview2 = _linkPreview2;
      _linkPreview3 = _linkPreview3;
      _linkPreview4 = _linkPreview4;
      _linkPreview5 = _linkPreview5;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Container(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              // 输入框，用于输入链接
              TextField(
                controller: myController,
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  hintText: 'Link',
                ),
              ),
              // 按钮，点击后生成链接预览
              TextButton(
                onPressed: () {
                  LinkPreviewFlutter.create(myController.text,
                          size: 400,
                          background: Colors.black,
                          fontColor: Colors.white)
                      .then((value) => setState(() {
                            _linkPreview1 = value;
                          }));
                },
                child: Padding(
                  padding: EdgeInsets.all(10),
                  child: Text(
                    'Set link',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
                style: ButtonStyle(
                  backgroundColor:
                      MaterialStateProperty.all<Color>(Colors.green),
                ),
              ),
              // 显示链接预览
              Expanded(
                child: SingleChildScrollView(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      SafeArea(
                        child: SingleChildScrollView(
                          scrollDirection: Axis.horizontal,
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                            children: [
                              Padding(
                                padding: EdgeInsets.all(5),
                                child: _linkPreview1,
                              ),
                              Padding(
                                padding: EdgeInsets.all(5),
                                child: _linkPreview2,
                              ),
                            ],
                          ),
                        ),
                      ),
                      SafeArea(
                        child: SingleChildScrollView(
                          scrollDirection: Axis.horizontal,
                          child: Expanded(
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                              children: [
                                Padding(
                                  padding: EdgeInsets.all(5),
                                  child: _linkPreview3,
                                ),
                                Padding(
                                  padding: EdgeInsets.all(5),
                                  child: _linkPreview4,
                                ),
                                Padding(
                                  padding: EdgeInsets.all(5),
                                  child: _linkPreview5,
                                ),
                              ],
                            ),
                          ),
                        ),
                      )
                    ],
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

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

eggper 1楼•7 天前

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

当然，以下是如何在Flutter项目中使用link_preview_flutter插件来生成链接预览的示例代码。这个插件可以帮助你快速获取网页链接的预览信息，包括标题、描述和图片等。

首先，确保你已经在pubspec.yaml文件中添加了link_preview_flutter依赖：

dependencies:
  flutter:
    sdk: flutter
  link_preview_flutter: ^最新版本号  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

接下来，在你的Flutter项目中，你可以按照以下步骤使用link_preview_flutter插件：

导入插件：

在你的Dart文件中导入插件：

import 'package:link_preview_flutter/link_preview_flutter.dart';

使用插件获取链接预览：

下面是一个简单的示例，展示如何使用LinkPreview类来获取链接的预览信息，并在UI中显示：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LinkPreviewScreen(),
    );
  }
}

class LinkPreviewScreen extends StatefulWidget {
  @override
  _LinkPreviewScreenState createState() => _LinkPreviewScreenState();
}

class _LinkPreviewScreenState extends State<LinkPreviewScreen> {
  final TextEditingController _controller = TextEditingController();
  LinkPreviewData? _linkPreviewData;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Link Preview Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            TextField(
              controller: _controller,
              decoration: InputDecoration(
                labelText: 'Enter URL',
                border: OutlineInputBorder(),
              ),
              keyboardType: TextInputType.url,
            ),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: _fetchLinkPreview,
              child: Text('Get Preview'),
            ),
            SizedBox(height: 16),
            if (_linkPreviewData != null)
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    'Title: ${_linkPreviewData!.title ?? 'N/A'}',
                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                  ),
                  SizedBox(height: 8),
                  Text(
                    'Description: ${_linkPreviewData!.description ?? 'N/A'}',
                    style: TextStyle(fontSize: 14),
                  ),
                  SizedBox(height: 16),
                  if (_linkPreviewData!.images.isNotEmpty)
                    Image.network(
                      _linkPreviewData!.images.first,
                      width: double.infinity,
                      height: 200,
                      fit: BoxFit.cover,
                    ),
                ],
              ),
          ],
        ),
      ),
    );
  }

  Future<void> _fetchLinkPreview() async {
    if (_controller.text.isNotEmpty && _controller.text.startsWith('http')) {
      try {
        final LinkPreview linkPreview = LinkPreview();
        _linkPreviewData = await linkPreview.getPreview(_controller.text);
        setState(() {});
      } catch (e) {
        print('Error fetching link preview: $e');
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('Failed to fetch link preview')),
        );
      }
    } else {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Please enter a valid URL')),
      );
    }
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，包含一个文本字段用于输入URL，一个按钮用于触发链接预览的获取，以及一个用于显示预览信息的区域。

当用户输入一个URL并点击“Get Preview”按钮时，应用会调用_fetchLinkPreview函数。
LinkPreview类的getPreview方法被用来异步获取链接的预览信息。
获取到的预览信息（包括标题、描述和图片）会显示在UI上。

注意：在实际应用中，你可能需要处理更多的错误情况和边界情况，例如网络错误、无效的URL等。此外，确保你遵守了相关网站的使用条款和隐私政策，以避免滥用链接预览功能。