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

发布于 1周前 作者 ionicwang 来自 Flutter

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

简介

flutter_link_previewer 是一个用于在Flutter应用中生成链接和URL预览的插件,支持从缓存中渲染数据。它非常适合聊天应用程序等需要展示链接预览的场景。

插件信息

开始使用

要开始使用 flutter_link_previewer 插件,首先确保你已经在 pubspec.yaml 文件中添加了依赖项:

dependencies:
  flutter_link_previewer: ^latest_version

接下来,在你的Dart文件中导入包,并使用 LinkPreview 组件来创建链接预览。

示例代码

以下是一个完整的示例demo,展示了如何使用 flutter_link_previewer 插件来显示多个链接的预览:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_chat_types/flutter_chat_types.dart' show PreviewData;
import 'package:flutter_link_previewer/flutter_link_previewer.dart';

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

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

  @override
  Widget build(BuildContext context) => const MaterialApp(
        home: MyHomePage(),
      );
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

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

class _MyHomePageState extends State<MyHomePage> {
  Map<String, PreviewData> datas = {};

  List<String> get urls => const [
        'https://github.com/flyerhq',
        'https://u24.gov.ua',
        'https://twitter.com/SpaceX/status/1564975288655630338',
      ];

  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);

    return Scaffold(
      backgroundColor: Colors.white,
      body: ListView.builder(
        itemCount: urls.length,
        itemBuilder: (context, index) => Align(
          alignment: Alignment.centerLeft,
          child: Container(
            key: ValueKey(urls[index]),
            margin: const EdgeInsets.all(16),
            decoration: const BoxDecoration(
              borderRadius: BorderRadius.all(
                Radius.circular(20),
              ),
              color: Color(0xfff7f7f8),
            ),
            child: ClipRRect(
              borderRadius: const BorderRadius.all(
                Radius.circular(20),
              ),
              child: LinkPreview(
                enableAnimation: true,
                onPreviewDataFetched: (data) {
                  setState(() {
                    datas = {
                      ...datas,
                      urls[index]: data,
                    };
                  });
                },
                previewData: datas[urls[index]],
                text: urls[index],
                width: MediaQuery.of(context).size.width,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

在这个例子中,我们定义了一个包含三个URL的列表,并为每个URL创建了一个 LinkPreview 组件。当链接预览数据获取成功时,会调用 onPreviewDataFetched 回调函数并更新状态,以显示最新的预览数据。

自定义样式

你可以通过设置不同的属性来自定义 LinkPreview 的外观。例如,可以修改文本样式、内边距等属性:

final style = TextStyle(
  color: Colors.red,
  fontSize: 16,
  fontWeight: FontWeight.w500,
  height: 1.375,
);

LinkPreview(
  linkStyle: style,
  metadataTextStyle: style.copyWith(
    fontSize: 14,
    fontWeight: FontWeight.w400,
  ),
  metadataTitleStyle: style.copyWith(
    fontWeight: FontWeight.w800,
  ),
  padding: EdgeInsets.symmetric(
    horizontal: 24,
    vertical: 16,
  ),
  onPreviewDataFetched: _onPreviewDataFetched,
  previewData: _previewData,
  text: 'https://flyer.chat',
  textStyle: style,
  width: width,
);

许可证

该插件遵循 MIT License

希望以上内容对你有所帮助!如果你有任何问题或建议,请随时告诉我。


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

1 回复

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


当然,以下是一个关于如何在Flutter项目中使用flutter_link_previewer插件来生成链接预览的示例代码。

首先,确保你已经在pubspec.yaml文件中添加了flutter_link_previewer依赖项:

dependencies:
  flutter:
    sdk: flutter
  flutter_link_previewer: ^x.y.z  # 替换为最新版本号

然后运行flutter pub get来获取依赖项。

接下来,你可以在你的Flutter应用中实现链接预览功能。以下是一个简单的示例,展示如何使用flutter_link_previewer插件:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Link Previewer Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: LinkPreviewScreen(),
    );
  }
}

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

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

  void _fetchPreview() async {
    if (_controller.text.isEmpty) {
      setState(() {
        _preview = null;
      });
      return;
    }

    try {
      _preview = await FlutterLinkPreviewer.getPreview(_controller.text);
    } catch (e) {
      print("Error fetching preview: $e");
      _preview = null;
    }

    if (mounted) {
      setState(() {});
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Link Previewer Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            TextField(
              controller: _controller,
              decoration: InputDecoration(
                labelText: 'Enter URL',
                border: OutlineInputBorder(),
              ),
              onEditingComplete: _fetchPreview,
            ),
            SizedBox(height: 16),
            if (_preview != null) {
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    'Title: ${_preview!.title}',
                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                  ),
                  SizedBox(height: 8),
                  Text(
                    'Description: ${_preview!.description}',
                    style: TextStyle(fontSize: 16),
                  ),
                  SizedBox(height: 8),
                  Text(
                    'Image URL: ${_preview!.imageUrl}',
                    style: TextStyle(fontSize: 16),
                  ),
                  SizedBox(height: 8),
                  Image.network(
                    _preview!.imageUrl,
                    width: double.infinity,
                    height: 200,
                    fit: BoxFit.cover,
                  ),
                ],
              )
            } else {
              Text('No preview available'),
            },
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _fetchPreview,
        tooltip: 'Fetch Preview',
        child: Icon(Icons.link),
      ),
    );
  }
}

在这个示例中,我们创建了一个简单的Flutter应用,其中包含一个文本字段用于输入URL,一个按钮用于触发预览请求,以及一个显示预览结果的区域。当用户在文本字段中输入URL并点击按钮或完成输入时,将调用_fetchPreview方法,该方法使用FlutterLinkPreviewer.getPreview函数获取链接的预览信息,并在UI中显示。

注意:

  1. 在实际应用中,你可能需要添加更多的错误处理和UI优化。
  2. flutter_link_previewer插件的API可能会随着版本更新而变化,请参考最新的官方文档以获取最新的用法和API。
回到顶部