flutter_wordpress_content 1.0.13

  • Readme
  • Changelog
  • Example
  • Installing
  • new62

flutter_wordpress_content #

A Flutter helper widget to parse WordPress content in raw form.

Getting Started #

In order for this plugin to work, you must provide the raw content which is saved in the database (not the rendered content returned by the API). For example see below comparison:

Raw Content #
<!-- wp:paragraph -->Some text to be shown<!-- /wp:paragraph -->
<!-- wp:image --><figure><img src="https://example.com/image.png" /></figure><!-- /wp:image -->
Rendered Content #
<p>Some text to be shown</p>
<img src="https://example.com/image.png" />

Using WPContent Class #

For detail on providing YouTube, SoundCloud or Issue widgets, see Supported Types section below.

Widget buildMyContent(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SingleChildScrollView(
          child: WPContent(
            "raw_content",
            headingTextColor: Colors.black,
            paragraphTextColor: Colors.black,
            imageCaptionTextColor: Colors.black,
            textDirection: TextDirection.ltr,
            fontFamily: 'my_font_family',
            fontSize: 19.0,
            paragraphArabicIdentifier: 'tk-adobe-arabic',
            arabicFontFamily: 'my_arabic_font_family',
            youtubeEmbedWidget: YouTubeEmbedWidget(),
            soundcloudEmbedWidget:
                SoundCloudEmbedWidget("Audio Title", "Audio Subtitle"),
            issuuEmbedWidget: IssueEmbedWidget(),
            jwPlayerWidget: JWPlayerEmbedWidget(),
          ),
        ),
      ),
    );
  }

Supported Types #

At this moment, this plugin supports the following types of content.

Heading <!-- wp:heading -->

Standard WP heading.

Paragraph <!-- wp:paragraph -->

Standard WP paragraph.

YouTube Embed <!-- wp:core-embed/youtube -->

For embedding YouTube, create your own widget for displaying YouTube video and inherit from the provided YouTubeWidget. This widget will give you access to the videoId. Use this ID in your widget to render YouTube player.

class YouTubeEmbedWidget extends YouTubeWidget {
  @override
  Widget buildWithVideoId(BuildContext context, String videoId) {
    return Container(
      padding: EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 20.0),
      child: AspectRatio(
        aspectRatio: 16 / 9,
        child: Container(
          child: Text(videoId),
        ),
      ),
    );
  }
}

Issue PDF Embed <!-- wp:core-embed/issuu -->

For embedding Issuu pdfs, create your own widget for displaying PDF and inherit from the provided IssuuWidget. This widget will give you access to an instance of SimpleArticle.

class IssueEmbedWidget extends IssuuWidget {
  @override
  Widget buildWithPDF(BuildContext context, SimpleArticle pdf) {
    return Container(
      padding: EdgeInsets.all(10.0),
      child: Center(
        child: RaisedButton(
            padding: EdgeInsets.all(10.0),
            color: Colors.green,
            child: Container(
              padding: EdgeInsets.only(top: 5.0),
              child: Text(
                "View PDF",
                style: Theme.of(context)
                    .textTheme
                    .body1
                    .copyWith(color: Colors.white),
              ),
            ),
            onPressed: () {
              Navigator.push(context, MaterialPageRoute<void>(
                builder: (context) {
                  return Container(
                    child: Text(pdf.paragraphRawContent),
                  );
                },
              ));
            }),
      ),
    );
  }
}

The instance of SimpleArticle will give you access to raw content where you can extract the PDF url. See below for an example. Use this URL to then display PDF in your widget.

String rawContent = mySimpleArticle.paragraphRawContent;

String extractedURL =
  RegExp(r'(?:"url":")(.*?)(?:")').firstMatch(rawContent).group(1);

SoundCloud Embed <!-- wp:html -->

When embedding SoundCloud, please make sure you use the embed code provided by SoundCloud and not the standard way of embedding in WordPress. This is necessary because the embed code contains track ID which is used to fetch more information about the track through SC API.

