Flutter Calculator Chrome Extension

Intro

In this post, I will show you how to create a calculator chrome extension coded in flutter. Before you start make sure you have chrome installed (duh) and flutter web-enabled. If you do not know how to do this look at this (link). If all that is ready then we can start.

Tutorial Portion

Packages

We will need two packages for this project: (flutter_simple_calculator)[https://pub.dev/packages/flutter_simple_calculator] and (clipboard)[https://pub.dev/packages/clipboard]. The first one is not necessary if you want to code your own calculator, however, it is a nice option if you want to do this quickly. The second will control the clipboard controls.

Setting up manifest.json

The next thing that needs to be done is to set up the manifest file so that the app can be recognized as a chrome extension

Setting up index.html

For index.html we need to remove the scripts that build the flutter app and put them in a separate file named flutter-app.html.

Once that is done you add an iframe that has src=flutter-app.html

Coding the Flutter Calculator

First, clear the main file and just leave a MaterailApp that has a home of HomeScreen, this is a file we will create now.

Create a file called home_screen.dart. This is where the calculator is coded, as you can see after a function value is calculated we copy the result to the clipboard. This code is super simple so feel free to make it more complex

Adding the app as a chrome extension

First, enter the command ‘flutter build web’ in your project folder. This builds the web version of our app.

In your chrome browser, you must navigate to the chrome extension manager. On the top right of the screen, you should see a button that says ‘Load Unpacked’, the in the file explorer popup navigate to your app’s directory and go to folder build/web.

If everything was done correctly the chrome extension should be added with the rest of the chrome extension and you can access it by clicking the puzzle piece icon on the top right of the browser.

Here is what it should look like:

Conclusion

I hope you enjoyed following this tutorial and found it helpful in some way or another :)

Originally published at https://www.dailyflutter.monster on August 3, 2020.