How to Integrate Blockchain for Secure Transactions in FlutterFlow

In FlutterFlow, go to Custom Code → Pubspec Dependencies. Add two packages: web3dart with version ^2.7.3 and walletconnect_flutter_v2 with version ^2.1.0. Also add http ^1.2.0 if not already present (web3dart uses it for RPC calls). Click Save then Compile Code to verify. The web3dart package handles all Ethereum JSON-RPC calls — reading contract state, encoding function calls, and decoding responses. The walletconnect_flutter_v2 package manages the encrypted pairing session with the user's external wallet app.

Create a Custom Action named walletConnect. In the action, initialize Web3App from walletconnect_flutter_v2: final wcClient = await Web3App.createInstance(projectId: 'YOUR_WC_PROJECT_ID', metadata: PairingMetadata(name: 'MyApp', description: 'My FlutterFlow App', url: 'https://myapp.com', icons: []));. Call wcClient.connect(requiredNamespaces: {'eip155': RequiredNamespace(chains: ['eip155:1'], methods: ['eth_sendTransaction', 'personal_sign'], events: [])});. This returns a URI — store it in App State variable wcUri. Create a ConnectWallet page with a QR code widget or deep link button. For mobile wallet deep links: launch 'metamask://wc?uri=$wcUri' using Launch URL action. When the user approves in MetaMask, WalletConnect fires a session approval event — in the callback, extract the connected wallet address and store it in App State walletAddress.

Create a Custom Action named readContract. Initialize a Web3Client: final client = Web3Client('https://mainnet.infura.io/v3/YOUR_INFURA_KEY', Client());. Define your contract ABI as a JSON string (just the specific function you need, not the full ABI). For ERC-20 balance: final contract = DeployedContract(ContractAbi.fromJson(erc20Abi, 'ERC20'), EthereumAddress.fromHex(contractAddress));. Call: final result = await client.call(contract: contract, function: contract.function('balanceOf'), params: [EthereumAddress.fromHex(userWalletAddress)]);. The result is a List — result[0] is the BigInt balance. Divide by 10^18 for ETH-decimaled tokens. For NFT tokenURI: same pattern but call 'tokenURI' with the token ID as parameter — returns a string URL to the NFT metadata JSON. Fetch that URL in a second API call to get name, description, and image.

After reading the token balance in step 3, add a conditional in your UI. On your premium content page, add a Backend Query that calls the readContract action on Page Load and stores the result in Page State variable tokenBalance. Add a Conditional Widget that wraps your premium content — show it only when tokenBalance > 0 (or >= minimumRequired). For the locked state, show a Container with text explaining the requirement and a Buy Token button that navigates to a purchase page or launches a DEX URL. Update the condition check on every page visit — do not cache token ownership in Firestore as the user may have sold the token since last visit.

Create a Custom Action named sendTransaction. Retrieve the active WalletConnect session and wallet address from App State. Build the transaction: final tx = Transaction(from: EthereumAddress.fromHex(walletAddress), to: EthereumAddress.fromHex(contractAddress), data: contract.function('transfer').encodeCall([recipientAddress, amountInWei]));. Request the transaction via WalletConnect: wcClient.request(topic: session.topic, chainId: 'eip155:1', request: SessionRequestParams(method: 'eth_sendTransaction', params: [tx.toJson()]));. This sends a signing request to the user's wallet app — the user sees a native transaction confirmation screen with gas estimate. Never create signed transactions yourself — always route through WalletConnect so the private key stays in the user's wallet.