Intro
Flutter web is still in its infancy, and flutter developers are flocking to recreate their stunning ideas on web versions and often finding themselves at a loss because a lot of their favorite packages are missing web support and the ever so present community of flutter tutorials haven't caught up with the newer innovations for the web. In the Post, I will be demonstrating how to add ads to the side of your website page by simply pasting the HTML code (generally of an iframe but whatever code would work).
Tutorial Portion
Now onto the meat of how to achieve this.
The main file we will be focusing on is the index.html file located in the web directory, we will first be creating 3 views instead of the on view that we generally see (the two side views that will contain our HTML ads) and the content in the middle which will just be the script that runs main.dart
Creating three views
First go into index.html. It will look somthing like this
The first thing we will do is move the scripts that run our app to a separate folder
→create new file named flutter_app.htm
In this file, we will create an HTML element that has a body and copy the scripts that run main.dart from index.html. It should look like this:
Now we have to go back to index.html and add an iframe that has html element we just created
If we run this now and had a look at it this is what we would see:
Here we can the ever-familiar flutter demo app, however, what we can notice is that the height of it is constrained to the size of the demo home page and in this case only fills up around 10% of the screen height. We can fix this by adding a style to our div that contains the iframe. Still, in the
tag, we have to add:
then add the style to as a class to the div conaining the iframe
Now if we run we will get our full-screen app. (note: since we are editing the HTML, flutter hot restart and hot reload don't check those files so we have to close our app and run again to see the changes)
Our next steps will be to add the side panels
First, we will create two files; side_panel_right.htm and side_panel_left.htm. for now they will look like this:
Then we have to go back to index.html and add them.
First we have to set the styles. For this we change the full-height class's width property to 80% and create a ads-width class width of 10%.
Then we put our original iframe div in a body and add two more divs for the ads panels. We then float the left-side ads panel and the main iframe to the left and float the right-side ads panel to the right. It will look like this:
If we run our program, it will look like this:
We are pretty much done here all we need to do is add any html banner ad code to either of the side panels' htm class.
Adding an ad Banner
For purposes of this tutorial, I will just be using an HTML ad template (https://www.bannersnack.com/templates/display/restaurant/b130gn-strawberry-smoothie-food-banner-template.html) If you want to connect this to AdSense or amazon affiliate ads, for example, you will need to register on their respective websites and follow the steps to get the HTML code that you can paste into the side panels. Anyways, on with the tutorial.
I will take the bannersnack template and just save it as is then copy the html code:
all we have to do is paste it in the side panel htm classes:
We again quit our program and rerun it. The final result should look something like:
Conclusion
You can play around with the sizing, placing, and background colors in the HTML code to make it look better, but that's it! Now you can run native HTML ads on your flutter web project without having to wait for new packages 😎
source code link https://github.com/Mattds825/iframe_side_ads
Top comments (0)