FlutterFlow | Dev Considerations

This is a comprehensive guide that outlines a few considerations for the most effective and efficient ways for developing inside FlutterFlow.

Line Charts

For line charts, the x-axis can only be numbers.

For example:

If we need the chart to have an alphanumeric x-axis, we need to either:

Use Bar chart.
Add a fixed text outside the chart that would represent the dots (not ideal).

Templates

When using a template, we won’t be able to duplicate the app. Even if we’ve built over that template.

Backend

Firebase natively works with phone. If we need email verification, we will need to add Flutter code.
Supabase works both with phone and email.

FlutterFlow Web Preloader

For more information see this video: https://www.youtube.com/watch?v=bZ-vUSHLG58

Why Use It
The preloader addresses a critical user experience issue in FlutterFlow web applications where users encounter a blank screen during initial load.

When to Use It
Implement the preloader when:

Your web app has a noticeable loading delay
You have media-rich content that takes time to initialize
Your application serves users with varying internet speeds
You want to provide immediate visual feedback during app initialization

How It Works
The solution works by:

Adding a loading spinner to the HTML header section
Displaying during the gap between initial page load and Flutter engine initialization
Automatically disappearing once your app's splash screen renders
Maintaining full customization control through CSS variables

The implementation requires only modifying the custom headers section in FlutterFlow's web deployment settings, making it a non-invasive enhancement to your application.

Code:

<style>
    #loading-spinner {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #c5ecdb;
      z-index: 9999;
    }
    .spinner {
      width: 50px;
      height: 50px;
      border: 5px solid #7BB695;
      border-top: 5px solid #004225;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
  </style>
 
  <!-- Add this script to create and manage the loading spinner -->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var spinner = document.createElement('div');
      spinner.id = 'loading-spinner';
      spinner.innerHTML = '<div class="spinner"></div>';
      document.body.appendChild(spinner);
 
      window.addEventListener('load', function() {
        spinner.style.display = 'none';
      });
    });
  </script>