flutter cupertino switch active color as gradient color inactive color should be default color

user_17124318 0
Viewed 155

im trying to make flutter cupertino active color as gradient color inactive color should be default color`

  final Color activeColor = AppColors.grey;

final Color iactive = AppColors.red;

ShaderMask(
                  child: CupertinoSwitch(
                    trackColor: AppColors.grey ,
                      activeColor: iactive,
                      value: userstatus,
                      onChanged: (value){
                        setState(() {
                          userstatus = value;
                          dealerstatus = !value;
                        },
                        );
                      }
                  ),
                  shaderCallback: (test) {
                    return LinearGradient(
                      colors: value
                          ?[iactive ,Colors.yellow
                      ]:[activeColor,activeColor],
                    ).createShader(test);
                  },)
dart flutter
1 Answers
class CustomSwitch extends StatefulWidget {
  final bool value;
  final ValueChanged<bool> onChanged;
  final Color activeColor;
  final Color inactiveColor;

  const CustomSwitch({
    Key key,
    this.value,
    this.onChanged,
    this.activeColor,
    this.inactiveColor = Colors.grey,
  }) : super(key: key);

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

class _CustomSwitchState extends State<CustomSwitch>
    with SingleTickerProviderStateMixin {
  Animation _circleAnimation;
  AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
        vsync: this, duration: const Duration(milliseconds: 120));
    _circleAnimation = AlignmentTween(
            begin: widget.value ? Alignment.centerRight : Alignment.centerLeft,
            end: widget.value ? Alignment.centerLeft : Alignment.centerRight)
        .animate(CurvedAnimation(
            parent: _animationController, curve: Curves.bounceInOut));
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animationController,
      builder: (context, child) {
        return InkWell(
          onTap: () {
            if (_animationController.isCompleted) {
              _animationController.reverse();
            } else {
              _animationController.forward();
            }
            widget.value == false
                ? widget.onChanged(true)
                : widget.onChanged(false);
          },
          child: Ink(
            width: 70.0,
            height: 34.0,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20.0),
                color: _circleAnimation.value == Alignment.centerLeft
                    ? Colors.grey
                    : widget.activeColor,
                gradient: _circleAnimation.value == Alignment.centerLeft
                    ? null
                    : orangeLinaer(-1.0, 0.0, 1, 0.0)),
            child: Padding(
              padding: EdgeInsets.only(
                top: 4.0,
                bottom: 4.0,
                right: 4.0,
                left: 4.0,
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  _circleAnimation.value == Alignment.centerRight
                      ? const Spacer()
                      : const Center(),
                  Align(
                    alignment: _circleAnimation.value,
                    child: Ink(
                      width: 26.0,
                      height: 26.0,
                      decoration: const BoxDecoration(
                        shape: BoxShape.circle,
                        color: Colors.white,
                      ),
                    ),
                  ),
                  _circleAnimation.value == Alignment.centerLeft
                      ? const Spacer()
                      : const Center(),
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}

LinearGradient orangeLinaer(double x1, double y1, double x2, double y2) {
  return LinearGradient(
    begin: Alignment(x1, y1),
    end: Alignment(x2, y2),
    colors: const [Color(0xffF8A170), Color(0xffFFCD61)],
  );
}
user_153981710
Related