information dialog over the app

Widgets & Design

i am changing the flutteflow app state variable through custom action.
i need to show information dialog over the app when the state of a variable changes.
user can be in any page in the app if the state changes dialog should tigger.

What have you tried so far?

i have tried with custom widget but i did not got the solution

// 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!

class NewCustomWidget extends StatefulWidget {
  const NewCustomWidget({
    super.key,
    this.width,
    this.height,
  });

  final double? width;
  final double? height;

  @override
  State<NewCustomWidget> createState() => _NewCustomWidgetState();
}

class _NewCustomWidgetState extends State<NewCustomWidget> {
  @override
  void initState() {
    super.initState();

    // Add a listener to monitor AppState changes
    FFAppState().addListener(_onAppStateChange);
  }

  @override
  void dispose() {
    // Remove the listener when the widget is disposed
    FFAppState().removeListener(_onAppStateChange);
    super.dispose();
  }

  void _onAppStateChange() {
    // Check the FFAppState variable and show a dialog if needed
    if (!FFAppState().isConnected) {
      _showInfoDialog();
    }
  }

  void _showInfoDialog() {
    // Use the global navigator context to show the dialog
    final navigator = FlutterFlowUtil.getNavigatorKey()?.currentState;
    if (navigator != null) {
      showDialog(
        context: navigator.context,
        builder: (context) {
          return AlertDialog(
            title: const Text('Connection Lost'),
            content: const Text('The connection to the device has been lost.'),
            actions: [
              TextButton(
                onPressed: () {
                  Navigator.of(context).pop(); // Close the dialog
                },
                child: const Text('OK'),
              ),
            ],
          );
        },
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    // Return an empty container or customize as needed
    return Container(
      width: widget.width,
      height: widget.height,
      color: Colors.transparent, // Optional: make it invisible
    );
  }
}
Did you check FlutterFlow's Documentation for this topic?
Yes
1
1 reply