Rive network link is not loading

Widgets & Design

Dear FlutterFlow Support Team,

I am experiencing an issue where a Rive (.riv) animation file hosted on Azure Blob Storage loads correctly in a local environment but fails to load within my FlutterFlow application. Despite configuring Cross-Origin Resource Sharing (CORS) settings and ensuring the file's public accessibility, the animation does not display as expected in FlutterFlow.

Details:

  • File Hosting: Azure Blob Storage

    • CORS Configuration:

      • Allowed Origins: *

      • Allowed Methods: GET

      • Allowed Headers: *

      • Exposed Headers: *

      • Max Age: 3600

    • Public Access Level: Blob (anonymous read access)

  • FlutterFlow Configuration:

  • Observations:

    • The .riv file is accessible and functions correctly when accessed directly via a web browser.

    • Within FlutterFlow, the animation does not load, and no explicit error messages are displayed.

Despite these efforts, the Rive animation does not render within the FlutterFlow application. I am seeking your assistance to identify and resolve this issue. Could you please provide guidance on any additional configurations or steps that may be required to successfully load Rive animations from Azure Blob Storage in FlutterFlow?

Thank you for your support.

Best regards,

Yadu Krishnan

What have you tried so far?

Troubleshooting Steps Taken:

  1. CORS Settings Verification:

    • Confirmed that CORS settings in Azure Blob Storage are configured to allow all origins and necessary methods.

  2. Public Access Confirmation:

    • Ensured that the blob container's public access level is set to allow anonymous read access.

  3. URL Validation:

    • Verified the correctness of the URL used in the Rive widget within FlutterFlow.

  4. Browser Testing:

    • Accessed the .riv file URL directly in multiple browsers, confirming that the file downloads and displays correctly.

  5. Alternative Files:

    • Tested with different .riv files to rule out file-specific issues; the problem persists across multiple files.

  6. FlutterFlow Widget Configuration:

    • Reviewed the Rive widget setup in FlutterFlow to ensure proper configuration.

  7. Developer Console Inspection:

    • Monitored browser developer tools for any error messages during the loading process; no relevant errors were observed.

Did you check FlutterFlow's Documentation for this topic?
No
1