To-Do Dapp: An Intro to building Dapps with Flutter
I know I know (you’re probably freaking out that I’m not a web person, yeah you and me both).
In today’s article, we’re going to look at building a Dapp in flutter and the good news is that we’ll be doing it with the Flutter framework, if you don’t know what Flutter is, you can go ahead and check here.
Early definitions of what Flutter is looked something like this
Flutter is a UI kit developed by the google team to build cross-platform applications.
Well recent definitions are more along the lines of
Flutter is a software development kit developed by the google team that can be used to develop multi-platform apps.
Well, I encourage you to get curious and to give Flutter a try, this article is for those who already understand the flutter framework or for those prior coding experience you could read it too and if you’re a business looking to see if you can have some of your features on mobile, this article is for you too.
Outline
i. In this article, we’ll create an Ethereum wallet that will sign our transactions on the Ethereum blockchain.
ii. We’ll look at ABI (Application Binary Interface)files from our solidity smart contracts and how to add them to our flutter project.
iii. We’ll get an intro to Web3Dart, we’ll also use this to perform transactions on the Ethereum blockchain.
Getting the ABI
So to do this we need to deploy our contract we’ll be using the contract from my previous article which you can find here, instructions on how to setup is also available there.
To deploy your contract we need to do a little bit of setup too, to setup we need:
i. To write a deployment script.
ii. To write a hardhat config for the deployment to the public chain.
iii. A .env file to hide precious info from going to the public internet(it’s really important).
iv. To get 2 additional npm packages to make this all work out.
v. I’ll finally be using alchemy for my deployment, you could use others like infura.
Now let’s go on ahead to do all of this and we’ll start with:
Deployment Script
Config Script
.env
To get your Alchemy API key, you go to the alchemy dashboard here, create an account and you’ll be presented with the proper dashboard the click on the “Create App” button it should be at the top right, when you do, you should get a screen like this
Pass in the name of your project, give a description if you want to, then under network select testnet (we’re not using the Ethereum Mainnet, this is like production), leave the chain as Ethereum.
Now to get our wallet private key, go to your MetaMask
Click on the icon next to where you “Account 3”, (In your case this could be “Account 1”) click on the icon and it should bring another tab like this
Select “Account Details” then after that select “Export Private Key” then you’ll see a prompt to put your password, input your password and your private key will come up.
Note: Metamask uses the same private key for all addresses created on your metamask, so you Mainnet Address, Testnet address and even other chains like BSC and Polygon. So be very careful because if you expose it to the internet your entire data for that wallet will be compromised because anyone can just use your private key to sign transactions on the blockchain.
To get your Etherscan API Key, just create an account on etherscan.io when you do, scroll down and you’ll see the “API Keys” option select it and then click on “Add +” then follow the prompts as they come along.
Deploying Contract
Flutter Project Setup
In your TodoContract project, after you deploy the contract, a new folder artifacts would be created, open the folder and you would see another folder contracts depending on what you have named your contract in solidity, mine is SimpleTodoContract.json , forget about the one with dbg.json the one you need is the one that ends with .json , copy the entire content of it.
In your flutter project create an assets/todo_abi.json file then paste the entire content of it there, then go to your pubspec.yaml file, you want to make this edit in the assets section
Also, copy the contractAddress that was printed in your terminal, then go back to your flutter project and create a .env file then add the contract address like this alongside your Alchemy API
In your pubspec.yaml all you need to do is this
Code Proper
Before we start writing any code we should get some packages that would help us in building so go to your pubspec.yaml and paste
Now that we have these packages, we need to write code that utilizes our ABI file, and this is what it looks like
And just like that, we have linked our Flutter app to our contract, but then again we need to have a wallet (for a wallet address and gas fees) and a vehicle (Alchemy API), to help us send our transactions to the processing nodes on the blockchain.
So for the wallet, this is the code
Before we proceed to other parts of the code, I just want to call your attention to how a Web3.0 app works, in conventional apps you have a password and email/username/phone Number, that would be efficiently stored on the server for when the user would want to login again, we promptly verify them and grant them the needed access, on the Web 3 front, this is completely different.
There are no emails or passwords and basically there is no server for you account information.
We just have a private key and a public key, we generate these keys by providing a sequence of mnemonic keys to the user and the user would have to be responsible for securing these keys. Then we use this mnemonic keys to provision a private key that would be able to provide the public key and subsequently the wallet address.
So when users are being on-boarded it is essential we walk them through a process that ensures that they have their mnemonic keys while creating a wallet.
This is when we advice them to copy the mnemonic key and on the next page we make them do a memory task that would completely require them to have written the mnemonic key down chronologically.
Now the rest of the code can be found here, it’s plenty of code and would extend the length of this article significantly.
You would need to setup a proper .env file in order to be able to run the project, you .env file should look something like this
You put those values in and then you do your flutter pub get and then you’ll be able to run the project without a hit.It should look like this
Well congratulations you’ve successfully created a wallet in flutter and now you can interact with the block chain with it.
I know you are thinking now, “I thought there were no passwords”, you are correct but if you look at the create wallet function, you’ll see that it actually has a “password” parameter and this is primarily used to create more randomness as opposed to actually being a password.
I hope now you’re more curious to try out more daring things as a Web3.0 enthusiast who is also a Flutter developer, or as someone/business looking to explore Web3.0 using flutter.
Contents distributed by Learn.Block6.tech
👉 Discord — Live Talks
👉 Twitter — Latest articles
