Create a wordpress App using Flutter part-2

By Robby 0 Comment July 4, 2020

Before Reading these complete the part-1.

In this we show the post details in individual screen

Create a new file as post.dart

Navigate to post screen using Material Navigation and also pass the post parameter to the screen

 Navigator.push(
        context,
        new MaterialPageRoute(
        builder: (context) => new PostScreen(
                                            post: posts[index],
                                            pimg: assetsImage),
                             ),
               );

For view HTML post in Flutter we need a plugin

  flutter_widget_from_html: ^0.4.1

we design the post using Columns, Cards, etc with your design

The post.dart file contains

import 'package:flutter/material.dart';
import 'package:transparent_image/transparent_image.dart';
import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';

class PostScreen extends StatefulWidget {
  final post;
  final pimg;

  PostScreen({Key key, @required this.post, this.pimg}) : super(key: key);
  @override
  _PostScreenState createState() => _PostScreenState();
}

class _PostScreenState extends State<PostScreen> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text(widget.post['title']['rendered']),
        ),
        body: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              children: [
                Center(
                  child: widget.post["featured_media"] == 0
                      ? new Image(image: widget.pimg)
                      : new FadeInImage.memoryNetwork(
                          placeholder: kTransparentImage,
                          image: widget.post["_embedded"]["wp:featuredmedia"][0]
                              ["source_url"],
                        ),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: HtmlWidget(
                    widget.post['content']['rendered'],
                    webView: true,
                  ),
                ),
              ],
            ),
          ),
        ));
  }
}

In next part How to show wordpress Pages in Flutter with Navigation

The full Source Code is in Github https://github.com/Robertrobinson777/flutterblog