• What people tend to overbuild or overthink

• What the simpler approach usually is

• And what “clicked” for you when you figured it out

The goal is simple:

When the page is at the absolute top (scroll offset = 0), the TopBar should be completely transparent.

When the user scrolls down (e.g., scroll offset > 20px), the TopBar should change its state to become blurred/darkened.

I want to do this smoothly without causing any lag or stutter in the native scrolling experience. However, I am unable to find a straightforward "On Scroll" action trigger that tracks the exact pixel position of the scrollable area.

I've been stuck for 4 days with this. My app uploads payment receipts to Firebase Storage correctly, and the URL is saved in Firestore. However, the Admin Panel won't show the images.

What I've done:

Created a rol field in the users collection (client, merchant, admin).

Set Storage Rules to allow read if user.rol == 'admin'.

Granted IAM permissions to the Storage Service Account to access Firestore.

In FlutterFlow, the Image Widget is set to "Network" using the payment_receipt path.

The images still won't load in the Admin Panel even when logged in as "admin". Any ideas on what I'm missing? Thanks!

“Codemagic build error: GitHub Error: Access Forbidden”

I do not use GitHub integration in FlutterFlow, and nothing has changed on my side. Since this affects multiple projects at the same time, it looks like an issue with FlutterFlow/Codemagic’s internal deployment pipeline, GitHub access, or dependency fetching.

I’m currently building a quiz using a ListView, and I’m trying to create a smooth user flow where:

• The user answers a question

• Clicks on a “Continue” button

• The next question appears

• The view automatically scrolls down to the next question question

I’ve gone through quite a few forum posts and discussions, and I understand there’s no super simple, built-in solution for this in FlutterFlow.

I’m comfortable adding some custom code if needed, but most of the solutions I’ve found so far seem fairly complex, and I’m wondering if I might be overcomplicating things.

Has anyone implemented something like this in a simpler or more streamlined way?

Any guidance or examples would be really appreciated!

Thanks 🙏

I recently built a custom Speech-to-Text (STT) widget in FlutterFlow and wanted to share how I approached it — in case it helps someone working on voice-based features.

What this does:

• Converts speech to text in real-time

• Continuously updates the input field with recognized words

• Tap to start/stop listening

• Handles session states (listening, stopped, errors)

• Includes Lottie animation for better UX

Key Approach:

Instead of directly using the STT plugin inside the widget, I created a singleton manager to handle:

• Initialization (only once)

• Listening state globally

• Callbacks for results, status, and errors

This avoids multiple initializations and keeps things clean when reused across screens.

Widget Parameters:

The widget is designed to be reusable and flexible:

• width (double?)
  → width of the widget

• height (double?)
  → height of the widget

• onTextRecognized (Future Function(String)) ✅ Required
  → Callback that returns the recognized speech text in real-time

• currentText (String?)
  → Existing text (used to append new speech instead of replacing it)

Tech Used:

• speech_to_text package

• Custom FlutterFlow widget

• Lottie animations for voice feedback

• Callback-based text handling

⚡ Use Cases:

• Chat/messaging apps

• AI assistants

• Form inputs with voice

• Accessibility features

// Automatic FlutterFlow imports
import '/backend/backend.dart';
import '/backend/schema/structs/index.dart';
import '/backend/schema/enums/enums.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/widgets/index.dart'; // Imports other custom widgets
import '/custom_code/actions/index.dart'; // Imports custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

import 'package:speech_to_text/speech_to_text.dart' as stt;
import 'package:google_fonts/google_fonts.dart';
import 'package:lottie/lottie.dart';

// ─── Singleton STT Manager ───────────────────────────────────────────────────

typedef OnSpeechResult = void Function(String text);
typedef OnStatusChange = void Function(String status);

class SpeechSttManager {
  SpeechSttManager._internal();
  static final SpeechSttManager _instance = SpeechSttManager._internal();
  factory SpeechSttManager() => _instance;

  final stt.SpeechToText _speech = stt.SpeechToText();

  bool _available = false;
  bool _initialized = false;

