DEV Community: DailyFlutter.Monster

How To Create A Flutter Chrome Extension

DailyFlutter.Monster — Wed, 15 Jul 2020 08:43:31 +0000

Intro

Chrome extension are used in chrome (obviously), and they allow the user to have an app in a small overlay on the top right of their chrome window. Some popular chrome extension include the likes of: grammerly, honey, JSON Viewer etc.

Today I will be showing how to create a simple chrome extension that runs a flutter app. The end result of what we are looking at looks like this:

Without any more hesitation let's get to it.

Tutorial Portion

The first thing that needs to be done after you create the project is restructuring the manifest file located in the web folder. We need to format our app to be a chrome extension, so the manifest will be:

The next step is to remove the script that calls creates the flutter app from index.html, and but it in another file I will name flutter_app.htm

This is because chrome extensions don't like it when you run scripts in index.html. We will call the created flutter_app.htm file as an iframe in index.htm:

We are done now for coding, let's see how we can add this as a chrome extension.

Adding a Chrome Extension

First run flutter build web inside your flutter project.

In your browser navigate to chrome://extensions/. Once there click on load unpacked in the top left corner

Open the build/web folder, then the flutter extension shoula appear on dashboard.

You can now open the flutter extension from the extensions menu in the top right of your chrome browser.

If you want to pin it, just click the pin button and it will be added to your list of pinned extensions

Conclusion

I hope this information was of value to you. This is a good idea if you want to build an app that has a chrome extension companion, like forest for example.

Source code: https://github.com/Mattds825/chrome_ext

If you want to run the source code first run 'flutter build web' then add build/web as an extension in chrome

How to host a Flutter web app on Firebase

DailyFlutter.Monster — Mon, 13 Jul 2020 13:09:42 +0000

Firebase is a great tool for whoever wants to host their web app or website for free and easily. In this tutorial, I will be showing how to quickly create a firebase project and host a flutter web app.

The App

For the purpose of keeping things simple, I will just be sticking with the initial counter app that comes with every new flutter project.

So, in the terminal, I run

flutter create 'firebase_hosted_app

This creates the app for me in that directory we will not even have to look at the code in reality and everything that we have to do to get it hosted can be done from the terminal.

Change to the drectory of the app

cd firebase_hosted_app

Next thing is to build for the web.

flutter build web

this wil create the web project that you will be hosting in the directory build/web

Integrating Firebase into the Project

for this, you will first need the Firebase CLI. If you do not have these installed please follow this tutorial of how to do that and then come back to this part:

https://firebase.google.com/docs/cli#install_the_firebase_cli

Now you must login to firebase though the terminal (note you must have a google account to use firebase).

In the terminal enter:

firebase login

You will then be redirected to a link on the browser where you will have to log in to your google account. Once this is done you can close the browser and return to the terminal.

Now run:

firebase init

This will initilize your firebase project and you will be promtedd with 6 options:

Move down to hositng with the arrow keys, hit the spacebar to select it then press enter. The next pormt will look like this:

Choose 'create a new project'

