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 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.
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:
Done! Well, not really. You have your Flutter project setup though.
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.
Ready? Here we go!
First, we will be setting up our provider for Metamask. Start here:
Creating the Provider Class
We’ll be needing the following variables to manage various scenarios:
Don’t worry! I’ll explain all of this!
- currentChain → We set this variable to -1 so that we do not immediately connect to a chain when the wallet connects.
- currentAddress → The present address of our Metamask.
- 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).
- isEnabled → Checks whether the browser supports Metamask.
- isInOperatingChain → A bool variable that tells, whether we are connected to the correct chain or not.
- isConnected → A state that shows whether Metamask has been connected or not.
The code will be now like this:
We will be making a function that connects to Metamask if the following requirements are achieved:
Let me break it down for you:
- Check if Web3 is enabled on the browser
- Get the accounts on Ethereum
- If the accounts are not empty, get the first address
- Get the ID of the current chain.
To initialize, we need to clear the currentAddress and reset the currentChain for two conditions every time:
- If the account changed
- If the chain itself changed
We’re done with one “3”— the Web3 part. Now it’s time for Flutter3.
Put the providers in the MultiProvider as we always do, but this time simply call the init() method that we wrote above.
Now, we’ll make a button to start connecting to Metamask with conditions.
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.
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
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.