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

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:‍

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:

• flutter_web3

• provider

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

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

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

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 Repo → https://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.