  OnSpeechResult? onResult;
  OnStatusChange? onStatus;
  OnStatusChange? onError;

  Future<void> initialize() async {
    if (_initialized) return;

    _available = await _speech.initialize(
      onStatus: (status) => onStatus?.call(status),
      onError: (error) => onError?.call(error.errorMsg),
    );

    _initialized = true;
  }

  bool get isAvailable => _available;
  bool get isListening => _speech.isListening;

  Future<void> startListening({required OnSpeechResult onSpeech}) async {
    onResult = onSpeech;
    if (!_available) return;
    await _speech.listen(
      onResult: (result) => onResult?.call(result.recognizedWords),
      listenFor: const Duration(minutes: 2),
      pauseFor: const Duration(seconds: 5),
      localeId: 'en_US',
    );
  }

  Future<void> stopListening() async => await _speech.stop();
  Future<void> cancelListening() async => await _speech.cancel();
}

// ─── Widget ──────────────────────────────────────────────────────────────────

class SpeechRecognizer extends StatefulWidget {
  const SpeechRecognizer({
    super.key,
    this.width,
    this.height,
    required this.onTextRecognized,
    this.currentText,
  });

  final double? width;
  final double? height;
  final Future Function(String recognizedText) onTextRecognized;
  final String? currentText;

  @override
  State<SpeechRecognizer> createState() => _SpeechRecognizerState();
}

class _SpeechRecognizerState extends State<SpeechRecognizer> {
  final _sttManager = SpeechSttManager();

  bool _isListening = false;
  bool _isInitializing = true;
  String _textBeforeSession = '';

  @override
  void initState() {
    super.initState();
    _initSpeech();
  }

  Future<void> _initSpeech() async {
    _sttManager.onStatus = (status) {
      print("STT status: $status");
      if (status == 'done') _resetUI();
    };

    _sttManager.onError = (error) {
      print("STT error: $error");
      _resetUI();
    };

    await _sttManager.initialize();

    if (!mounted) return;
    setState(() => _isInitializing = false);
  }

  Future<void> _startListening() async {
    if (!_sttManager.isAvailable || _isListening) return;

    _textBeforeSession = widget.currentText ?? '';
    setState(() => _isListening = true);

    await _sttManager.startListening(
      onSpeech: (words) {
        if (words.isNotEmpty) {
          final combined =
              _textBeforeSession.isEmpty ? words : '$_textBeforeSession $words';
          widget.onTextRecognized(combined);
        }
      },
    );
  }

  Future<void> _stopListening() async {
    await _sttManager.stopListening();
    _resetUI();
  }

  void _resetUI() {
    if (!mounted) return;
    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (!mounted) return;
      setState(() => _isListening = false);
    });
  }

  @override
  void dispose() {
    _sttManager.stopListening();
    _sttManager.onStatus = null;
    _sttManager.onError = null;
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final primary = FlutterFlowTheme.of(context).primary;

    if (_isInitializing) {
      return SizedBox(
        width: widget.width,
        height: widget.height,
        child: const Center(child: CircularProgressIndicator()),
      );
    }

    return SizedBox(
      width: widget.width,
      height: widget.height,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Lottie.asset(
            'assets/jsons/audio_visualizer_animation.json',
            width: 150,
            height: 90,
            animate: _isListening,
          ),
          const SizedBox(height: 20),
          GestureDetector(
            onTap: _isListening ? _stopListening : _startListening,
            child: Container(
              width: 72,
              height: 72,
              decoration: BoxDecoration(
                color: primary,
                shape: BoxShape.circle,
              ),
              child: Icon(
                _isListening ? Icons.pause : Icons.mic,
                color: Colors.white,
                size: 32,
              ),
            ),
          ),
          const SizedBox(height: 16),
          Text(
            _isListening ? "Listening..." : "Tap to speak",
            style: GoogleFonts.inter(fontWeight: FontWeight.w500),
          ),
        ],
      ),
    );
  }
}

Would love to hear your thoughts or if anyone has implemented this differently 🙌