So I wanted to make an app for our website and well, it turns out it was easier than I thought. So let’s get started : Download & Activate Plugin For Wordpress Blog Step 1 Link: https://wordpress.org/plugins/easily-generate-rest-api-url/ : In the Wordpress dashboard Step 2 Go to settings (hover over it) > (Click on) Generate Rest API Url, scroll to the bottom you will have an api url. You can modify it if you want. : Create a Flutter Project Step 3 If you didn't already, install and setup Flutter from flutter.dev I used vs code but you can use Android studio as well. It will work just the same. : Create functions to fetch posts and post image url Step 4 Create a file named wp-api.dart and then add , and add this function: http package Future< > fetchWpPosts() { response = http. ( ,
      headers: { : }); convertDatatoJson = jsonDecode(response.body); convertDatatoJson;
} List async final await get "https://flutternerd.com/index.php/wp-json/wp/v2/posts" "Accept" "application/json" var return : Create frontend and use this function by importing the file Step 5 ; ; ; { _HomeState createState() => _HomeState();
} { removeAllHtmlTags( htmlText) { exp = ( , multiLine: , caseSensitive: ); htmlText.replaceAll(exp, );
  } Widget build(BuildContext context) { Scaffold(
      appBar: AppBar(
        title: Text( ),
      ),
      body: Container(
        padding: EdgeInsets.only(top: ),
        child: FutureBuilder(
          future: fetchWpPosts(),
          builder: (context, snapshot) { (snapshot.hasData) { ListView.builder(
                  itemCount: snapshot.data.length,
                  itemBuilder: (BuildContext context, index) { wppost = snapshot.data[index]; PostTile(
                        imageApiUrl: wppost[ ][ ][ ]
                            [ ],
                        excerpt: removeAllHtmlTags(wppost[ ][ ]
                            .replaceAll( , )),
                        desc: wppost[ ][ ],
                        title: wppost[ ][ ]
                            .replaceAll( , ));
                  });
            } Center(child: CircularProgressIndicator());
          },
        ),
      ),
    );
  }
} { imageApiUrl, title, desc, excerpt;
  PostTile({ .imageApiUrl, .title, .desc, .excerpt}); _PostTileState createState() => _PostTileState();
} { imageUrl = ; Widget build(BuildContext context) { GestureDetector(
      onTap: () { (imageUrl != ) {
          Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (context) => PostPage(
                        title: widget.title,
                        imageUrl: imageUrl,
                        desc: widget.desc,
                      )));
        }
      },
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: , vertical: ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            FutureBuilder(
                future: fetchWpPostImageUrl(widget.imageApiUrl),
                builder: (context, snapshot) { (snapshot.hasData) {
                    imageUrl = snapshot.data[ ][ ]; Image.network(imageUrl);
                  } Center(child: CircularProgressIndicator());
                }),
            SizedBox(height: ),
            Text(
              widget.title,
              style: TextStyle(fontSize: ),
            ),
            SizedBox(height: ),
            Text(widget.excerpt)
          ],
        ),
      ),
    );
  }
} import 'package:flutter/material.dart' import 'package:nativewordpress/views/PostPage.dart' import 'package:nativewordpress/wp-api.dart' class Home extends StatefulWidget @override < > class _HomeState extends State Home String String RegExp RegExp r"<[^>]*>" true true return '' @override return "FlutterNerd" 24 if return int Map return '_links' "wp:featuredmedia" 0 "href" 'excerpt' 'rendered' "&#8217;" "" 'content' 'rendered' 'title' 'rendered' "#038;" "" return class PostTile extends StatefulWidget final String this this this this @override < > class _PostTileState extends State PostTile String "" @override return if "" 16 4 if "guid" "rendered" return return 8 16 5 : We will need to create a separate function to get the image url of each post Step 6 fetchWpPostImageUrl(url) { response = http. (url, headers: { : }); convertDatatoJson = jsonDecode(response.body); convertDatatoJson;
} async final await get "Accept" "application/json" var return : Now let’s create a post page Step 7 We need to add package then flutter_html_view ; ; { imageUrl, title, desc;
  PostPage({ .title, .desc, .imageUrl}); _PostPageState createState() => _PostPageState();
} {
  Widget postContent(htmlContent) { HtmlView(
      data: htmlContent, onLaunchFail: (url) { ( );
      },
      scrollable: ,
    );
  } Widget build(BuildContext context) { Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: , vertical: ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              widget.imageUrl != ? Image.network(widget.imageUrl)
                  : Container(),
              SizedBox(height: ),
              Text(
                widget.title,
                style: TextStyle(fontSize: ),
              ),
              SizedBox(height: ),
              postContent(
                widget.desc,
              )
            ],
          ),
        ),
      ),
    );
  }
} import 'package:flutter/material.dart' import 'package:flutter_html_view/flutter_html_view.dart' class PostPage extends StatefulWidget final String this this this @override < > class _PostPageState extends State PostPage return // optional, type String // optional, type Function print "launch failed" $url false @override return const 16 16 null 8 18 6 That's it! And that is how we can build an android and ios app for your WordPress blog. If you face any problems feel free to comment down below. Originally published at FlutterNerd.com

7 Steps to Build an Android & IOS App For Your WordPress Blog via Flutter

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

105 Stories To Learn About Ios App Development

10 Things to check on Android code reviews

10 good rules for bad App

The Noonification: Accelerating Android Application Development With the ADB Idea Plugin (10/12/2022)

11 Tips to Save Time on App Development & Launch Processes

13 Promising Mobile App Ideas For 2021

105 Stories To Learn About Ios App Development

10 Things to check on Android code reviews

10 good rules for bad App

The Noonification: Accelerating Android Application Development With the ADB Idea Plugin (10/12/2022)

11 Tips to Save Time on App Development & Launch Processes

13 Promising Mobile App Ideas For 2021

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps