Learn More

Try out the world’s first micro-repo!

Learn More

Create a Crypto Integration in Your Flutter Apps

Create a Crypto Integration in Your Flutter Apps

Have you ever wondered how to accept crypto payments in your web app? Fear not! I’m going to show you how to integrate Metamask with Flutter web to accept Ethereum payments.

Metamask

Metamask is a cryptocurrency wallet that allows you to transact with the Ethereum blockchain. It’s simply your wallet available through their browser extensions and applications, which you can connect to sites that support payment via Metmask. It really is that simple, and that’s all you need to know for this article, but if you’re interested in learning more, check out their official site.

https://miro.medium.com/max/698/1*O-u58Uwm7dKHjIyt4jW6IQ.png
Metamask extension

Flutter Setup

The Flutter web setup should be quite easy. Just make sure that Flutter Web is enabled for the project; this shouldn’t be an issue if you’re already using Flutter 3.0. Simply create a new project:

Save to Pieces

Done! Well, not really. You have your Flutter project setup though.

Required packages

Of course, hats off to the Flutter community for making our tasks easy! We will be using the following package to implement our Metamask integration:

And that’s it! That’s pretty much all you need to get into the world of Web3 via Flutter3.

‍Coding

Ready? Here we go!

First, we will be setting up our provider for Metamask. Start here:

Creating the Provider Class
Save to Pieces

We’ll be needing the following variables to manage various scenarios:

Save to Pieces

Don’t worry! I’ll explain all of this!

  1. currentChain → We set this variable to -1 so that we do not immediately connect to a chain when the wallet connects.
  2. currentAddress → The present address of our Metamask.
  3. operatingChain → The Ethereum chain we’ll be operating on. For now, it will be test networks, so we set it to 4 (Rinkeby Test Network).
  4. isEnabled → Checks whether the browser supports Metamask.
  5. isInOperatingChain → A bool variable that tells, whether we are connected to the correct chain or not.
  6. isConnected → A state that shows whether Metamask has been connected or not.

The code will be now like this:

Save to Pieces
Connecting Metamask

We will be making a function that connects to Metamask if the following requirements are achieved:

Save to Pieces

Let me break it down for you:

  1. Check if Web3 is enabled on the browser
  2. Get the accounts on Ethereum
  3. If the accounts are not empty, get the first address
  4. Get the ID of the current chain.
Initializing Metamask

To initialize, we need to clear the currentAddress and reset the currentChain for two conditions every time:

  1. If the account changed
  2. If the chain itself changed
Save to Pieces

We’re done with one “3”— the Web3 part. Now it’s time for Flutter3.

Connecting Everything

Put the providers in the MultiProvider as we always do, but this time simply call the init() method that we wrote above.

Save to Pieces

Now, we’ll make a button to start connecting to Metamask with conditions.

Save to Pieces

Sadly, Metamask doesn’t work in debug mode, so you have to run the web server for Flutter web and visit the URL.

In case you want to hot reload/restart, after pressing “r” in the terminal, make sure to reload the web browser yourself.

Save to Pieces
https://miro.medium.com/max/1180/1*lE6GKmaFtYEZO-ZdoJaV_w.png

And that’s all! 😀 Both of our “3s” are together and the combined effect will look something like this!

https://miro.medium.com/max/1400/1*gPnJr8WDM22pk4PQhkwGVQ.gif

Metamask in Flutter web 🔥

Yay!! You did it. I hope you’ve learned something. Make sure to check out other articles on Flutter by exploring the blog.

💻 GitHub Repohttps://github.com/mhmzdev/flutter-metamask

An Easier Way to Save Your Flutter Snippets

When developing Flutter applications, you may have tons of widgets you save that you want to reuse later, but you just do not have them in a safe place where you can access them. There also may be the scenario where you are combing through Flutter and Dart documentation, and you want to save examples that come in handy when implementing a new feature or figuring out which widget to use for different circumstances.

Pieces helps you save all your useful code snippets efficiently through a desktop application and integrations. Using Pieces, you can save any code snippets from StackOverflow with the click of a button using the chrome extension, have your code autosaved from locally-hosted ML algorithms that recognize your code patterns, auto-classify snippets by language, share code with others using generated links, and more! The Pieces’ suite is continuously being developed, and there’s some groundbreaking stuff that is being put together to share, reuse, and save code snippets.

Try Pieces now using the personal plan for free!

Interested in becoming a Pieces Content Partner?

Learn More

Get our latest blog posts and product updates by signing up for our monthly newsletter! 

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Table of Contents

Flutter

Dart

Crypto

More from Pieces