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.

WidgetbuildMyContent(BuildContext context) {
returnMaterialApp(
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.

classYouTubeEmbedWidgetextendsYouTubeWidget {
@overrideWidgetbuildWithVideoId(BuildContext context, String videoId) {
returnContainer(
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.

classIssueEmbedWidgetextendsIssuuWidget {
@overrideWidgetbuildWithPDF(BuildContext context, SimpleArticle pdf) {
returnContainer(
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) {
returnContainer(
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.

classSoundCloudEmbedWidgetextendsSoundCloudWidget {
finalString title;
finalString subtitle;
SoundCloudEmbedWidget(this.title, this.subtitle);
@overrideWidgetbuildWithTrackId(BuildContext context, String trackId, String embedCode) {
returnContainer(
padding:EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 30.0),
child:Container(
child:Column(
children:<Widget>[Text(title), Text(subtitle), Text(trackId)],
),
),
);
}
}

HearthisAt (hearthis.at) Embed <!-- wp:html -->

When embedding audios from hearthis.at, please make sure you use the embed code from the share button on the track.

Inheriting from the provided HearthisAtWidget 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.

classHearthisAtEmbedWidgetextendsHearthisAtWidget {
finalString title;
finalString subtitle;
HearthisAtEmbedWidget(this.title, this.subtitle);
@overrideWidgetbuildWithTrackId(BuildContext context, String trackId) {
returnContainer(
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.

classJWPlayerEmbedWidgetextendsJWPlayerWidget {
@overrideWidgetbuildWithMediaId(BuildContext context, String mediaId) {
returnContainer(
padding:EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 20.0),
child:AspectRatio(
aspectRatio:16/9,
child:Container(
child:Text(mediaId),
),
),
);
}
}