Integrate Medium Blog Feed in Flutter App — MVC Architecture

I have been searching for resources to integrate my medium blogs into my portfolio. But unfortunately, Medium Official APIs Doc has no GET article or blog method (if someone finds it please let me know).

Anyways, I found this new way of using RSS2Json and generate the endpoint of getting your medium blog feed.

Note: Its medium blog feed, means all those blogs which shows up when you click on your profile can be fetched.

MVC Structure

Let me summarize what we are going to do as we are also using MVC architecture.

1. Create Model class of Blog
2. Create a Controller class of Blog
3. Create a View class for showing up the medium feed blog

Hence, the project structure would be something like:

Project Structure

Plugins Required

We will be needing following plugins:

1. https: For making use of API/endpoint
2. flutter_html: For rendering the html that we will get from the API response.
3. url_launcher: It is NOT COMPULSORY but since only blogs on the feed will be fetched so in case you want the user to redirect to your medium profile by having some button says “Read more”.

Lets get started….!

RSS2Json Endpoint: https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@username

Replace “username” with your medium username for instance in my case its @mhamzadev

And the response would be something like 😃

{
 "status": "ok",
 "feed": {
          "url": "https://medium.com/@username",
          "title": "Stories by <Your Name> on Medium",
          "link": "https://medium.com/@username?source=rss-198a--2",
          "author": ""
          "description": "Stories by <Your Name> on Medium",
          "image": "<profile URL to medium profile>"
  },
These are your Blogs on the Medium Feed
 "items": [
        {
            "title": DevFolio-Portfolio using Flutter 2.0",
            "pubDate": "2021-03-23 15:38:24",
            "link": "<URL link to blog on MEDIUM>",
            "guid": "https://medium.com/p/86ae3e6cce4f",
            "author": "Muhammad Hamza",
            "thumbnail": "<URL for your Blog Header Image>",
            "description": "Actual Description of Blog on Medium",
            "content": "Full Blog Content (HTML)",
            "enclosure": {},
            "categories": [
                 "web-development",
                 "flutter",
                 "portfolio",
                 "dart",
                 "flutter-app-development"
             ]
         },
         {
             Next Blog Object....
         }.....
    ]
}

Model Class

We here, we need “items ”actually which is basically list of Map<String, dynamic> Got it??!!

So, we are going to have basically 2 Model Classes.

1. Blog List: Which will get all the blogs from “items”

2. Blog: Model class for Single Blog

Controller Class

It will simply a class where we will call the end point and that’s it 🙂

View Class

Here we will user FutureBuilder() pass our getAllBlogs() method as Future and return our BlogCard() which is basically a custom widget.

After this our output will be something like this 🙂

Blog Details

Now is the time to show our blog content in our app. But wait..!! 😟 The content in API response is an HTML which we need to render otherwise there will be <p> and <img> and other elements in our screen.

And you guessed it right! We are going to use our package flutter_html

So now….?? Magic!!

Wuhuu! 🥳 We have integrated our Medium Blog Feed completely in our app. But what if our user wants to view more blogs? Well for now we can have a button which simply directs the user to our medium profile. And for that my friend we are going to user url_launcher package.

So, what I’m going to do is I will be adding a button in the bottom of our blog feed with “Read More” and pass my medium user profile URL as parameter i.e. https://mhamzadev/medium.com

Finally, with little changes to UI our FINAL PRODUCT!!! 🌟

Final App

Make sure to add INTERNET Permission in your androidmenifest.xml file otherwise it won’t work in release mode

Now, go on and embed your Medium Blog Feed into your Flutter apps and since now with Flutter 2.0 you can have Web app too. Here’s an example 🙂 And the code for this app is also available at GitHub feel free to use it!

Lastly!!! 😄

bool helped = true;
if (helped){ 
    claps(50)👏
  } else {
    let me know how to improve :)
}

Thanks y’all and #happyFluttering 💙