Skip to main content
Version: 2.2

How to Fetch Web3 Data with Flutter

Don't have an API key yet?

Start using this API for your project today.

Get your free API key

This tutorial integrates a Flutter frontend with a Flask backend using the Moralis API to get NFT data.

Video Tutorial: Get Any Wallet NFTs Using Flutter and the Moralis API​

For a visual guide, check out our YouTube tutorial:

NFT Application Structure​

The application is composed of the following:

  • A backend server
  • A login page
  • An NFT list component
  • A main application file

Backend Server​

The Flask-based backend server serves as the bridge between the Moralis API endpoints and the Flutter frontend.

NFT List Component​

The NFT list component in the Flutter app takes the user's blockchain address and chain as parameters for fetching NFT data. It then displays a list of NFTs associated with the user's account, where each NFT is displayed in a Card, showing its name, image, and description.

Login Page​

The login page manages user authentication using WalletConnect.

Main Application File​

The main application file is the entry point of the Flutter application, setting the foundation for the app's routing and UI structure.

Step 1: Set Up Moralis​

Read the article, Setting Up Moralis: Getting Started, and make sure to finish all the steps. Only after that can you go ahead and complete this guide.

Step 2: Make HTTP Requests to the Moralis REST API​

You can find a detailed guide in Flutter's official documentation: Fetch data from the internet.

Step 3: Get Any Wallet NFTs​

Follow our tutorial on how to get all the NFTs owned by an address.

Support​

If you face any trouble following the tutorial, feel free to reach out to our community engineers in our Discord or forum to get 24/7 developer support.