Flutter URL预览生成插件simple_url_preview_v2的使用

简介

simple_url_preview_v2 是一个用于在 Flutter 应用中显示 URL 预览的插件。目前该插件仅支持 Open Graph Protocol。

特点

• 支持 URL 预览
• 可自定义预览的高度、背景色、文本样式等
• 支持关闭预览功能
• 可自定义点击事件

安装

在 pubspec.yaml 文件中添加 simple_url_preview_v2 依赖，并运行 flutter pub get 命令：

dependencies:
  ...
  simple_url_preview_v2: ^4.0.0

使用方法

1. 简单使用

SimpleUrlPreview(
  url: 'https://pub.dev/',
),

2. 覆盖预览高度和内边距

默认和最小可能的高度为 130。

SimpleUrlPreview(
  url: 'https://pub.dev/',
  previewHeight: 200,
  previewContainerPadding: EdgeInsets.all(10),
),

3. 覆盖背景颜色

默认背景色为 Theme.of(context).primaryColor。

SimpleUrlPreview(
  url: 'https://pub.dev/',
  bgColor: Colors.red,
),

4. 覆盖标题、描述和站点名称样式

默认样式如下：

• titleStyle: TextStyle(fontWeight: FontWeight.bold, fontSize: 16, color: Theme.of(context).accentColor)
• descriptionStyle: TextStyle(fontSize: 14, color: Theme.of(context).accentColor)
• siteNameStyle: TextStyle(fontSize: 14, color: Theme.of(context).accentColor)

SimpleUrlPreview(
  url: 'https://pub.dev/',
  titleStyle: TextStyle(
    fontSize: 16,
    fontWeight: FontWeight.bold,
    color: Colors.red,
  ),
  descriptionStyle: TextStyle(
    fontSize: 14,
    color: Theme.of(context).primaryColor,
  ),
  siteNameStyle: TextStyle(
    fontSize: 14,
    color: Theme.of(context).primaryColor,
  ),
),

5. 可关闭的预览

点击 “x” 按钮可以关闭预览。

SimpleUrlPreview(
  url: 'https://pub.dev/',
  isClosable: true,
),

6. 覆盖图像加载器颜色和标题、描述行数

默认和最大标题行数为 2，描述行数为 3。

SimpleUrlPreview(
  url: 'https://pub.dev/',
  titleLines: 1,
  descriptionLines: 2,
  imageLoaderColor: Colors.white,
),

7. 覆盖点击回调

默认情况下，点击预览会打开 URL 在默认浏览器中。

SimpleUrlPreview(
  url: 'https://pub.dev/',
  onTap: () => print('Hello Flutter URL Preview'),
),

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 simple_url_preview_v2 插件：

import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:simple_url_preview_v2/simple_url_preview.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Simple Url Preview Demo',
      theme: ThemeData(
        primaryColor: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
        colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.blue)
            .copyWith(secondary: Colors.white),
      ),
      home: const MyHomePage(title: 'Simple Url Preview Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String? title;

  const MyHomePage({super.key, this.title});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _url = '';

  void _onUrlChanged(String updatedUrl) {
    setState(() {
      _url = updatedUrl;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title!),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          SimpleUrlPreview(
            elevation: 0,
            url: _url,
            bgColor: Colors.transparent,
            isClosable: true,
            titleLines: 2,
            descriptionLines: 3,
            imageLoaderColor: Colors.white,
            previewHeight: 150,
            previewContainerPadding: const EdgeInsets.all(10),
            onTap: () => log('Hello Flutter URL Preview'),
            titleStyle: const TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.bold,
              color: Colors.red,
            ),
            descriptionStyle: TextStyle(
              fontSize: 14,
              color: Theme.of(context).primaryColor,
            ),
            siteNameStyle: TextStyle(
              fontSize: 14,
              color: Theme.of(context).primaryColor,
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(20),
            child: TextField(
              onChanged: (newValue) => _onUrlChanged(newValue),
              decoration: const InputDecoration(
                hintText: 'Enter the url',
              ),
            ),
          ),
        ],
      ),
    );
  }
}

贡献

欢迎任何贡献！

致谢

如果你喜欢我的工作，请给仓库点个星🌟。

你也可以通过以下方式表示感谢：

希望这些信息对你有帮助！如果有任何问题或建议，请随时联系我。