when the widget loads, the state is false, and therefore unintended calls are being made on the app. Is there a way to isolate the on tap function only. I only want the calls to be made when a user taps the widget, not on load. Thank you.

This issue appeared when a user trying to call setState in the onChanged function.

This appears because of the call to _determine which caused a call to setState during initState.

You can try the following code to raise the error and see that my code fixes it (This is just you main example with a Container changing color):

import 'package:flutter/material.dart';
import 'package:lite_rolling_switch/lite_rolling_switch.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
        title: 'Examples',
        home: MyHomePage(),
      );
}

class MyHomePage extends StatefulWidget {
  MyHomePage({
    Key key,
  }) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool changeColor = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              height: 100,
              color: changeColor ? Colors.green : Colors.red,
            ),
            //By default
            LiteRollingSwitch(
              value: false,
              onChanged: (bool state) {
                print('turned ${(state) ? 'on' : 'off'}');
              },
            ),

            //Customized
            Padding(
              padding: EdgeInsets.only(top: 20),
              child: LiteRollingSwitch(
                value: true,
                textOn: 'active',
                textOff: 'inactive',
                colorOn: Colors.deepOrange,
                colorOff: Colors.blueGrey,
                iconOn: Icons.lightbulb_outline,
                iconOff: Icons.power_settings_new,
                onChanged: (bool state) {
                  print('turned ${(state) ? 'on' : 'off'}');
                  print('CHANGE COLOR');
                  setState(() {
                    changeColor = !changeColor;
                  });
                },
              ),
            )
          ],
        ),
      ),
    );
  }
}

It seems that the author of the package is no longer available to work on it. If someone is still looking to use this package, I have written an updated null-safe version of the switch.

It supports arbitrary width and height as well as full customization of the icons and text (Widget, not IconData or String) I have removed all other onTap callbacks because they can instead be done with a GestureDetector from the outside if really needed. I have also removed the swiping because it did not check which direction was swiped and cannot be used like material switch swiping. The switch will also no longer call onChanged in initState which was unecessary and caused assertions to trigger.

import 'package:flutter/material.dart';
import 'dart:ui';
import 'dart:math';

class RollingSwitch extends StatefulWidget {
  /// Rolling switch button.
  /// * [value] determines whether this switch is on or off.
  /// * [onChanged] is called when the user toggles the switch on or off.
  const RollingSwitch({
    super.key,
    required this.value,
    required this.onChanged,
    this.width = 100,
    this.height = 40,
    this.textOff,
    this.textOn,
    this.colorOn = Colors.green,
    this.colorOff = Colors.red,
    this.iconOff,
    this.iconOn,
    this.animationDuration = const Duration(milliseconds: 300),
  });

  /// Value of the switch.
  final bool value;

  /// Called when the switch value changes.
  final ValueChanged<bool> onChanged;

  /// The width of the button.
  final double width;

  /// The height of the button.
  final double height;

  /// Text displayed on the switch when in the "off" state.
  final Widget? textOff;

  /// Text displayed on the switch when in the "on" state.
  final Widget? textOn;

  /// Icon of the switch when in the "off" state.
  final Widget? iconOff;

  /// Icon of the switch when in the "on" state.
  final Widget? iconOn;

  /// Color of the switch when in the "on" state.
  final Color colorOff;

  /// Color of the switch when in the "off" state.
  final Color colorOn;

  /// The duration in which the button transitions states.
  final Duration animationDuration;

  @override
  State<RollingSwitch> createState() => _RollingSwitchState();
}