Inheriting from the provided SoundCloudWidget will give you access to trackId field. Use this ID to fetch the stream URL and metadata and play the audio. For an example of how to do that, please see the flutter_playout plugin.

class SoundCloudEmbedWidget extends SoundCloudWidget {
  final String title;
  final String subtitle;

  SoundCloudEmbedWidget(this.title, this.subtitle);

  @override
  Widget buildWithTrackId(BuildContext context, String trackId) {
    return Container(
      padding: EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 30.0),
      child: Container(
        child: Column(
          children: <Widget>[Text(title), Text(subtitle), Text(trackId)],
        ),
      ),
    );
  }
}

JWPlayer Embed #

For embedding JWPlayer hosted media, create your own widget for displaying video and inherit from the provided JWPlayerWidget. This widget will give you access to the mediaId. Use this ID in your widget to render the player.

class JWPlayerEmbedWidget extends JWPlayerWidget {
  @override
  Widget buildWithMediaId(BuildContext context, String mediaId) {
    return Container(
      padding: EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 20.0),
      child: AspectRatio(
        aspectRatio: 16 / 9,
        child: Container(
          child: Text(mediaId),
        ),
      ),
    );
  }
}

[1.0.13] - 6 October, 2019

  • Override == operator in SimpleArticle so that it can work in contains(object) in Maps and Lists

[1.0.12] - 6 October, 2019

  • Added better exception handling for SimpleArticle's to and from json methods

[1.0.11] - 5 October, 2019

  • Added FeatureImage class replacing imageUrl field in SimpleArticle
  • Added the ability to change text colour for Heading, Paragraph and Image Caption

[1.0.10] - 2 October, 2019

[1.0.9] - 2 October, 2019

  • Implemented Superscript , Subscript and tag parser

[1.0.8] - 2 October, 2019

  • Fixed an issue with image captions where super/sub scripts weren't being parsed

[1.0.7] - 2 October, 2019

  • Fixed an issue with TextSpan rendering

[1.0.6] - 2 October, 2019

  • Updated wp_parser to use TextSpan with RichText instead of Unicode for superscript and subscript

[1.0.5] - 2 October, 2019

  • Added JWPlayerWidget for embedding media hosted by your JW Player Account

[1.0.4] - 2 October, 2019

  • Fixed an issue with paragraph spacing

[1.0.3] - 2 October, 2019

  • Updated package description

[1.0.2] - 2 October, 2019

  • Changed embed helper widgets to simple classes

[1.0.1] - 2 October, 2019

  • Changed embed helper widgets to StatelessWidgets
  • Added example implementation in documentation

[1.0.0] - 1 October, 2019

  • Added content parser for Heading, Paragraph, YouTube, SoundCloud & Issuu embeds.

example/README.md

How to use flutter_wordpress_content #

Please see the below implementation for how to use this plugin.

import 'package:flutter/material.dart';
import 'package:flutter_wordpress_content/external/IssuuWidget.dart';
import 'package:flutter_wordpress_content/external/JWPlayerWidget.dart';
import 'package:flutter_wordpress_content/external/SoundCloudWidget.dart';
import 'package:flutter_wordpress_content/external/YouTubeWidget.dart';
import 'package:flutter_wordpress_content/model/SimpleArticle.dart';
import 'package:flutter_wordpress_content/wp_content.dart';

class WordPressContentExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          child: WPContent(
            "raw content",
            textDirection: TextDirection.ltr,
            fontFamily: 'my_font_family',
            fontSize: 19.0,
            paragraphArabicIdentifier: 'tk-adobe-arabic',
            arabicFontFamily: 'my_arabic_font_family',
            youtubeEmbedWidget: YouTubeEmbedWidget(),
            soundcloudEmbedWidget:
                SoundCloudEmbedWidget("Audio Title", "Audio Subtitle"),
            issuuEmbedWidget: IssueEmbedWidget(),
            jwPlayerWidget: JWPlayerEmbedWidget(),
          ),
        ),
      ),
    );
  }
}

