toggle

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

void main() => runApp(app);

final Widget app = MaterialApp(home: Scaffold(body: Toggle()));

class Toggle extends StatefulWidget {
  @override
  _ToggleState createState() => _ToggleState();
}

class _ToggleState extends State<Toggle> {
  bool onTapState = false;
  bool toggleState = false;

  Widget toggleBox({Widget child, bool tapState, bool toggleState}) => child
      .padding(all: 10)
      .constraints(height: 50, width: 90)
      .ripple(splashColor: Colors.white.withOpacity(0.1))
      .clipRRect(all: 30)
      .backgroundColor(toggleState ? Color(0xff46E387) : Colors.red,
          animate: true)
      .borderRadius(all: 30, animate: true)
      .boxShadow(
        color: toggleState
            ? Color(0xff46E387).withOpacity(0.3)
            : Colors.red.withOpacity(0.3),
        blurRadius: 15,
        offset: Offset(0, 15),
        animate: true,
      )
      .scale(tapState ? 0.95 : 1, animate: true)
      .scale(3);

  Widget circle({bool state}) => Styled.widget()
      // inner circle
      .backgroundColor(state ? Color(0xff46E387) : Colors.red, animate: true)
      .borderRadius(all: 6, animate: true)
      .constraints(width: state ? 0 : 12, height: 12, animate: true)
      .alignment(Alignment.center)

      // outer circle
      .backgroundColor(Colors.white)
      .borderRadius(all: 15)
      .constraints(width: state ? 10 : 30, height: 30, animate: true)
      .padding(right: state ? 10 : 0, animate: true)
      .alignment(
        state ? Alignment.centerRight : Alignment.centerLeft,
        animate: true,
      );

  @override
  Widget build(BuildContext context) {
    return toggleBox(
      child: circle(state: toggleState),
      tapState: onTapState,
      toggleState: toggleState,
    )
        .gestures(
          onTapChange: (state) => setState(() => onTapState = state),
          onTap: () => setState(() => toggleState = !toggleState),
        )
        .alignment(Alignment.center)
        .backgroundColor(
          toggleState ? Color(0xffEEF6F1) : Color(0xffF7EEEE),
          animate: true,
        )
        .animate(Duration(milliseconds: 300), Curves.easeOut);
  }
}