Back

Jul 8, 2022

Jul 8, 2022

Create a Crypto Integration in Your Flutter Apps

Have you ever wondered how to accept crypto payments in your web app? Learn how to integrate Metamask with Flutter web to accept Ethereum payments and create a crypto wallet.

Flutter3 and Web3 Metamask Integration: Combining the ultimate 3.
Flutter3 and Web3 Metamask Integration: Combining the ultimate 3.
Flutter3 and Web3 Metamask Integration: Combining the ultimate 3.

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

The 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 You can title it Flutter Crypto App or Crypto Wallet Flutter:‍

The command to initialize Flutter and Metamask.

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 flutter 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 | Create Crypto Wallet

The code to create a provider class.

Save to Pieces

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

The variables for the project.

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:

A screenshot of code.

Save to Pieces

Connecting Metamask

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

Connecting Metamask to the project.

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

The code to initialize Metamask.

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.

Calling an init method.

Save to Pieces

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

The code to create a button.

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.

The command to run a Flutter web server.

Save to Pieces

Restarting from the terminal.

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

Connecting Metamask and Flutter on the web.

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 | Pieces for Developers

Developing Flutter applications can be difficult when you have a lot of widgets to save and reuse later, but don't have them in an accessible place. Additionally, when you are searching through Flutter and Dart documentation, it can be helpful to save examples that can be used later. This is where Pieces comes in. It is a desktop application that allows you to save your code snippets efficiently and integrates with other programs. With Pieces, you can easily save any code snippets from StackOverflow using the chrome extension, automatically save code from locally-hosted ML algorithms that recognize your code patterns, and classify snippets by language. You can even share code with others using generated links. The Pieces suite is continually being developed and there are exciting new features on the horizon for sharing, reusing, and saving code snippets.

Muhammad Hamza.
Muhammad Hamza.

Written by

Written by

Muhammad Hamza

Muhammad Hamza

SHARE

SHARE

Create a Crypto Integration in Your Flutter Apps

Title

Title

our newsletter

Sign up for The Pieces Post

Check out our monthly newsletter for curated tips & tricks, product updates, industry insights and more.

our newsletter

Sign up for The Pieces Post

Check out our monthly newsletter for curated tips & tricks, product updates, industry insights and more.

our newsletter

Sign up for The Pieces Post

Check out our monthly newsletter for curated tips & tricks, product updates, industry insights and more.