Execute (async) function after completion of animation

[BaseD-75]

Hi community,

Is there a way to execute some async operations after the completion of the animation?

I'm using the dual animated_toggle_switch to show if something is done or not. Clicking the toggle switch changes the done state.
After the switch animation is finished I want to do several updates in Firestore. I tried adding the operations to the onChange property, unfortunately this gets triggered immediately on clicking the toggle switch.

[maeddin]

I can include a function that is triggered every time the position of the indicator changes.
However, I wonder why you don't want to change the values until the animation has played.
After all, the animation is only played when current changes and not necessarily when onChanged is called. If you don't change the state in onChanged, no animation will be played.

[BaseD-75]

Damn, that's a fast reply! Very much appreciated!

It could very well be that there is a better way to deal with my use case. I am fairly new to Flutter and I am using a combination of FlutterFlow and a custom widget. So forgive me if I am doing something dumb here.

Here is the code of the custom widget in case it is useful (still working on it):

// 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:animated_toggle_switch/animated_toggle_switch.dart';

class RollingToggle extends StatefulWidget {
  const RollingToggle({
    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
  _RollingToggleState createState() => _RollingToggleState();
}

class _RollingToggleState extends State<RollingToggle>
    with SingleTickerProviderStateMixin {
  bool wsDone = false;

  @override
  Widget build(BuildContext context) {
    //wsDone = widget.done;

    return Container(
      width: widget.width,
      height: widget.height,
      child: AnimatedToggleSwitch<bool>.dual(
        animationDuration: Duration(milliseconds: 500),
        current: wsDone,
        first: false,
        second: true,
        spacing: 50.0,
        style: const ToggleStyle(
          borderColor: Colors.transparent,
          boxShadow: const [
            BoxShadow(
              color: Colors.black26,
              spreadRadius: 1,
              blurRadius: 2,
              offset: Offset(0, 1.5),
            ),
          ],
        ),
        borderWidth: 5.0,
        height: 55,
        onChanged: (b) async {
          setState(() => wsDone = b);
          //await Future.delayed(Duration(milliseconds: 1000));
          await updateQuestExecutionToDone(widget.questExecutionRef,
              widget.questRef, widget.scQuestRef, widget.squadCharacterRef);
        },
        styleBuilder: (b) => ToggleStyle(
            indicatorColor: b ? widget.doneColor : widget.todoColor),
        iconBuilder: (value) =>
            value ? Icon(Icons.check_circle) : Icon(Icons.unpublished),
        textBuilder: (value) =>
            value ? Center(child: Text('Done')) : Center(child: Text('Todo')),
      ),
    );
  }
}

At a first glance when running this in test-mode everything seems ok when I drag the indicator to the right. In that case onChange seems to be triggerd after I release the indicator. However, if I only click/tap on the widget the animation starts but immediately my function updateQuestExecutionToDone is called to do several Firestore updates. One of these updates triggers a delete of the current row from the list that is being displayed on screen. This has two unwanted consequences (maybe more?): (1) the user cannot see the (!beautiful 😊!) animation because the row containing the widget is removed instantly (which is as desired, only not that fast). And (2) I get a console error that setState() was called after dispose (which I cannot completely explain).

I tried working with an AnimationController and a delay (it's still in the code but commented out), but couldn't get the trick done.

[maeddin]

Oh well, in that case I can add an appropriate parameter for your use case. I will add it tomorrow. So you just want the user to see the animation before the item disappears?

[maeddin]

"setState() was called after dispose" could be an error of my package. I will fix that 👍

[BaseD-75]

Yes. I would like the animation to finish after which I can do the updates which makes the widget dissapear.

[maeddin]

Please create an issue for this and then I'll see how best to resolve it 😅

[BaseD-75]

Done.

Hope you'll think of an option. Maybe an afterAnimation method or something?
Anyway. Thanks for the super quick response!

[BaseD-75]

I have one more question regarding my implementation...

For testing I created a list with 16 toggle_icons and placed a print statement at the beginning of the build method to see how often it gets called. Every time I open this page I get this in the console:

build RollingToggle: false
6dart_sdk.js:30369 build RollingToggle: false
dart_sdk.js:30369 build RollingToggle: false
6dart_sdk.js:30369 build RollingToggle: false
dart_sdk.js:30369 build RollingToggle: false
6dart_sdk.js:30369 build RollingToggle: false
dart_sdk.js:30369 build RollingToggle: false
6dart_sdk.js:30369 build RollingToggle: false
2dart_sdk.js:30369 build RollingToggle: false
30dart_sdk.js:30369 build RollingToggle: false
3dart_sdk.js:30369 build RollingToggle: false
18dart_sdk.js:30369 build RollingToggle: false
3dart_sdk.js:30369 build RollingToggle: false
6dart_sdk.js:30369 build RollingToggle: false
4dart_sdk.js:30369 build RollingToggle: true
dart_sdk.js:30369 build RollingToggle: false
dart_sdk.js:30369 build RollingToggle: true
3dart_sdk.js:30369 build RollingToggle: false
18dart_sdk.js:30369 build RollingToggle: false
dart_sdk.js:30369 build RollingToggle: true
3dart_sdk.js:30369 build RollingToggle: true
dart_sdk.js:30369 build RollingToggle: false
dart_sdk.js:30369 build RollingToggle: true
dart_sdk.js:30369 build RollingToggle: true
dart_sdk.js:30369 build RollingToggle: true
dart_sdk.js:30369 build RollingToggle: true
2dart_sdk.js:30369 build RollingToggle: false
2dart_sdk.js:30369 build RollingToggle: true
3dart_sdk.js:30369 build RollingToggle: false
18dart_sdk.js:30369 build RollingToggle: false

That's a total of 151 builds. And if I click one of the toggle_switches the same happens again.
Feels a bit overdone :-)
Anyone any idea on what I'm doing wrong here?
Another thing that caught my eye was that the animation from false to true runs on all the widgets that are initially set to true from the data in the Database. Could this be prevented somehow?

[maeddin]

It sounds like you call setState every time a toggle is pressed. This rebuilds the whole page. If you send me the code of the page, I can take a closer look.

[BaseD-75]

Your help is very much appreciated!

Code is generated bij FlutterFlow. It's listed below.

I would guess that even a rebuild of the whole page should not trigger an animation (from true to false and back again) for the rows containing a toggle_switch that is set to true/done. When the page is loaded the first time it doesn't animate anything. But it could very well be my misunderstanding of state management.

The Page Widget:
`
import '/auth/firebase_auth/auth_util.dart';
import '/backend/backend.dart';
import '/components/create_execution/create_execution_widget.dart';
import '/components/edit_quest_execution/edit_quest_execution_widget.dart';
import '/components/empty_list_quests/empty_list_quests_widget.dart';
import '/components/nav_bar_widget.dart';
import '/flutter_flow/flutter_flow_animations.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/flutter_flow/flutter_flow_widgets.dart';
import '/custom_code/widgets/index.dart' as custom_widgets;
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:collection/collection.dart';
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
import 'package:flutter/services.dart';
import 'package:flutter_animate/flutter_animate.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:provider/provider.dart';

import 'quest_executions_model.dart';
export 'quest_executions_model.dart';

class QuestExecutionsWidget extends StatefulWidget {
const QuestExecutionsWidget({
Key? key,
required this.questDoc,
required this.squadCharacterDoc,
}) : super(key: key);

final QuestRecord? questDoc;
final SquadCharacterRecord? squadCharacterDoc;

@OverRide
_QuestExecutionsWidgetState createState() => _QuestExecutionsWidgetState();
}

class _QuestExecutionsWidgetState extends State
with TickerProviderStateMixin {
late QuestExecutionsModel _model;

final scaffoldKey = GlobalKey();

final animationsMap = {
'containerOnPageLoadAnimation': AnimationInfo(
trigger: AnimationTrigger.onPageLoad,
effects: [
FadeEffect(
curve: Curves.easeInOut,
delay: 0.ms,
duration: 600.ms,
begin: 0,
end: 1,
),
],
),
};

@OverRide
void initState() {
super.initState();
_model = createModel(context, () => QuestExecutionsModel());

setupAnimations(
  animationsMap.values.where((anim) =>
      anim.trigger == AnimationTrigger.onActionTrigger ||
      !anim.applyInitialState),
  this,
);

WidgetsBinding.instance.addPostFrameCallback((_) => setState(() {}));

}

@OverRide
void dispose() {
_model.dispose();

super.dispose();

}

@OverRide
Widget build(BuildContext context) {
if (isiOS) {
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(
statusBarBrightness: Theme.of(context).brightness,
systemStatusBarContrastEnforced: true,
),
);
}

context.watch<FFAppState>();

return StreamBuilder<QuestRecord>(
  stream: QuestRecord.getDocument(widget.questDoc!.reference),
  builder: (context, snapshot) {
    // Customize what your widget looks like when it's loading.
    if (!snapshot.hasData) {
      return Scaffold(
        backgroundColor: FlutterFlowTheme.of(context).primaryBackground,
        body: Center(
          child: SizedBox(
            width: 50,
            height: 50,
            child: CircularProgressIndicator(
              valueColor: AlwaysStoppedAnimation<Color>(
                FlutterFlowTheme.of(context).primary,
              ),
            ),
          ),
        ),
      );
    }
    final questExecutionsQuestRecord = snapshot.data!;
    return Scaffold(
      key: scaffoldKey,
      backgroundColor: FlutterFlowTheme.of(context).primaryBackground,
      appBar: AppBar(
        backgroundColor: Color(0xFF70AD47),
        automaticallyImplyLeading: false,
        leading: InkWell(
          splashColor: Colors.transparent,
          focusColor: Colors.transparent,
          hoverColor: Colors.transparent,
          highlightColor: Colors.transparent,
          onTap: () async {
            context.safePop();
          },
          child: Icon(
            Icons.arrow_back_rounded,
            color: FlutterFlowTheme.of(context).primaryText,
            size: 30,
          ),
        ),
        title: Text(
          'Quest execution orders',
          style: FlutterFlowTheme.of(context).headlineMedium,
        ),
        actions: [],
        centerTitle: false,
        elevation: 0,
      ),
      body: SafeArea(
        top: true,
        child: Column(
          mainAxisSize: MainAxisSize.max,
          children: [
            Padding(
              padding: EdgeInsetsDirectional.fromSTEB(16, 12, 16, 0),
              child: Row(
                mainAxisSize: MainAxisSize.max,
                children: [
                  Expanded(
                    child: Text(
                      'Execution orders for: ${valueOrDefault<String>(
                        questExecutionsQuestRecord.qDescription,
                        '[No Quest]',
                      )}',
                      style: FlutterFlowTheme.of(context).titleSmall,
                    ),
                  ),
                ],
              ),
            ),
            Expanded(
              child: Padding(
                padding: EdgeInsetsDirectional.fromSTEB(0, 8, 0, 0),
                child: StreamBuilder<List<QuestExecutionRecord>>(
                  stream: queryQuestExecutionRecord(
                    queryBuilder: (questExecutionRecord) =>
                        questExecutionRecord
                            .where(
                              'QE_Q_id',
                              isEqualTo: widget.questDoc?.reference,
                            )
                            .where(
                              'QE_S_id',
                              isEqualTo: FFAppState().activeSquad,
                            ),
                    limit: 25,
                  ),
                  builder: (context, snapshot) {
                    // Customize what your widget looks like when it's loading.
                    if (!snapshot.hasData) {
                      return Center(
                        child: SizedBox(
                          width: 50,
                          height: 50,
                          child: CircularProgressIndicator(
                            valueColor: AlwaysStoppedAnimation<Color>(
                              FlutterFlowTheme.of(context).primary,
                            ),
                          ),
                        ),
                      );
                    }
                    List<QuestExecutionRecord>
                        listViewQuestExecutionRecordList = snapshot.data!;
                    if (listViewQuestExecutionRecordList.isEmpty) {
                      return Center(
                        child: EmptyListQuestsWidget(),
                      );
                    }
                    return ListView.builder(
                      padding: EdgeInsets.zero,
                      scrollDirection: Axis.vertical,
                      itemCount: listViewQuestExecutionRecordList.length,
                      itemBuilder: (context, listViewIndex) {
                        final listViewQuestExecutionRecord =
                            listViewQuestExecutionRecordList[listViewIndex];
                        return Padding(
                          padding:
                              EdgeInsetsDirectional.fromSTEB(16, 0, 16, 4),
                          child: Container(
                            width: MediaQuery.sizeOf(context).width,
                            decoration: BoxDecoration(
                              color: FlutterFlowTheme.of(context).secondary,
                              boxShadow: [
                                BoxShadow(
                                  blurRadius: 5,
                                  color: Color(0x230E151B),
                                  offset: Offset(0, 2),
                                )
                              ],
                              borderRadius: BorderRadius.circular(8),
                            ),
                            child: StreamBuilder<List<SCQuestRecord>>(
                              stream: querySCQuestRecord(
                                parent: widget.squadCharacterDoc?.reference,
                                queryBuilder: (sCQuestRecord) =>
                                    sCQuestRecord.where(
                                  'SC_Q_id',
                                  isEqualTo:
                                      questExecutionsQuestRecord.reference,
                                ),
                                singleRecord: true,
                              ),
                              builder: (context, snapshot) {
                                // Customize what your widget looks like when it's loading.
                                if (!snapshot.hasData) {
                                  return Center(
                                    child: SizedBox(
                                      width: 50,
                                      height: 50,
                                      child: CircularProgressIndicator(
                                        valueColor:
                                            AlwaysStoppedAnimation<Color>(
                                          FlutterFlowTheme.of(context)
                                              .primary,
                                        ),
                                      ),
                                    ),
                                  );
                                }
                                List<SCQuestRecord> rowSCQuestRecordList =
                                    snapshot.data!;
                                // Return an empty Container when the item does not exist.
                                if (snapshot.data!.isEmpty) {
                                  return Container();
                                }
                                final rowSCQuestRecord =
                                    rowSCQuestRecordList.isNotEmpty
                                        ? rowSCQuestRecordList.first
                                        : null;
                                return InkWell(
                                  splashColor: Colors.transparent,
                                  focusColor: Colors.transparent,
                                  hoverColor: Colors.transparent,
                                  highlightColor: Colors.transparent,
                                  onTap: () async {
                                    await showModalBottomSheet(
                                      isScrollControlled: true,
                                      backgroundColor: Colors.transparent,
                                      enableDrag: false,
                                      context: context,
                                      builder: (context) {
                                        return Padding(
                                          padding: MediaQuery.viewInsetsOf(
                                              context),
                                          child: EditQuestExecutionWidget(
                                            questExecutionRef:
                                                listViewQuestExecutionRecord,
                                          ),
                                        );
                                      },
                                    ).then((value) => safeSetState(() =>
                                        _model.deleteExecution = value));

                                    setState(() {});
                                  },
                                  onLongPress: () async {
                                    await showModalBottomSheet(
                                      isScrollControlled: true,
                                      backgroundColor: Colors.transparent,
                                      enableDrag: false,
                                      context: context,
                                      builder: (context) {
                                        return Padding(
                                          padding: MediaQuery.viewInsetsOf(
                                              context),
                                          child: EditQuestExecutionWidget(
                                            questExecutionRef:
                                                listViewQuestExecutionRecord,
                                          ),
                                        );
                                      },
                                    ).then((value) => safeSetState(() =>
                                        _model.deleteExecutionCopy =
                                            value));

                                    if (_model.deleteExecution!) {
                                      if (listViewQuestExecutionRecord
                                              .qEDone ==
                                          false) {
                                        // Get SC_Quest document
                                        _model.scQuestDocCopy =
                                            await querySCQuestRecordOnce(
                                          parent: widget
                                              .squadCharacterDoc?.reference,
                                          queryBuilder: (sCQuestRecord) =>
                                              sCQuestRecord.where(
                                            'SC_Q_id',
                                            isEqualTo:
                                                questExecutionsQuestRecord
                                                    .reference,
                                          ),
                                          singleRecord: true,
                                        ).then((s) => s.firstOrNull);
                                        // Decrement todo counter

                                        await _model
                                            .scQuestDocCopy!.reference
                                            .update({
                                          ...mapToFirestore(
                                            {
                                              'SC_Q_todo_count':
                                                  FieldValue.increment(
                                                      -(1)),
                                            },
                                          ),
                                        });
                                      }
                                      // Delete Quest_Execution record
                                      await listViewQuestExecutionRecord
                                          .reference
                                          .delete();
                                    }

                                    setState(() {});
                                  },
                                  child: Row(
                                    mainAxisSize: MainAxisSize.max,
                                    children: [
                                      Padding(
                                        padding:
                                            EdgeInsetsDirectional.fromSTEB(
                                                6, 0, 8, 0),
                                        child:
                                            StreamBuilder<CharacterRecord>(
                                          stream: CharacterRecord.getDocument(
                                              listViewQuestExecutionRecord
                                                  .qECId!),
                                          builder: (context, snapshot) {
                                            // Customize what your widget looks like when it's loading.
                                            if (!snapshot.hasData) {
                                              return Center(
                                                child: SizedBox(
                                                  width: 50,
                                                  height: 50,
                                                  child:
                                                      CircularProgressIndicator(
                                                    valueColor:
                                                        AlwaysStoppedAnimation<
                                                            Color>(
                                                      FlutterFlowTheme.of(
                                                              context)
                                                          .primary,
                                                    ),
                                                  ),
                                                ),
                                              );
                                            }
                                            final imageCharacterRecord =
                                                snapshot.data!;
                                            return ClipRRect(
                                              borderRadius:
                                                  BorderRadius.circular(8),
                                              child: Image.network(
                                                imageCharacterRecord
                                                    .photoUrl,
                                                width: 30,
                                                height: 30,
                                                fit: BoxFit.cover,
                                              ),
                                            );
                                          },
                                        ),
                                      ),
                                      Expanded(
                                        child: Row(
                                          mainAxisSize: MainAxisSize.max,
                                          children: [
                                            Padding(
                                              padding: EdgeInsetsDirectional
                                                  .fromSTEB(0, 4, 0, 0),
                                              child: Text(
                                                valueOrDefault<String>(
                                                  dateTimeFormat(
                                                      'MMMEd',
                                                      listViewQuestExecutionRecord
                                                          .qEDueDateTime),
                                                  'Sat, Jan 1',
                                                ),
                                                style: FlutterFlowTheme.of(
                                                        context)
                                                    .titleSmall,
                                              ),
                                            ),
                                            Padding(
                                              padding: EdgeInsetsDirectional
                                                  .fromSTEB(4, 4, 0, 0),
                                              child: Text(
                                                valueOrDefault<String>(
                                                  dateTimeFormat(
                                                      'jm',
                                                      listViewQuestExecutionRecord
                                                          .qEDueDateTime),
                                                  '00:00',
                                                ),
                                                style: FlutterFlowTheme.of(
                                                        context)
                                                    .titleSmall,
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                      Column(
                                        mainAxisSize: MainAxisSize.max,
                                        mainAxisAlignment:
                                            MainAxisAlignment.center,
                                        children: [
                                          Padding(
                                            padding: EdgeInsetsDirectional
                                                .fromSTEB(0, 4, 8, 4),
                                            child: Container(
                                              width: 140,
                                              height: 40,
                                              child: custom_widgets
                                                  .RollingToggle(
                                                width: 140,
                                                height: 40,
                                                done:
                                                    listViewQuestExecutionRecord
                                                        .qEDone,
                                                doneColor:
                                                    FlutterFlowTheme.of(
                                                            context)
                                                        .primary,
                                                todoColor:
                                                    FlutterFlowTheme.of(
                                                            context)
                                                        .alternate,
                                                questExecutionRef:
                                                    listViewQuestExecutionRecord
                                                        .reference,
                                                questRef:
                                                    questExecutionsQuestRecord
                                                        .reference,
                                                squadCharacterRef: widget
                                                    .squadCharacterDoc!
                                                    .reference,
                                                scQuestRef:
                                                    rowSCQuestRecord!
                                                        .reference,
                                              ),
                                            ),
                                          ),
                                        ],
                                      ),
                                    ],
                                  ),
                                );
                              },
                            ),
                          ).animateOnPageLoad(animationsMap[
                              'containerOnPageLoadAnimation']!),
                        );
                      },
                    );
                  },
                ),
              ),
            ),
            wrapWithModel(
              model: _model.navBarModel,
              updateCallback: () => setState(() {}),
              child: NavBarWidget(
                middleButtonAction: () async {
                  await showModalBottomSheet(
                    isScrollControlled: true,
                    backgroundColor: Colors.transparent,
                    barrierColor: Color(0x230E151B),
                    context: context,
                    builder: (context) {
                      return Padding(
                        padding: MediaQuery.viewInsetsOf(context),
                        child: Container(
                          height: MediaQuery.sizeOf(context).height * 1,
                          child: CreateExecutionWidget(
                            questDoc: questExecutionsQuestRecord,
                          ),
                        ),
                      );
                    },
                  ).then((value) => safeSetState(() {}));
                },
              ),
            ),
          ],
        ),
      ),
    );
  },
);

}
}
`

The Page Model:
`
import '/auth/firebase_auth/auth_util.dart';
import '/backend/backend.dart';
import '/components/create_execution/create_execution_widget.dart';
import '/components/edit_quest_execution/edit_quest_execution_widget.dart';
import '/components/empty_list_quests/empty_list_quests_widget.dart';
import '/components/nav_bar_widget.dart';
import '/flutter_flow/flutter_flow_animations.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/flutter_flow/flutter_flow_widgets.dart';
import '/custom_code/widgets/index.dart' as custom_widgets;
import 'quest_executions_widget.dart' show QuestExecutionsWidget;
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:collection/collection.dart';
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
import 'package:flutter/services.dart';
import 'package:flutter_animate/flutter_animate.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:provider/provider.dart';

class QuestExecutionsModel extends FlutterFlowModel {
/// State fields for stateful widgets in this page.

// Stores action output result for [Bottom Sheet - EditQuestExecution] action in Row widget.
bool? deleteExecution;
// Stores action output result for [Bottom Sheet - EditQuestExecution] action in Row widget.
bool? deleteExecutionCopy;
// Stores action output result for [Firestore Query - Query a collection] action in Row widget.
SCQuestRecord? scQuestDocCopy;
// Model for NavBar component.
late NavBarModel navBarModel;

/// Initialization and disposal methods.

void initState(BuildContext context) {
navBarModel = createModel(context, () => NavBarModel());
}

void dispose() {
navBarModel.dispose();
}

/// Action blocks are added here.

/// Additional helper methods are added here.
}
`

The used code for the Toggle_switch itselve:
`
// 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:animated_toggle_switch/animated_toggle_switch.dart';

class RollingToggle extends StatefulWidget {
const RollingToggle({
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
_RollingToggleState createState() => _RollingToggleState();
}

class _RollingToggleState extends State {
late bool wsDone;

@OverRide
void initState() {
super.initState();
// Your custom initialization code here
wsDone = widget.done;
}

@OverRide
Widget build(BuildContext context) {
wsDone = widget.done;
//print("build RollingToggle: " + wsDone.toString());

return Container(
  width: widget.width,
  height: widget.height,
  child: AnimatedToggleSwitch<bool>.dual(
    animationDuration: Duration(milliseconds: 500),
    current: wsDone,
    first: false,
    second: true,
    spacing: 50.0,
    style: const ToggleStyle(
      borderColor: Colors.transparent,
      boxShadow: const [
        BoxShadow(
          color: Colors.black26,
          spreadRadius: 1,
          blurRadius: 2,
          offset: Offset(0, 1.5),
        ),
      ],
    ),
    borderWidth: 5.0,
    height: 55,
    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);
    },
    styleBuilder: (b) => ToggleStyle(
        indicatorColor: b ? widget.doneColor : widget.todoColor),
    iconBuilder: (value) =>
        value ? Icon(Icons.check_circle) : Icon(Icons.unpublished),
    textBuilder: (value) =>
        value ? Center(child: Text('Done')) : Center(child: Text('Todo')),
  ),
);

}
}
`

[maeddin]

I haven't forgotten you, but I'm currently ill. Is the performance so bad that you really want to reduce the number of rebuilds?

[BaseD-75]

No worries and I hope you get well soon.

No, I'm not that worried about performance. My main concern is the animation that flips from true to false and back again whenever I delete or add a row.

[BaseD-75]

I found out the flipping back and forth happens when I open and close a bottom sheet (which covers the list with toggles partially). It then runs an animation from false to true and back to true ONLY for the rows that were not covered up with the bottom sheet. So, I'm not even clicking the toggles or changing state of any toggle in this case. Could this have something to do with the redrawing mechanism of flutter that I'm not understanding?