toggle

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

void main() => runApp(app);

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

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  bool onTapState = false;
  bool toggleState = false;

  Widget toggleBox({Widget child, bool tapState, bool toggleState}) => child
      .padding(all: 10)
      .constraints(height: 50, width: 90)
      .backgroundColor(
          toggleState
              ? tapState ? Colors.green[400] : Color(0xff46E387)
              : tapState ? Colors.red[600] : Colors.red,
          animate: true)
      .borderRadius(all: 30)
      .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)
      .alignment(Alignment.center);

  Widget innerCircle() => Styled.widget();

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

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

  @override
  Widget build(BuildContext context) {
    return toggleBox(
      child: circle(state: toggleState),
      tapState: onTapState,
      toggleState: toggleState,
    )
        .gestures(
          onTapChange: (state) => setState(() => onTapState = state),
          onTapUp: (_) => setState(() => toggleState = !toggleState),
        )
        .backgroundColor(toggleState ? Color(0xffEEF6F1) : Color(0xffF7EEEE), animate: true)
        .animate(Duration(milliseconds: 200), Curves.easeInOut);
  }
}