WIP - refactored custom expansion tile, added server endpoint for updating kindergarden info

Author: dabblingwithcode

school_data_hub_client/lib/src/protocol/client.dart

@@ -1,34 +1,65 @@
 import 'package:flutter/material.dart';
-import 'package:school_data_hub_flutter/common/widgets/custom_expansion_tile/custom_expansion_tile.dart';
+import 'package:flutter_it/flutter_it.dart';
+import 'package:school_data_hub_flutter/common/widgets/custom_expansion_tile/custom_expansion_tile_controller.dart';
 
-class CustomExpansionTileContent extends StatelessWidget {
-  final List<Widget> widgetList;
-  final CustomExpansionTileController? tileController;
+class CustomExpansionTileContent extends WatchingStatefulWidget {
   final Widget? title;
+  final List<Widget> widgetList;
+  final CustomExpansionTileController tileController;
+
+  const CustomExpansionTileContent({
+    super.key,
+    required this.widgetList,
+    this.title,
+    required this.tileController,
+  });
+
+  @override
+  State<CustomExpansionTileContent> createState() =>
+      _CustomExpansionTileContentState();
+}
+
+// Use TickerProviderStateMixin to provide 'vsync'
+class _CustomExpansionTileContentState extends State<CustomExpansionTileContent>
+    with TickerProviderStateMixin {
+  late AnimationController _animController;
+
+  @override
+  void initState() {
+    super.initState();
+    _animController = AnimationController(
+      vsync: this, // 'this' works because of the Mixin
+      duration: const Duration(milliseconds: 200),
+    );
+  }
 
-  const CustomExpansionTileContent(
-      {super.key, required this.widgetList, this.tileController, this.title});
+  @override
+  void dispose() {
+    _animController.dispose();
+    super.dispose();
+  }
 
   @override
   Widget build(BuildContext context) {
-    return ListTileTheme(
-      contentPadding: const EdgeInsets.all(0),
-      dense: true,
-      horizontalTitleGap: 0.0,
-      minLeadingWidth: 0,
-      minVerticalPadding: 0,
-      tileColor: Colors.transparent,
-      child: Theme(
-        data: Theme.of(context).copyWith(dividerColor: Colors.transparent),
-        child: Padding(
-          padding: const EdgeInsets.only(bottom: 2.0),
-          child: CustomExpansionTile(
-              collapsedBackgroundColor: Colors.transparent,
-              tilePadding: const EdgeInsets.all(0),
-              title: title ?? const SizedBox.shrink(),
-              controller: tileController,
-              children: [...widgetList]),
-        ),
+    // Access 'watch' via the watch_it mixin functionality in WatchingStatefulWidget
+    final isExpanded = watch(widget.tileController.isExpanded).value;
+
+    // Drive the animation
+    if (isExpanded) {
+      _animController.forward();
+    } else {
+      _animController.reverse();
+    }
+
+    return SizeTransition(
+      sizeFactor: CurvedAnimation(
+        parent: _animController,
+        curve: Curves.easeIn,
+      ),
+      axisAlignment: -1.0,
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: widget.widgetList,
       ),
     );
   }

school_data_hub_flutter/lib/common/widgets/custom_expansion_tile/custom_expansion_tile.dart

@@ -0,0 +1,14 @@
+import 'package:flutter/foundation.dart';
+
+class CustomExpansionTileController {
+  CustomExpansionTileController({bool initiallyExpanded = false})
+    : isExpanded = ValueNotifier<bool>(initiallyExpanded);
+
+  final ValueNotifier<bool> isExpanded;
+
+  void expand() => isExpanded.value = true;
+  void collapse() => isExpanded.value = false;
+  void toggle() => isExpanded.value = !isExpanded.value;
+
+  void dispose() => isExpanded.dispose();
+}

school_data_hub_flutter/lib/common/widgets/custom_expansion_tile/custom_expansion_tile_content.dart

@@ -1,13 +1,15 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_it/flutter_it.dart';
 import 'package:gap/gap.dart';
-import 'package:school_data_hub_flutter/common/widgets/custom_expansion_tile/custom_expansion_tile.dart';
+import 'package:school_data_hub_flutter/common/widgets/custom_expansion_tile/custom_expansion_tile_controller.dart';
 
-class CustomExpansionTileSwitch extends StatefulWidget {
+class CustomExpansionTileSwitch extends WatchingWidget {
   final Widget? expansionSwitchWidget;
   final bool? includeSwitch;
   final Color? switchColor;
   final CustomExpansionTileController customExpansionTileController;
   final ValueChanged<bool>? onChanged;
+
   const CustomExpansionTileSwitch({
     this.expansionSwitchWidget,
     this.includeSwitch,
@@ -17,59 +19,37 @@ class CustomExpansionTileSwitch extends StatefulWidget {
     super.key,
   });
 
-  @override
-  CustomExpansionTileSwitchState createState() =>
-      CustomExpansionTileSwitchState();
-}
-
-class CustomExpansionTileSwitchState extends State<CustomExpansionTileSwitch> {
-  late final CustomExpansionTileController _tileController;
-  bool isExpanded = false;
-  @override
-  void initState() {
-    _tileController = widget.customExpansionTileController;
-    super.initState();
-  }
-
   @override
   Widget build(BuildContext context) {
+    final isExpanded = watch(customExpansionTileController.isExpanded).value;
+
     return InkWell(
       onTap: () {
-        if (_tileController.isExpanded) {
-          _tileController.collapse();
-          setState(() {
-            isExpanded = false;
-          });
-        } else {
-          _tileController.expand();
-          setState(() {
-            isExpanded = true;
-          });
-        }
-        widget.onChanged?.call(isExpanded);
+        customExpansionTileController.toggle();
+        onChanged?.call(customExpansionTileController.isExpanded.value);
       },
       child:
-          widget.expansionSwitchWidget != null &&
-              widget.includeSwitch != null &&
-              widget.includeSwitch == true
+          expansionSwitchWidget != null &&
+              includeSwitch != null &&
+              includeSwitch == true
           ? Row(
               mainAxisAlignment: MainAxisAlignment.end,
               children: [
-                widget.expansionSwitchWidget!,
+                expansionSwitchWidget!,
                 const Gap(10),
                 Icon(
                   isExpanded
                       ? Icons.keyboard_arrow_up
                       : Icons.keyboard_arrow_down,
-                  color: widget.switchColor!,
+                  color: switchColor!,
                 ),
               ],
             )
-          : widget.expansionSwitchWidget != null && widget.includeSwitch != true
-          ? widget.expansionSwitchWidget
+          : expansionSwitchWidget != null && includeSwitch != true
+          ? expansionSwitchWidget
           : Icon(
               isExpanded ? Icons.keyboard_arrow_up : Icons.keyboard_arrow_down,
-              color: widget.switchColor ?? Colors.white,
+              color: switchColor ?? Colors.white,
             ),
     );
   }