You will then be asked to specify a unique project ID (note: the id cannot include these characters: ' " ! _).

The next prompt is what would you like to call you to project just leave this blank and let it default to the id unless you want to change the name

then firebase will create the project for you:

For the public directory it will be build/web (the one we created in the first section)

It will ask you if you want you configure as a single-page app

Type Y and enter (to say yes)

It will then say that index.html already exists. Overwrite?

Type N and enter (to say no)

This is what the process should look like:

The only thing that is left now is to enter in the terminal:

firebase deploy

Now are done!!

we can follow the host url to the the project online. In my case it is: https://fir-hosted-app825.web.app/#/

and sure enough we get the flutter counter app:

Conclusion

I hope I managed to show you how easy and quick it is to host your flutter project using firebase, this is great if you want to showcase you app without having the user download it from one of the stores, instead since flutter has one codebase, you can host you app online.

Flutter Web Scraper Level 2: Etsy Product Finder Part 2

DailyFlutter.Monster — Thu, 02 Jul 2020 07:22:39 +0000

Intro

I am showing how to build a etsty product searcher utilizing webscraping in flutter. In the previous part (link here) I showed how to set the ui, and we ended with this

Our goal for this part is to add the url build to make an etsy search and the webscraping of the search results. In the end we will have an app that looks like this:

Tutorial Portion

'Please enter search' text

The first thing we will add is a loading indicator for when we are not searching. For this

in home_screen.dart we add:

Webscraping Time

In results_list.dart we are going to add the changes to scrape the products from Esty's page. I will just add the code for the new result_list.dart file and explain some of the most important lines bellow:

First, in lines 11-12, we have a boolean to check if the webscraping has loaded, and a list of result items that we will be adding to the list.

Lines 14 is the the main Estys url and line 15 is the particular page we will be searching.

We have an initState function that calls the async getData() function.

getData() is the function where we will be scraping the page. First we initialize a new WebScraper variable that has the estyUrl. Then in an if statement we check if the webpage we chose gets loaded. For the webpage in line 27, you can see that we have to construct the URL, by adding the search onto our pageExtenstion. The '.trim().replaceAll(' ', '%20')' portion is to make sure that if we have spaces in our search we are trimming them and changing any space between words to '%20' which is the standard that Etsy uses.

Then we create three List> to get the images, descriptions, prices, and URLs. The tags used in the getElement() call were found using the web inspector in chrome on the Etsy page

We the iterate through one of the lists (in this case I chose images) and custruct our ResultItem then add it to the list.

Once all this is done we call setState() and set loaded to true so that the results list will be show.

And that's it!

Now if you run it you should get the end product

Conclusion

I hope this projust tought you how to search and scrape html pages to display them in a list to users. This is a great idea if you want to create a comparison searcher, you could then scrape two websites and display all the result.

In a future post I will also be showing how to scrape Javascript website, something that is a bit more tricky and requires more setting up, so stay tuned to for that one if you are interested.

Flutter Web Scraper Level 2: Etsy Product Finder Part 1

DailyFlutter.Monster — Wed, 01 Jul 2020 11:59:18 +0000

Intro

In my previous post (post) I showed how we can use web scraper to get the current world population number and display, however, this is a pretty simple and useless idea. So no I want to show how to use web scraper to make an app that is more like what you would be used to seeing. The application is called Etsy Product Finder and it will allow users to search for a product and view the top 5 Etsy results with their prices and if the user wants to view the product on the Etsy website, a clickthrough will be implemented. Since this will be a long walk through I will be posting 2 parts, the first one will cover installing all the packages and setting up the ui. The second will focus on how to use the data by web scraping the etsy website.

Tutorial Portion

Installing Packages

The first thing we need to do is add the packages that we need to our pubspec yaml. In this case it will be web_scraper and url_launcher, these packages allow us to do the necessary scraping data and also then allowing the user to clickthrough to open the item's page in the browser

Then in main.dart you do the usual and clear everything out leaving only the main function and a stateless widget that has it's home being you homescreen:

Now I will first breakdown what we are going to build in the first part:

Main Screen with a search bar at the top
List to contain search result
List items for the result list

In this part we will be going through only the UI elements of the app

Creating Homescreen

We need to create a homescreen with a search bar at the top and a list underneath it.

So we are first going to have

This create a homescreen with a scaffold within a safe area (widget that avoid notches and notification bar), and it has a column, whose only child is the appbar currently.

_HomeScreen state contains the variables for if the search was has been made and the string for the search

As you will notice in the Homescreen class we create _HomeScreenState as a variable (state) then pass it on to createState(), this is because we are going to want to be able to change the state from the search bar class. which is what we will be doing next.

Creating the Seachbar

For the search bar, we will use a row that contains a texform field and a material button that will trigger the search.

In the code above you can see that we pass an instance of homescreen to the search bar, in turn when the material button is pressed, we change the homescreen's state so that searched is true and, the search text is the text from the textformfeild.

Next we will design the result item and the result list.

Result Item

The result item has to include variables for:

String for item's image url
String for item's description
String for item's clickthrough url
String for item's prices

For the text we use a null checker to make sure we are not passing null results. The whole thing is wraped in an GestureDetector that calls _lauchUrl(). This in turn ia an async method that calls launch(url) to open the clickthough link.

Now to create a list of these

Result List

For testing puproses we won't webscrape yet, instead for this part we generate 5 test list items just to see what it looks like.

Then in test_screen.dart we can add to the column:

if we run this and click search we will see:

Conclusion

In the next part I will show how we can add the webscraping to scrape search results from etsy

source code

Flutter Audiobook Player in 50 lines of code

DailyFlutter.Monster — Sat, 27 Jun 2020 17:40:51 +0000

Intro

How much can you do with 60 lines of code? Depends how good you are, also more importantly depends how good your language/framework is. While this won't be a tutorial on making super complicated quines of try to code golf until to the limit, I still found it worth sharing how easy and quick you can set up an audiobook player that plays books from librivox that can work on ios, android and web (copy and paste code at the bottom).

Tutorial

Installing Packages

For this tutorial I will be installing the package assets_audio_player for playing the audio. (In my case I will be also creating it as a web app so I will aslo install assets_audio_player_web).

Show me the code

In main.dart delete everything except for the main funtion, then create a statefull widget MyApp.

in MyAppState we add the variables for keeping track of time and if the audio is paused or playing. I also added the url that I will be opening here.

In the build method we want to first make a material app, (I dont like the debug banner so I set debugShowCheckedModeBanner: false)

This MaterialApp's home will be a Scaffold with a Center widget. The center widget will have a Colum so that we can add our video's playback time and the play/pause button. This should be placed in the center of the screen so we set CrossAxisAllignment and MainAxisAllignment to center aswell.

Now to build the audiobook player part. First, onto the simple stuff, we will create a Text widget that displays the time:

Next we add the AudioWidget (you willl need to import assets_audio_player). The paramenters we have to set are:

'audio:' This takes in the audio's input source (can be from network or from asset)
'play:' bool that stores the state
'child': this where you would add your button or more elaboorate widget
'onPositionChanged:' listens for changes in the audio position (c is current time and d is duration)
'onReadyToPlay': listens for when the audio is ready to be played

For this tutorial my setup ended up being:

This came out to 52 lines and if we run it we get:

Conclusion

I hope you have enjoyed reading along and that you can make something much cooler than I did.

As promised here is the copy and paste code:

(source code)

Get Data from the Web with Web Scraper and Flutter

DailyFlutter.Monster — Fri, 26 Jun 2020 10:18:28 +0000

Intro

There is a huge amount of data online that is accessible with just a few clicks. Web scraping is the process of automating the manual search part with the browser and instead just scraping the info you want from each website. In the tutorial, I will be demonstrating how we can achieve this in Flutter to in the end create an app that displays the world's current population.

Tutorial Portion

The first thing is first, huge shoutout to https://github.com/tusharojha for creating the package https://pub.dev/packages/web_scraper that we will be using for the tutorial

setup

The first thing we have to do is add the package to our flutter project in the pubspec.yaml, The link for the dependency can be found here https://pub.dev/packages/web_scraper#-installing-tab-. Our pubscpec.yaml should look like this:

In main.dart we can delete the MyApp class and we will recreate it as a statless widget that returns a MaterialApp, (optionally already set 'debugShowCheckedModeBanner: false' to not the debug banner):

We will then create our Homescreen which will be a stateful widget, that has a scaffold with a center widget, for now, the widget will just be a circular loading indicator:

Dont forget to set the home as HomeScreen() in main.dart

If we run this there is nothing special just the progress indicator:

Lets now add some variables to keep track of the state of the app; inside _HomeScreenState. We will also create and import our WebScraper now

Then for instantiating all the variables we will first override setState and call an async method that we created called _getData(). We will handle all the asynchronous calls in _getData()

We will now build out the _getData() method: we need to create a webscraper with our desired wesite url (in our case 'https://worldpopulationreview.com'). Then we want to check if it can load our desired page (since our website has the data in the main page this will just be '/').

HTML Time !!

Now we can get what we want from the webpage. We need to first open the page in a browser and inpect the elements (in chrome cntl+alt+J)

We can get the element's name from the first options in properties. For the one which we want it is a div of the class center so our name will be div.center. We create a list of maps to get all the elements that match this name:

Once we have that we can call setState and set our popNum that we defined earlier to the first element's title that we get and set the bool loaded to true so the whole method should look now like:

Bringing it all Together

The last thing we need to do now is stop the progress indicator when we get the result and display the popNum in a Text widget instead. We can do this by using the dart ternary operation to check if the loaded bool is true, and show the Text if it is true.

So now our app should open with the loading indicator and then show the text we scraped once it is ready

Conclusion

Now we can easily scrape any static elements from websites with HTML. This is particularly useful if we want to, for example, compare the first price result of each seller's website and show them all, we would have to create a getData method for each site we are scraping then return it in a list.

For the souce code: souce

Super boost your flutter web project with embedded iframes

DailyFlutter.Monster — Thu, 25 Jun 2020 13:49:45 +0000

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