Skip to main content

Don't have an API key yet?

Sign-up to Moralis to get your free API key and start building today.

Get Your Free API Key
Version: 2.2

How to Fetch Web3 Data with Flutter

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.


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.