Super boost your flutter web project with embedded iframes
Tags: flutter, html, webdev
Published: 2020-06-25 13:49:45

## 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).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5rgcscq1g5c332xs4ltr.png)

## 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 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h4c4hlzy6vanki82ztan.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/emx2rz2w9qbn0kvsg28l.png)

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:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/iwwjdo9rrk11840djrad.png)

Now we have to go back to index.html and add an iframe that has html element we just created

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uhpihgb7i705liq2c7hs.png)

If we run this now and had a look at it this is what we would see:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2283ggy2asywkpm9yaga.png)

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 <head> tag, we have to add:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gkuvbxwhnl4w7jku5zg4.png)

then add the style to as a class to the div conaining the iframe

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7261yt1lmuuhcav578kf.png)

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) 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0m2hoay5lyu5vt6yw7eq.png)

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:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/y9eb1wz9m85uqsdffxjk.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f07cvt6j2rbh0sw2l3j4.png)

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%.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bim3vc1nl912d2g73h50.png)

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:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f5885o59fbe2omr7ll3e.png)

If we run our program, it will look like this:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0d0q7tjjypl2l26c48jv.png)
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](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:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0gtnd61aj7yhsvcv4fee.png)

all we have to do is paste it in the side panel htm classes:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wsbp2k11wb585olrgb0o.png)

We again quit our program and rerun it. The final result should look something like:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sm4yh80pb6babxvgebtz.png)

### 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](https://github.com/Mattds825/iframe_side_ads)