Building Modern Web Dapp with Flutter

No more React! No more JS!(jk) We are now in the Flutter era!

Introduction

Today I will show you how to build a modern web Dapp with Flutter!

We will use the flutter_web3 package for interacting with the Ethereum object, connecting with Metamask, Wallet Connect, and other providers.

This package also includes other nice utilities to connect to providers like Ethers Js and Wallet Connect.

Talk no more, let's get started!

Setting Up

First, create a Flutter project.

flutter create coolassname

And add some package into pubspec.yaml. This time I’ll be using Getx for simple state management, Niku for cool property builder, and our package flutter_web3.

dependencies:
  flutter:
    sdk: flutter

  flutter_web3:
  niku:
  get:

And start Flutter with

flutter run -d web-server

Because extensions like Metamask can’t be used in Chrome debug browser (sad).

Keep in mind that the Flutter web server doesn’t have the hot restart feature that automatically refreshes your page, after refreshing in CLI you need to manually refresh your browser again.

Building The Website

Planning The Features

The topic we will cover today is

Using the Ethereum object and its method like requestAccount.
Using Ethers js to interact with smart contracts.
Using default ContractERC20 to construct the contract that has ERC20 standard.

Note that these are not all the package features; make sure to check the documentation out for all APIs and features.

So we’ll try to make Pancake Swap Interactor then, for the sake of simplicity.

Connect To Account

We first define the basic structure of the website. Then we’ll work on the web3 part after that.

Define some extensions to make life easier.

For the Web3 part, We’ll put it in HomeController .

For explanation, let’s go line by line.

Line 2, Check if we can access the Ethereum object getter. From the implementation below, the Etherum object can be null if the browser doesn’t have any provider available. i.e. Metamask, Wallet Connect, Binance Chain Wallet, etc.

Line 4, Check for the chain that is currently connected to is Binance Smart Chain or not (chain id 56).
Line 6, Overall check for connection to the website. ethereum.isConnected() is only used for provider availability, so we have to check from the address that is exposed from the node.
Line 9 and 11 is to store the state variable.
Line 15, Connect to provider and update currentAddress and currentChain . By using ethereum.requestAccount we can prompt the provider to make the connection with the website. (i.e. Metamask modal) that returns the list of addresses, the first address in that list is the current address that will be used. Be sure to handle errors if the user rejects the modal (In this case I don’t, which I shouldn’t do.) And using ethereum.getChainId to update currentChain
Line 26, Handle accountChanged and chainChanged events. This will call clear every time the user changed his account or chain and update the variable above.

Then we can build a super simple UI to show that we’re connected or not. If not, click a connect button to prompt the provider to connect.

So we got the account connection part completed. I will only show crude UI implementation here, you guys can make it your own as good as you want.

Connect To Ethers js Provider

There are many providers in Ethers js, two of them are Web3Provider and JsonRPCProvider.

Both can be used to read data from the Blockchain, Web3Provider instantiates by putting Ethereum provider into the constructor. JsonRPCProvider instantiates by putting RPC Url into the constructor.

For simplicity, We can connect and get Web3 by using the default provider getter. The implementation is below.

Interacting With Contract

We’ll divide this into two sections, interacting with Cake token contract and interacting with the Masterchef contract.

For the Cake token contract, we’ll use ContractERC20 .

For the Masterchef contract, we’ll use normal Ethers Contract and specify our own ABI.

Cake Token Contract

It’s super simple! Just instantiate ContractERC20 class with the token address.

We’ll also add an end function that burns 1 gwei of your Cake! Spicy!

We’ll go line by line here again.

Line 3, 5 stores our variable about the Cake token and our token balance.
Line 7, Instantiate cakeToken object if null. And get our Cake balance from balanceOf function.
Line 15, Burn 1 gwei of Cake from your pocket. First, check if your balance is more than 1 gwei (So you have enough to burn and have some left, haha!) then transfer your cake into addressZero , or 0x0. Then update your cake balance again.

To build the UI for our contract, we first need to make sure that the Ethereum object is not null and then build it normally.

Masterchef Contract

Since we need to create our own Contract instance, we’ll also need the contract’s abi. We can look this up at block explorer of your choice.

We can look into the code of the contract using BscScan.

We will select some property, constant function and write function to be our example.

First, we need to obtain the abi. For abi specification and type, please refer at Ethers js documentation.

We’ll use minimal human-readable abi here for simplicity, You can also use JSON abi that generated from solidity and paste it here.

So referring to the docs, our abi is.

Then we can create our Contract and call that function. Note that all function that have uint return type is actually BigNumber in Dart.

For explanation,

Line 16, Create Masterchef contract if null, and get cakePerBlock and poolLength with annotated type BigNumber and converted that to int .
Line 24, Call emergencyWithdraw with 0 indicating pool number as argument.

After that, we proceed to build our UI.

Conclusion

Although Flutter ecosystem for developing Dapp is nowhere to be seen before. But through Dart2js and many Flutter packages that is popping up to strengthen cryptography and web3 utility, this make Flutter a Strong contender for Dapp development in the Future.

Crude example that I’ve shown already prove that Flutter really has the potential to develop complex Dapp using Dart’s extensive capability.

You can find source code for this example here.