Hey friends,
I have a custom coded widget for audio recording. The widget includes updates to App State variables (eg. isRecording) with the idea that these App State variables can be used for conditional visibility with other widgets on the page. Unfortunately, these other widgets with conditional visibility or conditional colors are not updating in realtime, you have to navigate away from the page then come back to see those updates.
Does anyone know how to make it so my custom coded widget forces a rebuild of the entire page? Or maybe there is a different solution?
'''
// Automatic FlutterFlow imports
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:flutter_sound_record_web/flutter_sound_record_web.dart';
class CustomAudioRecorderWeb extends StatefulWidget {
const CustomAudioRecorderWeb({
Key? key,
this.width,
this.height,
}) : super(key: key);
final double? width;
final double? height;
@override
CustomAudioRecorderWebState createState() => CustomAudioRecorderWebState();
}
class _CustomAudioRecorderWebState extends State<CustomAudioRecorderWeb> {
FlutterSoundRecordPluginWeb? _recorder;
@override
void initState() {
super.initState();
_recorder = FlutterSoundRecordPluginWeb();
}
Future<void> _toggleRecording() async {
if (_recorder == null) return;
if (FFAppState().isRecording) {
final String? audioUrl = await _recorder!.stop();
FFAppState().isRecording =
false; // Update App State variable for recording status
if (audioUrl != null) {
setState(() => FFAppState().audioPath = audioUrl);
}
} else {
bool hasPermission = await _recorder!.hasPermission();
if (!hasPermission) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Microphone permission denied')),
);
return;
}
await _recorder!.start();
FFAppState().isRecording =
true; // Update App State variable for recording status
}
FFAppState().audioRecorded =
true; // Set audioRecorded to true whenever the widget is interacted with
setState(() {});
}
@override
Widget build(BuildContext context) {
return Container(
width: widget.width ?? 100.0, // Diameter of the circle
height: widget.height ?? 100.0,
decoration: BoxDecoration(
shape: BoxShape.circle, // Keeps the container circular
color: FFAppState().isRecording
? Color(0xFFC4454D)
: Colors.transparent, // Red circle when recording
),
child: IconButton(
iconSize: 75.0, // Size of the icon
icon: Icon(
FFAppState().isRecording
? Icons.stop
: Icons.mic, // Stop icon when recording, mic otherwise
color: FFAppState().isRecording
? Colors.white
: Color(0xFF101518), // Icon color
),
onPressed: _toggleRecording,
),
);
}
@override
void dispose() {
_recorder?.dispose();
super.dispose();
}
}
'''