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

simple_url_preview

获取开始

此插件用于显示URL预览。（现已迁移至null-safety）。

目前仅支持Open Graph Protocol。

请使用插件的最新版本。

如何使用？

在pubspec.yaml文件中添加simple_url_preview，然后运行命令flutter pub get。

dependencies:
  ...
  simple_url_preview: ^3.0.1

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) 覆盖标题、描述和站点样式：

默认标题样式为：

TextStyle(
  fontWeight: FontWeight.bold,
  fontSize: 16,
  color: Theme.of(context).accentColor
)

默认描述样式为：

TextStyle(
  fontSize: 14,
  color: Theme.of(context).accentColor
)

默认站点名称样式为：

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预览的onTap回调：

默认情况下，将在默认浏览器中打开URL。

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

贡献

非常希望看到您的贡献。

感激

如果您喜欢我的工作，请给仓库点个⭐。

您也可以通过以下方式表示感激：

完整示例代码

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Simple Url Preview Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        primaryColor: Colors.blue,
        accentColor: Colors.white,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Simple Url Preview Demo'),
    );
  }
}

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

  final String? title;

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title!),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          SimpleUrlPreview(
            url: _url,
            bgColor: Theme.of(context).accentColor,
            isClosable: true,
            titleLines: 2,
            descriptionLines: 3,
            imageLoaderColor: Colors.white,
            previewHeight: 150,
            previewContainerPadding: EdgeInsets.all(10),
            onTap: () => print('Hello Flutter URL Preview'),
            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,
            ),
          ),
          Padding(
            padding: EdgeInsets.all(20),
            child: TextField(
              onChanged: (newValue) => _onUrlChanged(newValue),
              decoration: InputDecoration(
                hintText: 'Enter the url',
              ),
            ),
          ),
        ],
      ),
    );
  }
}