class YouTubeEmbedWidget extends YouTubeWidget {
  @override
  Widget buildWithVideoId(BuildContext context, String videoId) {
    return Container(
      padding: EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 20.0),
      child: AspectRatio(
        aspectRatio: 16 / 9,
        child: Container(
          child: Text(videoId),
        ),
      ),
    );
  }
}

class SoundCloudEmbedWidget extends SoundCloudWidget {
  final String title;
  final String subtitle;

  SoundCloudEmbedWidget(this.title, this.subtitle);

  @override
  Widget buildWithTrackId(BuildContext context, String trackId) {
    return Container(
      padding: EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 30.0),
      child: Container(
        child: Column(
          children: <Widget>[Text(title), Text(subtitle), Text(trackId)],
        ),
      ),
    );
  }
}

class IssueEmbedWidget extends IssuuWidget {
  @override
  Widget buildWithPDF(BuildContext context, SimpleArticle pdf) {
    return Container(
      padding: EdgeInsets.all(10.0),
      child: Center(
        child: RaisedButton(
            padding: EdgeInsets.all(10.0),
            color: Colors.green,
            child: Container(
              padding: EdgeInsets.only(top: 5.0),
              child: Text(
                "View PDF",
                style: Theme.of(context)
                    .textTheme
                    .body1
                    .copyWith(color: Colors.white),
              ),
            ),
            onPressed: () {
              Navigator.push(context, MaterialPageRoute<void>(
                builder: (context) {
                  return Container(
                    child: Text(pdf.paragraphRawContent),
                  );
                },
              ));
            }),
      ),
    );
  }
}

class JWPlayerEmbedWidget extends JWPlayerWidget {
  @override
  Widget buildWithMediaId(BuildContext context, String mediaId) {
    return Container(
      padding: EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 20.0),
      child: AspectRatio(
        aspectRatio: 16 / 9,
        child: Container(
          child: Text(mediaId),
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  flutter_wordpress_content: ^1.0.13

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

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

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_wordpress_content/external/IssuuWidget.dart';
import 'package:flutter_wordpress_content/external/JWPlayerWidget.dart';
import 'package:flutter_wordpress_content/external/SoundCloudWidget.dart';
import 'package:flutter_wordpress_content/external/YouTubeWidget.dart';
import 'package:flutter_wordpress_content/model/FeatureImage.dart';
import 'package:flutter_wordpress_content/model/Paragraph.dart';
import 'package:flutter_wordpress_content/model/SimpleArticle.dart';
import 'package:flutter_wordpress_content/wp_content.dart';
import 'package:flutter_wordpress_content/wp_parser.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
25
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
62
Learn more about scoring.

We analyzed this package on Oct 10, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.5.1
  • pana: 0.12.21
  • Flutter: 1.9.1+hotfix.4

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health issues and suggestions

Document public APIs. (-0.18 points)

104 out of 107 API elements have no dartdoc comment.Providing good documentation for libraries, classes, functions, and other API elements improves code readability and helps developers find and use your API.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
cached_network_image ^1.1.1 1.1.1
flutter 0.0.0
html ^0.14.0+3 0.14.0+3
html_unescape ^1.0.1+3 1.0.1+3
url_launcher ^5.1.4 5.1.6
Transitive dependencies
async 2.4.0
charcode 1.1.2
collection 1.14.11 1.14.12
convert 2.1.1
crypto 2.1.3
csslib 0.16.1
flutter_cache_manager 1.1.1
http 0.12.0+2
http_parser 3.1.3
meta 1.1.7
path 1.6.4
path_provider 1.3.0
pedantic 1.8.0+1
platform 2.2.1
sky_engine 0.0.99
source_span 1.5.5
sqflite 1.1.7+1
string_scanner 1.0.5
synchronized 2.1.0+1
term_glyph 1.1.0
typed_data 1.1.6
uuid 2.0.2
vector_math 2.0.8
Dev dependencies
flutter_test