Indicator hide DecoratedBox hide while dragging

[peterLam2]

Problem : Indicator hide DecoratedBox hide while dragging Description : using the custom toggle switch setting with the following code

class _HomePAgeSliderState extends State<HomePageSlider> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return CustomAnimatedToggleSwitch<bool>(
      current: tripStart,
      values: [false, true],
      dif: double.maxFinite,
      // left right 3
      padding: const EdgeInsets.symmetric(horizontal: 3.0),
      indicatorSize: const Size.square(42.0),
      animationDuration: const Duration(milliseconds: 200),
      animationCurve: Curves.linear,
      onChanged: (b) => setState(() => tripStart = b),
      //  Container for The Another Side  Not in used
      iconBuilder: (context, local, global) {
        return const SizedBox();
      },
      defaultCursor: SystemMouseCursors.click,
      onTap: () => setState(() => tripStart = !tripStart),
      iconsTappable: false,

      // container for the Switch Button
      foregroundIndicatorBuilder: (context, global) {
        return SizedBox.fromSize(
          size: global.indicatorSize,
          child: DecoratedBox(
              decoration: BoxDecoration(
                color: Colors.white,
                //Color.lerp(Colors.white, Colors.blue, global.position),
                borderRadius: BorderRadius.all(Radius.circular(24.0)),
              ),
              child: AnimatedContainer(
                // top 5 left 5 bottom 5 right 6
                padding: const EdgeInsets.fromLTRB(5.0, 5.0, 6.0, 5.0),
                duration: const Duration(milliseconds: 200),
                child: Icon(
                  tripStart ? Icons.close : Icons.arrow_forward_ios,
                  color: Color.lerp(Colors.blue, Colors.black, global.position),
                ),
              )),
        );
      },

      // container for the slider
      wrapperBuilder: (context, global, child) {
        return Stack(
          alignment: Alignment.center,
          children: [
            Positioned(
                left: 0.0,
                right: 0.0,
                height: 48,
                child: DecoratedBox(
                  decoration: BoxDecoration(
                    gradient: tripStart
                        ? SPAColor.getGradientColor(['FFFFFF', '222222'])
                        : SPAColorSet.PrimaryGradient.gradient,
                    // color: Color.lerp(SPAColor.getColorFromHex('2A7DDE'),
                    //     SPAColor.getColorFromHex('5FCFFF'), global.position),
                    borderRadius: const BorderRadius.all(Radius.circular(24.0)),
                  ),
                )),
            child,
            Container(
              // padding right 56 left 24 top bottom 10
              padding: tripStart
                  ? const EdgeInsets.fromLTRB(24.0, 10.0, 56.0, 10.0)
                  : const EdgeInsets.fromLTRB(56.0, 10.0, 24.0, 10.0),
              child: Text(
                tripStart ? '截車中' : '立即Call車',
                style: TextStyle(
                  color: Colors.white,
                  //Color.lerp(Colors.black, Colors.white, global.position),
                  fontSize: 16.0,
                  fontFamily: 'NotoSansHK',
                  fontWeight: FontWeight.w600,
                ),
              ),
            )
          ],
        );
      },
    );

Problem Screen Shot : https://vimeo.com/783189742

[peterLam2]

and the DecoratedBox indicator not showing on first start up applications

[maeddin]

I'll take a look at it in a few hours. Where is SPAColor and SPAColorSet implemented?

[peterLam2]

It is a custom colour library,it just turn the hex code into colour, convert two different colour into gradient

[maeddin]

I'll take a closer look at the bug, but for your use case, doesn't it make more sense to use my other package action_slider?

[peterLam2]

Actually I want a switch button that have tap and dragging event , thanks for the advice anyway

[maeddin]

I've fixed the problem. You have to use double.infinity instead of double.maxFinite for dif and set the current version in your pubspec.yaml:

animated_toggle_switch:
    git: https://github.com/SplashByte/animated_toggle_switch.git

It would be great if you verify that the problem is indeed fixed.

[maeddin]

Here is an optimized version of your widget. I have added a transition between the texts:

class _HomePageSliderState extends State<HomePageSlider> {
  bool tripStart = false;

  @override
  Widget build(BuildContext context) {
    return CustomAnimatedToggleSwitch<bool>(
      current: tripStart,
      values: [false, true],
      dif: double.infinity,
      iconArrangement: IconArrangement.overlap,
      // left right 3
      padding: const EdgeInsets.symmetric(horizontal: 3.0),
      indicatorSize: const Size.square(42.0),
      animationDuration: const Duration(milliseconds: 200),
      animationCurve: Curves.linear,
      onChanged: (b) => setState(() => tripStart = b),
      //  Container for The Another Side  Not in used
      iconBuilder: (context, local, global) {
        return Center(
          child: Opacity(
            opacity: local.value ? 1.0 - global.position : global.position,
            child: Text(
            local.value ? '立即Call車' : '截車中',
            style: TextStyle(
              color: Colors.white,
              //Color.lerp(Colors.black, Colors.white, global.position),
              fontSize: 16.0,
              fontFamily: 'NotoSansHK',
              fontWeight: FontWeight.w600,
            ),
          ),),
        );
      },
      defaultCursor: SystemMouseCursors.click,
      onTap: () => setState(() => tripStart = !tripStart),
      iconsTappable: false,

      // container for the Switch Button
      foregroundIndicatorBuilder: (context, global) {
        return SizedBox.fromSize(
          size: global.indicatorSize,
          child: DecoratedBox(
              decoration: BoxDecoration(
                color: Colors.white,
                //Color.lerp(Colors.white, Colors.blue, global.position),
                borderRadius: BorderRadius.all(Radius.circular(24.0)),
              ),
              child: AnimatedContainer(
                // top 5 left 5 bottom 5 right 6
                padding: const EdgeInsets.fromLTRB(5.0, 5.0, 6.0, 5.0),
                duration: const Duration(milliseconds: 200),
                child: Icon(
                  tripStart ? Icons.close : Icons.arrow_forward_ios,
                  color: Color.lerp(Colors.blue, Colors.black, global.position),
                ),
              )),
        );
      },
      // container for the slider
      wrapperBuilder: (context, global, child) {
        return Stack(
          alignment: Alignment.center,
          children: [
            Positioned(
                left: 0.0,
                right: 0.0,
                height: 48,
                child: DecoratedBox(
                  decoration: BoxDecoration(
                    gradient: Gradient.lerp(
                       SPAColorSet.PrimaryGradient.gradient,
                       SPAColor.getGradientColor(['FFFFFF', '222222']),
                       global.position
                    ),
                    // color: Color.lerp(SPAColor.getColorFromHex('2A7DDE'),
                    //     SPAColor.getColorFromHex('5FCFFF'), global.position),
                    borderRadius: const BorderRadius.all(Radius.circular(24.0)),
                  ),
                )),
            child,
          ],
        );
      },
    );
  }}

[peterLam2]

Thanks for the help, the problem fixed , the iconBuilder will as a child render in the wrapperBuilder did i understand the situation correctly?

[peterLam2]

I close the Issue now , Thanks for your help

[maeddin]

@peterLam2 Thanks for reporting the issue. Yes, the results of the iconBuilder are part of the child in the wrapperBuilder 👍

[maeddin]

@peterLam2 I don't know if this helps you, but I added two new parameters to AnimatedToggleSwitch.dual. Maybe you can replace your custom switch with AnimatedToggleSwitch.dual now. You can now disable the rolling animation and set a gradient for the background.

[peterLam2]

Good to hear that 🤠 i will check that tomorrow