搜索插件、代码仓与 APP 分类

social_embed_webview 封面
插件详情v0.3.2

social_embed_webview

提供一个 Widget,可轻松使用平台的 Web 嵌入功能在 Flutter 中嵌入社交媒体帖子。

AndroidiOS
近 30 天下载
27
喜欢数
43
Pub 分数
120

安装插件

flutter pub add social_embed_webview

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

social_embed_webview 包使 Flutter 开发者能够轻松地在应用中嵌入社交媒体帖子,利用平台原生的网页嵌入功能。它提供了一个简单的组件,通过 WebView 组件直接在应用中渲染社交内容(如推文、Instagram 帖子或 Facebook 动态)。这种方法确保了与动态社交媒体内容的兼容性,同时在 Android 和 iOS 平台上保持无缝的用户体验。该包非常适合集成社交动态流或可分享内容的应用。

适合场景

  • 在新闻应用中嵌入推文
  • 在社交动态中显示 Instagram 帖子
  • 在社区应用中集成 Facebook 帖子
  • 在内容平台中显示 YouTube 视频
  • 创建可分享的社交内容预览

主要特点

  • 用于社交媒体嵌入的简单小部件
  • 使用平台原生网页嵌入
  • 支持 Android 和 iOS
  • 轻量且易于集成
  • 处理动态社交媒体内容

适合对象

  • 带有社交媒体集成的应用程序
  • 新闻和内容聚合平台
  • 社交网络应用
  • 营销和推广应用
  • 需要可共享媒体预览的应用程序

使用建议

  • 依赖互联网连接
  • 可能需要额外的权限以访问网页
  • 性能取决于网络速度
  • 嵌入内容的自定义有限
  • 外部网络内容可能存在的安全考虑

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

Social Embed WebView (Developers Preview)

Currently non of the major social media platform provides support to embed their post in a flutter app. This flutter package provides widgets to embed posts of various social media platforms using webview_flutter in the background.

Please note

  • version < 0.3.0 is not backward compatiable from this version. So please go through examples before upgrading

Content

Why Us

They are not many solutions in the community to solve this problem. All the packages use the same webview_flutter in the background but have a major issue of a predefined height. While this package adjusts the heights of the webview automatically according to the size of the embedded post.

Supported Platforms:

How to use?

1: Add this to your package's pubspec.yaml file:

dependencies:
  social_embed_webview: 0.3.1

2: You can install packages from the command line:

$ flutter packages get

Alternatively, your editor might support flutter packages get. Check the docs for your editor to learn more.

3: Please visit webview_flutter and follow the steps required for implementations in Android and iOS respectively.

Example

Please make sure to remove <script>...</script> added by the platform with other embed code. Please visit examples for more detailed examples corresponding to each platform

import 'package:flutter/material.dart';
import 'package:social_embed_webview/platforms/twitter.dart';
import 'package:social_embed_webview/social_embed_webview.dart';

/// <srcipts>...</scripts> tag has been removed
String tweetContent = r"""
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Here’s an edit I did of one of my drawings. I tend to draw a lot of aot stuff when each chapter is released. Sorry about that!<br>Song: polnalyubvi кометы<br>Character: Annie Leonhart <a href="https://twitter.com/hashtag/annieleonhart?src=hash&amp;ref_src=twsrc%5Etfw">#annieleonhart</a> <a href="https://twitter.com/hashtag/aot131spoilers?src=hash&amp;ref_src=twsrc%5Etfw">#aot131spoilers</a> <a href="https://twitter.com/hashtag/aot?src=hash&amp;ref_src=twsrc%5Etfw">#aot</a> <a href="https://twitter.com/hashtag/AttackOnTitan131?src=hash&amp;ref_src=twsrc%5Etfw">#AttackOnTitan131</a> <a href="https://twitter.com/hashtag/AttackOnTitans?src=hash&amp;ref_src=twsrc%5Etfw">#AttackOnTitans</a> <a href="https://twitter.com/hashtag/snk?src=hash&amp;ref_src=twsrc%5Etfw">#snk</a> <a href="https://twitter.com/hashtag/snk131?src=hash&amp;ref_src=twsrc%5Etfw">#snk131</a> <a href="https://twitter.com/hashtag/shingekinokyojin?src=hash&amp;ref_src=twsrc%5Etfw">#shingekinokyojin</a> <a href="https://t.co/b4z48ruCoD">pic.twitter.com/b4z48ruCoD</a></p>&mdash; evie (@hazbin_freak22) <a href="https://twitter.com/hazbin_freak22/status/1291884358870142976?ref_src=twsrc%5Etfw">August 7, 2020</a></blockquote> """;

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: SafeArea(
        child: Scaffold(
          appBar: AppBar(
            title: const Text('Social Embed WebView Example'),
          ),
          body: SingleChildScrollView(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                children: [
                  SocialEmbed(
                      socialMediaObj:
                          TwitterEmbedData(embedHtml: tweetContent)),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Output

Known Bugs

  • Media playback continuous incase of router.push() for all platform
  • Media playback continuous incase of app going in background for all platform except Youtube

所属分类

依赖

依赖清单 4 项

源码仓库

使用此插件的项目

暂无相关数据。