Interacting with the complete Dapp

• Now we’re ready to use our dapp!
• Just RUN the Flutter Project.

As you can see the Hello Unknown, in the UI is actually coming from the smart contract, variable yourName .

When you type your name into the TextFormField and Press `Set Name` ElevatedButton, it will invoke the setName function from contract_linking.dart which will directly invoke the setName function of our smart contract (HelloWorld.sol).

Congratulations! You have taken a huge step to become a full-fledged mobile dapp developer. For developing locally, you have all the tools you need to start making more advanced dapps.

If you stuck somewhere, do check out the GitHub repository for complete code.

This tutorial will take you through the process of building your first mobile dapp – Hello World Dapp!

This tutorial is meant for those with a basic knowledge of Ethereum and smart contracts, who have some knowledge of the Flutter framework but are new to mobile dapps.

In this tutorial we will be covering:

1. Setting up the development environment
2. Creating a Truffle Project
3. Writing your first Smart Contract
4. Compiling and Migrating the Smart Contract
5. Testing the Smart Contract
6. Contract linking with Flutter
7. Creating a UI to interact with the smart contract
8. Interacting with the complete Dapp

Setting up the development environment

Truffle is the most popular development framework for Ethereum with a mission to make your life a whole lot easier. But before we install truffle make sure to install node .

Once we have node installed, we only need one command to install Truffle:

npm install -g truffle

We will also be using Ganache, a personal blockchain for Ethereum development you can use to deploy smart contracts, develop applications, and run tests. You can download Ganache by navigating to http://truffleframework.com/ganache and clicking the “Download” button.

Creating a Truffle Project

1. Create a basic Flutter project in your favorite IDE
2. Initialize Truffle in the flutter project directory by running

truffle init

Directory Structure

• contracts/ : Contains solidity contract file.
• migrations/: Contains migration script files (Truffle uses a migration system to handle contract deployment).
• test/ : Contains test script files.
• truffle-config.js: Contains truffle deployment configurations information.