class _RollingSwitchState extends State<RollingSwitch>
    with SingleTickerProviderStateMixin {
  late AnimationController controller = AnimationController(
    vsync: this,
    duration: widget.animationDuration,
    value: widget.value ? 1 : 0,
  );
  late Animation<double> animation =
      CurvedAnimation(parent: controller, curve: Curves.easeInOut);
  double get animationValue => controller.value;

  @override
  void didUpdateWidget(covariant RollingSwitch oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (oldWidget.value != widget.value) {
      if (widget.value) {
        controller.forward();
      } else {
        controller.reverse();
      }
    }
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => AnimatedBuilder(
        animation: animation,
        builder: (context, child) {
          const Color contrastColor = Colors.white;
          Color transitionColor =
              Color.lerp(widget.colorOff, widget.colorOn, animationValue)!;
          return IconTheme(
            data: Theme.of(context).iconTheme.copyWith(
                  color: transitionColor,
                ),
            child: DefaultTextStyle(
              style: Theme.of(context).textTheme.bodyText2!.copyWith(
                    color: contrastColor,
                    fontWeight: FontWeight.bold,
                  ),
              child: GestureDetector(
                onTap: () => widget.onChanged(!widget.value),
                child: Container(
                  clipBehavior: Clip.antiAlias,
                  padding: const EdgeInsets.all(4),
                  width: widget.width,
                  height: widget.height,
                  decoration: ShapeDecoration(
                    color: transitionColor,
                    shape: const StadiumBorder(),
                  ),
                  child: LayoutBuilder(
                    builder: (context, constraints) {
                      return Stack(
                        alignment: Alignment.center,
                        fit: StackFit.passthrough,
                        children: [
                          Positioned(
                            right: 0,
                            child: Transform.translate(
                              offset: Offset(10 * animationValue, 0),
                              child: Opacity(
                                opacity: 1 - animationValue,
                                child: Container(
                                  padding:
                                      const EdgeInsets.symmetric(horizontal: 4),
                                  child: widget.textOff ?? const Text('Off'),
                                ),
                              ),
                            ),
                          ),
                          Positioned(
                            left: 0,
                            child: Transform.translate(
                              offset: Offset(10 * (1 - animationValue), 0),
                              child: Opacity(
                                opacity: animationValue,
                                child: Container(
                                  padding:
                                      const EdgeInsets.symmetric(horizontal: 4),
                                  child: widget.textOn ?? const Text('On'),
                                ),
                              ),
                            ),
                          ),
                          Row(
                            children: [
                              Transform.translate(
                                offset: Offset(
                                  (constraints.maxWidth - widget.height) *
                                      animationValue,
                                  0,
                                ),
                                child: Transform.rotate(
                                  angle: lerpDouble(0, 2 * pi, animationValue)!,
                                  child: Container(
                                    height: widget.height,
                                    width: widget.height,
                                    decoration: const BoxDecoration(
                                      shape: BoxShape.circle,
                                      color: contrastColor,
                                    ),
                                    child: Stack(
                                      alignment: Alignment.center,
                                      fit: StackFit.passthrough,
                                      children: [
                                        Opacity(
                                          opacity: 1 - animationValue,
                                          child: widget.iconOff ??
                                              const Icon(Icons.flag),
                                        ),
                                        Opacity(
                                          opacity: animationValue,
                                          child: widget.iconOn ??
                                              const Icon(Icons.check),
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ],
                      );
                    },
                  ),
                ),
              ),
            ),
          );
        },
      );
}

The size of the switch is too big, can' t lower down its height and width. If I do try to lessen them by wrapping them inside the container then things get squeezed.

LiteRollingSwitch _buttom() { return LiteRollingSwitch(

value: poput, textOn: 'Disponible', textOff: 'Ocupado', colorOn: Colors.greenAccent[700], colorOff: Colors.redAccent[700], iconOn: Icons.done, iconOff: Icons.remove_circle_outline, textSize: 15.0, onChanged: (bool valor){ setState(() { poput = valor; });

},

); }

y sin el setState no hace nada pero si esta cambiando el valor del value

Add new functionality in the code and divide the code into multiple widget for a little more readability. In addition to that, improve performance.

Add:

• height and Width support.
• Add AnimationController for color and opacity in-out. -AnimationBuilder for improve performance

Change:

• String TextOn and TextOff for TextWidget.
• value for initialStateRight.
• Change lerp and clamp math calculation to the Animation, to improve performance and Curve animation.

Remove:

• SetState() to improve performance.
• Remove Opacity widget for FadeTransaction.
• Remove animation when initialState is false, the widget starts in the correct state.

https://blog.codemagic.io/how-to-improve-the-performance-of-your-flutter-app./

At first, thank you for the great package! Could you add a parameter to turn off rolling animation? I want just to have a custom icon on a knob, and don't want this fancy rolling.