Creating NFT Marketplaces with Flutter and Web3dart

Introduction

Creating an NFT marketplace on mobile requires a blend of blockchain connectivity and fluid user interfaces. Flutter, Google’s UI toolkit for mobile development, combined with Web3dart, a Dart library for interacting with Ethereum-compatible blockchains, offers an efficient path for building decentralized NFT apps. In this tutorial, you’ll learn how to integrate Web3dart into a Flutter project, connect users’ wallets, interact with smart contracts, and display NFT listings in a marketplace.

Setting Up Flutter and Web3dart

Begin by creating a new Flutter project if you haven’t already:

flutter create nft_marketplace
cd nft_marketplace

Add dependencies in pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  web3dart: ^2.4.0
  http

Run flutter pub get to install packages. web3dart relies on an HTTP client to communicate with your Ethereum node or provider (Infura, Alchemy, etc.).

Next, configure a service class to manage blockchain calls. Create lib/services/ethereum_service.dart:

import 'package:web3dart/web3dart.dart';
import 'package:http/http.dart';

class EthereumService {
  final Web3Client client;
  EthereumService(String rpcUrl)
      : client = Web3Client(rpcUrl, Client());
}

Inject your RPC URL (e.g., https://mainnet.infura.io/v3/YOUR-PROJECT-ID). This prepares your Flutter app for mobile development with blockchain connectivity.

Integrating Wallets and Authentication

To let users manage their NFTs, integrate a wallet. For simplicity, you can import private keys or use WalletConnect.

Example using a private key (development only):

class WalletService {
  final Credentials credentials;
  final EthereumAddress address;
  WalletService(String privateKey)
      : credentials = EthPrivateKey.fromHex(privateKey),
        address = EthPrivateKey.fromHex(privateKey)
            .address; // Extract public address
}

In production, integrate WalletConnect or WalletLink for secure user authentication. After authentication, store the user’s address in app state (e.g., using Provider or Riverpod) to sign transactions.

Building the NFT Marketplace UI

Design a clean list view for NFT items. Use Flutter’s ListView.builder to render token metadata fetched from your smart contract or an API like OpenSea.

Example widget to display an NFT card:

class NftCard extends StatelessWidget {
  final String imageUrl;
  final String title;
  NftCard({this.imageUrl, this.title});

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Column(
        children: [Image.network(imageUrl), Text(title)],
      ),
    );
  }
}

Fetch metadata via your smart contract’s tokenURI function, then parse JSON to extract image, name, and description. Keep your UI responsive by showing a CircularProgressIndicator while loading.

Interacting with Smart Contracts

Smart contract methods drive listing, buying, and transferring NFTs. Use Web3dart’s DeployedContract class:

final abi = await rootBundle.loadString('assets/Marketplace.json');
final contract = DeployedContract(
  ContractAbi.fromJson(abi, 'Marketplace'),
  EthereumAddress.fromHex('0xYourContractAddress'),
);
final listFunction = contract.function('listItem');
await client.sendTransaction(
  credentials,
  Transaction.callContract(
    contract: contract,
    function: listFunction,
    parameters: [tokenId, priceInWei],
  ),
);

For buying, call the buyItem function and attach the Ether value in the transaction’s value field. Use the same pattern to invoke approve and safeTransferFrom for transfers.

Handle blockchain state changes by subscribing to events. For example, listen to a NewListing event and update your marketplace UI automatically.

Managing State and Persistence

A robust NFT marketplace needs predictable state management. Use Provider, Riverpod, or Bloc to manage wallet credentials, contract instances, and live NFT listings. Persist user preferences and cached metadata with SharedPreferences or Hive to improve load times and offline support.

Deploying and Testing

Test contracts on a testnet (Rinkeby, Goerli) before Mainnet deployment. Update your RPC URL to a testnet endpoint, and fund your wallet with test Ether. Verify transactions in Etherscan and refine gas settings for cost-efficient operations. Once stable, point RPC to Mainnet, update contract addresses, and publish your Flutter app to App Store and Google Play.

Vibe Studio

Vibe Studio, powered by Steve’s advanced AI agents, is a revolutionary no-code, conversational platform that empowers users to quickly and efficiently create full-stack Flutter applications integrated seamlessly with Firebase backend services. Ideal for solo founders, startups, and agile engineering teams, Vibe Studio allows users to visually manage and deploy Flutter apps, greatly accelerating the development process. The intuitive conversational interface simplifies complex development tasks, making app creation accessible even for non-coders.

Conclusion

You now have a blueprint for creating an NFT marketplace with Flutter and Web3dart. From setting up blockchain connectivity, integrating user wallets, designing responsive UI components, to interacting with smart contracts, these building blocks enable you to deliver a full-featured marketplace on mobile. Continue refining your architecture with secure key management, live event handling, and polished UX to stand out in the decentralized app ecosystem.