Dear FF community,
This problem is keeping me up for days now, and I can't seem to find a solid solution...
I have a listview containing rows with a custom rolling switch widget (I tried several pub.dev widgets, for now I'm sticking to lite_rolling_switch
):
The part of the test page containing the widget looks like this:
The problem is that whenever I open and close a bottom sheet or add or delete a row from the listview (through Firebase) the animation of the rolling switch is rerun for at least the bottom part of the list entries. This looks really weird.
After diving into the Flutter documentation, I thought using "keys" could do the trick. The "key" parameter IS added to the parameterlist of my custom widget by default in the boilerplate code. So that's a good thing. But, it is NOT accessible in the property window within FF when selecting the widget in the page.
So, is there any way to fill the key parameter?
Not knowing if this will actually solve my problem, any other suggestions on preventing the animations from being triggered would be more that welcome!
The code of the custom widget:
// Automatic FlutterFlow imports
import '/backend/backend.dart';
import '/backend/schema/structs/index.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:lite_rolling_switch/lite_rolling_switch.dart';
class CustLiteRollingSwitch extends StatefulWidget {
const CustLiteRollingSwitch({
Key? key,
this.width,
this.height,
required this.done,
required this.questExecutionRef,
required this.questRef,
required this.scQuestRef,
required this.squadCharacterRef,
required this.doneColor,
required this.todoColor,
}) : super(key: key);
final double? width;
final double? height;
final bool done;
final DocumentReference questExecutionRef;
final DocumentReference questRef;
final DocumentReference scQuestRef;
final DocumentReference squadCharacterRef;
final Color doneColor;
final Color todoColor;
@override
_CustLiteRollingSwitchState createState() => _CustLiteRollingSwitchState();
}
class _CustLiteRollingSwitchState extends State<CustLiteRollingSwitch>
with AutomaticKeepAliveClientMixin {
late bool wsDone;
@override
bool get wantKeepAlive => true;
@override
void initState() {
super.initState();
// Your custom initialization code here
wsDone = widget.done;
}
@override
Widget build(BuildContext context) {
super.build(context); // Ensure the mixin is called
wsDone = widget.done;
//print("build RollingToggle: " + wsDone.toString());
return Container(
width: widget.width,
height: widget.height,
child: LiteRollingSwitch(
animationDuration: Duration(milliseconds: 500),
value: wsDone,
width: 150,
textOn: 'Done',
textOff: 'Todo',
colorOn: widget.doneColor,
colorOff: widget.todoColor,
iconOn: Icons.check_circle,
iconOff: Icons.unpublished,
onChanged: (b) async {
setState(() => wsDone = b);
//await Future.delayed(Duration(milliseconds: 1000));
//print("clicked, set to: " + b.toString());
await updateQuestExecutionDone(widget.questExecutionRef,
widget.questRef, widget.scQuestRef, widget.squadCharacterRef, b);
},
onDoubleTap: () {},
onSwipe: () {},
onTap: () {},
),
);
}
}