Build Android & IOS App For WordPress Blog with Flutter

Build Android & IOS App For WordPress Blog with Flutter

So i wanted to make a app for our website flutternerd.com well turns out it was easy than i thought

So let’s get started

Step 1: Download & Activate Plugin For wordpress blog

Link: https://wordpress.org/plugins/easily-generate-rest-api-url/

Step 2: In the wordpress dashboard

go to settings (hover over it) > (Click on) Generate Rest API Url, scroll to the bottom you will have a api url you can modify it if you want.

Step 3: Create a Flutter Project

If not already install and setup flutter from https://flutter.dev/docs/get-started/install

i used vs code but you can use android studio as well will work just the same

Step 4: Create functions to fetch posts and post image url

Create a file i named it wp-api.dart then add http package add this function

Future<List> fetchWpPosts() async {
  final response = await http.get(
      "https://flutternerd.com/index.php/wp-json/wp/v2/posts",
      headers: {"Accept": "application/json"});
  var convertDatatoJson = jsonDecode(response.body);
  return convertDatatoJson;
}

Step 5: Create frontend and use this function by importing the file

import 'package:flutter/material.dart';
import 'package:nativewordpress/views/PostPage.dart';
import 'package:nativewordpress/wp-api.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  String removeAllHtmlTags(String htmlText) {
    RegExp exp = RegExp(r"<[^>]*>", multiLine: true, caseSensitive: true);

    return htmlText.replaceAll(exp, '');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("FlutterNerd"),
      ),
      body: Container(
        padding: EdgeInsets.only(top: 24),
        child: FutureBuilder(
          future: fetchWpPosts(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return ListView.builder(
                  itemCount: snapshot.data.length,
                  itemBuilder: (BuildContext context, int index) {
                    Map wppost = snapshot.data[index];
                    return PostTile(
                        imageApiUrl: wppost['_links']["wp:featuredmedia"][0]
                            ["href"],
                        excerpt: removeAllHtmlTags(wppost['excerpt']['rendered']
                            .replaceAll("&#8217;", "")),
                        desc: wppost['content']['rendered'],
                        title: wppost['title']['rendered']
                            .replaceAll("#038;", ""));
                  });
            }

            return Center(child: CircularProgressIndicator());
          },
        ),
      ),
    );
  }
}

class PostTile extends StatefulWidget {
  final String imageApiUrl, title, desc, excerpt;
  PostTile({this.imageApiUrl, this.title, this.desc, this.excerpt});

  @override
  _PostTileState createState() => _PostTileState();
}

class _PostTileState extends State<PostTile> {
  String imageUrl = "";

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        if (imageUrl != "") {
          Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (context) => PostPage(
                        title: widget.title,
                        imageUrl: imageUrl,
                        desc: widget.desc,
                      )));
        }
      },
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 4),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            FutureBuilder(
                future: fetchWpPostImageUrl(widget.imageApiUrl),
                builder: (context, snapshot) {
                  if (snapshot.hasData) {
                    imageUrl = snapshot.data["guid"]["rendered"];
                    return Image.network(imageUrl);
                  }
                  return Center(child: CircularProgressIndicator());
                }),
            SizedBox(height: 8),
            Text(
              widget.title,
              style: TextStyle(fontSize: 16),
            ),
            SizedBox(height: 5),
            Text(widget.excerpt)
          ],
        ),
      ),
    );
  }
}

Step 6: We will need to create a separate function to get image url of each post

fetchWpPostImageUrl(url) async {
  final response = await http.get(url, headers: {"Accept": "application/json"});
  var convertDatatoJson = jsonDecode(response.body);
  return convertDatatoJson;
}

Step 7: Now let’s create post page

We need to add flutter_html_view package then

import 'package:flutter/material.dart';
import 'package:flutter_html_view/flutter_html_view.dart';

class PostPage extends StatefulWidget {
  final String imageUrl, title, desc;
  PostPage({this.title, this.desc, this.imageUrl});

  @override
  _PostPageState createState() => _PostPageState();
}

class _PostPageState extends State<PostPage> {
  Widget postContent(htmlContent) {
    return HtmlView(
      data: htmlContent, // optional, type String
      onLaunchFail: (url) {
        // optional, type Function
        print("launch $url failed");
      },
      scrollable: false,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              widget.imageUrl != null
                  ? Image.network(widget.imageUrl)
                  : Container(),
              SizedBox(height: 8),
              Text(
                widget.title,
                style: TextStyle(fontSize: 18),
              ),
              SizedBox(height: 6),
              postContent(
                widget.desc,
              )
            ],
          ),
        ),
      ),
    );
  }
}

And that is how we can build android and ios app for your wordpress blog if face any problem feel free to comment it down below

Written by
Sanskar Tiwari
Join the discussion

Instagram

Connection error. Connection fail between instagram and your server. Please try again