Create a WordPress App using Flutter Part 1

By Robby 1 Comment July 2, 2020  Flutter, wordpress

Creating a WordPress App using Flutter. You can create an own app using flutter with ease

The Below plugins are we used in this project

pubspec.yaml

http: ^0.12.1 transparent_image: ^1.0.0

We are using the above plugins to made our APP works fine

• http – A composable, Future-based library for making HTTP requests.
• transparent_image – A simple transparent image. Represented as a Uint8List, which was originally extracted from the Flutter codebase

The Main.dart files contain

import 'package:blog/home.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

List the Blog posts 

Assign the API url from your wordpress Website. My wordpress website is https://robertrobinson.in/  so the api url must be https://robertrobinson.in/wp-json/wp/v2

  final String apiUrl = “https://robertrobinson.in/wp-json/wp/v2/”;

Declare the List post

  List posts;

Call the List of post API using future function and store it in the List posts

  Future<String> getPosts() async {
    var res = await http.get(Uri.encodeFull(apiUrl + "posts?_embed"),
        headers: {"Accept": "application/json"});

    setState(() {
      var resBody = json.decode(res.body);
      posts = resBody;
    });

    return "Success!";
  }

Init the function on Page init State

  @override
  void initState() {
    super.initState();
    this.getPosts();
  }

List all the post using Listview Builder and designed with Card

posts == null
            ? CircularProgressIndicator()
            : ListView.builder(
                itemCount: posts == null ? 0 : posts.length,
                itemBuilder: (BuildContext context, int index) {
                  return Column(
                    children: <Widget>[
                      Card(
                        child: Column(
                          children: <Widget>[
                            posts[index]["featured_media"] == 0
                                ? new Image(image: assetsImage)
                                : FadeInImage.memoryNetwork(
                                    placeholder: kTransparentImage,
                                    image: posts[index]["_embedded"]
                                        ["wp:featuredmedia"][0]["source_url"],
                                  ),
                            new Padding(
                                padding: EdgeInsets.all(10.0),
                                child: new ListTile(
                                  title: new Padding(
                                      padding:
                                          EdgeInsets.symmetric(vertical: 10.0),
                                      child: new Text(
                                          posts[index]["title"]["rendered"])),
                                  subtitle: new Text(posts[index]["excerpt"]
                                          ["rendered"]
                                      .replaceAll(new RegExp(r'<[^>]*>'), '')),
                                )),
                            new ButtonBar(
                              children: <Widget>[
                                new FlatButton(
                                  child: const Text('READ MORE'),
                                  onPressed: () {},
                                ),
                              ],
                            ),
                          ],
                        ),
                      )
                    ],
                  );
                },
              ));

The full code home.dart file

import 'dart:convert';

import 'package:blog/post.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:transparent_image/transparent_image.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final String apiUrl = "https://robertrobinson.in/wp-json/wp/v2/";
  var assetsImage = new AssetImage('assets/640x360.png');

  List posts;
  List pages;

  @override
  void initState() {
    super.initState();
    this.getPosts();
    this.getPage();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Blog'),
        ),
        body: posts == null
            ? CircularProgressIndicator()
            : ListView.builder(
                itemCount: posts == null ? 0 : posts.length,
                itemBuilder: (BuildContext context, int index) {
                  return Column(
                    children: <Widget>[
                      Card(
                        child: Column(
                          children: <Widget>[
                            posts[index]["featured_media"] == 0
                                ? new Image(image: assetsImage)
                                : FadeInImage.memoryNetwork(
                                    placeholder: kTransparentImage,
                                    image: posts[index]["_embedded"]
                                        ["wp:featuredmedia"][0]["source_url"],
                                  ),
                            new Padding(
                                padding: EdgeInsets.all(10.0),
                                child: new ListTile(
                                  title: new Padding(
                                      padding:
                                          EdgeInsets.symmetric(vertical: 10.0),
                                      child: new Text(
                                          posts[index]["title"]["rendered"])),
                                  subtitle: new Text(posts[index]["excerpt"]
                                          ["rendered"]
                                      .replaceAll(new RegExp(r'<[^>]*>'), '')),
                                )),
                            new ButtonBar(
                              children: <Widget>[
                                new FlatButton(
                                  child: const Text('READ MORE'),
                                  onPressed: () {},
                                ),
                              ],
                            ),
                          ],
                        ),
                      )
                    ],
                  );
                },
              ));
  }

  Future<String> getPosts() async {
    var res = await http.get(Uri.encodeFull(apiUrl + "posts?_embed"),
        headers: {"Accept": "application/json"});

    setState(() {
      var resBody = json.decode(res.body);
      posts = resBody;
    });

    return "Success!";
  }
}

In next part click on the post to full view.

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