buttonStory top-level property

Implementation

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

    final buttonShapeStory = context.knobs.options(
      label: 'Button Shape',
      options: [
        Option(label: 'Rounded Rectangle', value: 'roundedRectangle'),
        Option(label: 'Rectangle', value: 'Rectangle'),
        Option(label: 'Pilled', value: 'Pilled'),
      ],
      initial: 'Rectangle',
    );

    final buttonTypeStory = context.knobs.options(
      label: 'Button Type',
      options: [
        Option(label: 'Primary', value: ButtonType.primary),
        Option(label: 'Secondary', value: ButtonType.secondary),
        Option(label: 'Tertiary', value: ButtonType.tertiary),
        Option(label: 'Icon Button', value: ButtonType.iconButton),
      ],
      initial: ButtonType.primary,
    );

    final buttonSizeStory = context.knobs.options(
      label: 'Button Size',
      options: [
        Option(label: 'Small', value: ButtonSize.small),
        Option(label: 'Medium', value: ButtonSize.medium),
        Option(label: 'Large', value: ButtonSize.large),
      ],
      initial: ButtonSize.medium,
    );

    final isDisabled = context.knobs.boolean(label: 'Disabled', initial: false);
    final isLoading = context.knobs.boolean(label: 'Loading', initial: false);

    final hasStartIcon =
        context.knobs.boolean(label: 'Show Start Icon', initial: false);
    final hasEndIcon =
        context.knobs.boolean(label: 'Show End Icon', initial: false);

    final primaryButtonBackgroundColor = context.knobs.options(
      label: 'Primary Button Background Color',
      initial: Color(0xFFF15A29),
      options: const [
        Option(label: 'Green', value: Colors.green),
        Option(label: 'Blue', value: Colors.blue),
        Option(label: 'Red', value: Color(0xFFF15A29)),
      ],
    );

    final secondaryButtonBackgroundColor = context.knobs.options(
      label: 'Secondary Button Background Color',
      initial: Colors.white,
      options: const [
        Option(label: 'Green', value: Colors.transparent),
        Option(label: 'Blue', value: Colors.red),
        Option(label: 'Red', value: Colors.white),
      ],
    );

    final iconButtonBackgroundColor = context.knobs.options(
      label: 'Icon Button Background Color',
      initial: Color(0xFFE0005E),
      options: const [
        Option(label: 'Pink', value: Color(0xFFE0005E)),
        Option(label: 'Blue', value: Colors.red),
        Option(label: 'Red', value: Colors.white),
      ],
    );

    final iconButtonBorderColor = context.knobs.options(
      label: 'Icon Button Border Color ',
      initial: Color(0xFFFFC3CE),
      options: const [
        Option(label: 'Pink', value: Color(0xFFFFC3CE)),
        Option(label: 'Blue', value: Colors.red),
        Option(label: 'Red', value: Colors.white),
      ],
    );

    final disabledIconButtonBackgroundColor = context.knobs.options(
      label: 'Icon Button Disabled Background Color',
      initial: Colors.white,
      options: const [
        Option(label: 'Green', value: Colors.transparent),
        Option(label: 'Blue', value: Colors.red),
        Option(label: 'Red', value: Colors.white),
      ],
    );

    final disabledPrimaryButtonBackgroundColor = context.knobs.options(
      label: 'Disabled Primary Button Background Color',
      initial: Color(0x66F15A29),
      options: const [
        Option(label: 'Green', value: Colors.blue),
        Option(label: 'Blue', value: Color(0x66F15A29)),
        Option(label: 'Red', value: Colors.greenAccent),
      ],
    );

    final disabledSecondaryButtonBackgroundColor = context.knobs.options(
      label: 'Disabled Secondary Button Background Color',
      initial: Colors.white,
      options: const [
        Option(label: 'Green', value: Colors.yellowAccent),
        Option(label: 'Blue', value: Colors.white),
        Option(label: 'Red', value: Colors.blueGrey),
      ],
    );

    final primaryButtonTextColor = context.knobs.options(
      label: 'Primary Button Text Color',
      initial: Colors.white,
      options: const [
        Option(label: 'Green', value: Colors.red),
        Option(label: 'Blue', value: Colors.white),
        Option(label: 'Red', value: Colors.green),
      ],
    );

    final secondaryButtonTextColor = context.knobs.options(
      label: 'Secondary Button Text Color',
      initial: Color(0xFFF15A29),
      options: const [
        Option(label: 'Green', value: Color(0xFFF15A29)),
        Option(label: 'Blue', value: Colors.black),
        Option(label: 'Red', value: Colors.green),
      ],
    );

    final disabledPrimaryButtonTextColor = context.knobs.options(
      label: 'Disabled Primary Button Text Color',
      initial: Colors.white,
      options: const [
        Option(label: 'Green', value: Color(0xFFF15A29)),
        Option(label: 'Blue', value: Colors.black),
        Option(label: 'Red', value: Colors.white),
      ],
    );

    final disabledSecondaryButtonTextColor = context.knobs.options(
      label: 'Disabled Secondary Button Text Color',
      initial: Color(0x66F15A29),
      options: const [
        Option(label: 'Green', value: Color(0x66F15A29)),
        Option(label: 'Blue', value: Colors.green),
        Option(label: 'Red', value: Colors.pink),
      ],
    );

    final width = context.knobs.slider(
      label: 'Width',
      min: 100,
      max: 400,
      initial: 266,
    );

    final height = context.knobs.slider(
      label: 'Height',
      min: 20,
      max: 200,
      initial: 56,
    );

    ButtonShape shape = ButtonShape.rectangle;
    switch (buttonShapeStory) {
      case 'roundedRectangle':
        shape = ButtonShape.roundedRectangle;
        break;
      case 'Rectangle':
        shape = ButtonShape.rectangle;
        break;
      case 'Pilled':
        shape = ButtonShape.pilled;
        break;
      default:
        shape = ButtonShape.rectangle;
    }

    final buttonBorderWidth = context.knobs.slider(
      label: 'Button Border Width',
      min: 1.0,
      max: 40.0,
      initial: 10.0,
    );

    final iconButtonSize = context.knobs.slider(
      label: 'Icon Button Size',
      min: 10.0,
      max: 150.0,
      initial: 80.0,
    );

    return Center(
      child: DDSButton(
        label: buttonText,
        shape: shape,
        type: buttonTypeStory,
        height: height,
        iconButtonSize: iconButtonSize,
        size: buttonSizeStory,
        borderWidth: buttonBorderWidth,
        disabled: isDisabled,
        startIcon: hasStartIcon
            ? Icon(
                Icons.circle_outlined,
                size: 10,
              )
            : null,
        endIcon: hasEndIcon
            ? Icon(
                Icons.circle_outlined,
                size: 10,
              )
            : null,
        iconButton: Icon(
          Icons.close,
          size: 32,
          color: Colors.white,
        ),
        startIconColor: Colors.purple,
        startIconPressedColor: Colors.amber,
        endIconPressedColor: Colors.blue,
        iconButtonIconPressedColor: Colors.cyan,
        iconButtonBackgroundColor: iconButtonBackgroundColor,
        iconButtonBorderColor: iconButtonBorderColor,
        disabledIconButtonBackgroundColor: disabledIconButtonBackgroundColor,
        primaryButtonBackgroundColor: primaryButtonBackgroundColor,
        secondaryButtonBackgroundColor: secondaryButtonBackgroundColor,
        disabledPrimaryButtonBackgroundColor:
            disabledPrimaryButtonBackgroundColor,
        disabledSecondaryButtonBackgroundColor:
            disabledSecondaryButtonBackgroundColor,
        primaryButtonTextColor: primaryButtonTextColor,
        secondaryButtonTextColor: secondaryButtonTextColor,
        disabledPrimaryButtonTextColor: disabledPrimaryButtonTextColor,
        disabledSecondaryButtonTextColor: disabledSecondaryButtonTextColor,
        labelPressedColor: Colors.greenAccent,
        width: width,
        onPressed: () {},
        loading: isLoading,
        // loaderThickness: 2,
        // loaderLabelSpacing: 2,
        gradientBackgroundColor: LinearGradient(
          colors: [Colors.purple, Colors.blue],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
        labelStyle: TextStyle(fontWeight: FontWeight.w600),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.2),
            blurRadius: 50,
            spreadRadius: 5,
            offset: Offset(0, 10),
          ),
        ],
      ),
    );
  },
);