swipeButtonStory top-level property

Implementation

Story swipeButtonStory = Story(
  name: 'Swipe Button',
  builder: (context) {
    final buttonText = context.knobs.text(
      label: 'Button Text',
      initial: 'Swipe Me',
    );

    final swipeShape = context.knobs.options(
      label: 'Swipe Button Shape',
      options: [
        Option(label: 'Pill', value: SwipeButtonShape.pill),
        Option(label: 'Rounded', value: SwipeButtonShape.rounded),
        Option(label: 'Rectangle', value: SwipeButtonShape.rectangle),
      ],
      initial: SwipeButtonShape.pill,
    );

    final buttonHeight = context.knobs.slider(
      label: 'Button Height',
      min: 40.0,
      max: 100.0,
      initial: 60.0,
    );

    final buttonWidth = context.knobs.slider(
      label: 'Button Width',
      min: 150.0,
      max: 400.0,
      initial: 250.0,
    );

    final thumbIcon = context.knobs.options<IconData>(
      label: 'Thumb Icon',
      options: [
        Option(label: 'Arrow Back', value: Icons.arrow_back),
        Option(label: 'Arrow Forward', value: Icons.arrow_forward),
        Option(label: 'Circle', value: Icons.circle),
      ],
      initial: Icons.arrow_forward,
    );

    final thumbPadding = context.knobs.slider(
      label: 'Thumb Padding',
      min: 0.0,
      max: 16.0,
      initial: 4.0,
    );

    final trackColor = context.knobs.options<Color>(
      label: 'Track Color',
      options: [
        Option(label: 'Blue', value: Colors.blue),
        Option(label: 'Red', value: Colors.red),
        Option(label: 'Green', value: Colors.green),
      ],
      initial: Colors.blue,
    );

    final thumbColor = context.knobs.options<Color>(
      label: 'Thumb Color',
      options: [
        Option(label: 'White', value: Colors.white),
        Option(label: 'Black', value: Colors.black),
        Option(label: 'Yellow', value: Colors.yellow),
      ],
      initial: Colors.black,
    );

    final bidirectional = context.knobs.boolean(
      label: 'Bidirectional Swipe',
      initial: false,
    );

    return Center(
      child: SizedBox(
        height: buttonHeight,
        width: buttonWidth,
        child: SwipeButton(
          shape: swipeShape,
          child: Text(
            buttonText,
            style: const TextStyle(color: Colors.white),
          ),
          activeTrackColor: trackColor,
          activeThumbColor: thumbColor,
          thumbPadding: EdgeInsets.all(thumbPadding),
          bidirectional: bidirectional,
          thumbBuilder: (isSwiped) => Icon(
            isSwiped ? Icons.arrow_back : thumbIcon,
            color: Colors.white,
          ),
          onSwipe: () => debugPrint('Button Swiped!'),
        ),
      ),
    );
  },
);