textFieldStory top-level property

Implementation

Story textFieldStory = Story(
  name: 'Text Field',
  builder: (context) {
    final label = context.knobs.text(label: 'Label', initial: 'Input Label');
    final placeholder =
        context.knobs.text(label: 'Placeholder', initial: 'Enter text');
    final helperText = context.knobs
        .text(label: 'Helper Text', initial: 'This is some helper text');
    final errorMessage = context.knobs
        .text(label: 'Error Message', initial: 'This field is required');
    final labelAdditionalText = context.knobs
        .text(label: 'Additional Label Text', initial: '(Required)');

    final isPassword =
        context.knobs.boolean(label: 'Is Password', initial: false);
    final isEnabled = context.knobs.boolean(label: 'Is Enabled', initial: true);
    final readOnly = context.knobs.boolean(label: 'Read Only', initial: false);
    final required = context.knobs.boolean(label: 'Required', initial: false);
    final autoCorrect =
        context.knobs.boolean(label: 'Auto Correct', initial: false);
    final showAdditionalText =
        context.knobs.boolean(label: 'Show Additional Text', initial: true);

    final inputType = context.knobs.options<TextInputType>(
      label: 'Input Type',
      options: [
        Option(label: 'Text', value: TextInputType.text),
        Option(label: 'Number', value: TextInputType.number),
        Option(label: 'Phone', value: TextInputType.phone),
        Option(label: 'Email', value: TextInputType.emailAddress),
      ],
      initial: TextInputType.text,
    );

    final textFieldShape = context.knobs.options(
      label: 'Text Field Shape',
      options: [
        Option(
            label: 'Rounded Rectangle', value: TextFieldShape.roundedRectangle),
        Option(label: 'Rectangle', value: TextFieldShape.rectangle),
        Option(label: 'Pilled', value: TextFieldShape.pilled),
      ],
      initial: TextFieldShape.roundedRectangle,
    );

    final textFieldVariant = context.knobs.options(
      label: 'Text Field Variant',
      options: [
        Option(label: 'Basic', value: TextFieldVariant.basic),
        Option(label: 'Phone Number', value: TextFieldVariant.phoneNumber),
        Option(label: 'Number Only', value: TextFieldVariant.numberOnly),
        Option(
            label: 'Horizontal Quantity',
            value: TextFieldVariant.horizontalQuantity),
        Option(
            label: 'Vertical Quantity',
            value: TextFieldVariant.verticalQuantity),
      ],
      initial: TextFieldVariant.basic,
    );

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

    final maxVisibleLines = context.knobs.sliderInt(
      label: 'Max Visible Lines',
      min: 1,
      max: 20,
      initial: 5,
    );

    final minVisibleLines = context.knobs.sliderInt(
      label: 'Min Visible Lines',
      min: 1,
      max: maxVisibleLines, // Restrict min to be at most max
      initial: 1,
    );

    final maxCharacters = context.knobs.sliderInt(
      label: 'Max Characters',
      min: 1,
      max: 700,
      initial: 100,
    );

    void _incrementQuantity() {
      _quantity++;
    }

    void _decrementQuantity() {
      if (_quantity > 1) _quantity--;
    }

    Widget _buildFlagWidget(String flagEmoji) {
      return Container(
        alignment: Alignment.center,
        child: Text(
          flagEmoji,
          style: TextStyle(fontSize: 13),
        ),
      );
    }

    return Container(
      width: MediaQuery.of(context).size.width * 0.8,
      child: DDSTextField(
        label: label,
        value: _quantity.toString(),
        shape: textFieldShape,
        variant: textFieldVariant,
        placeholder: placeholder,
        helperText: helperText,
        textWrap: true,
        // enableCustomSelection: true,
        // customSelectionHandleWidget: null,
        // textSelectionColor: Colors.yellow.withOpacity(0.3),
        // selectionHandleColor: Colors.red,
        // cursorColor: Colors.blue,
        errorMessage: errorMessage,
        isPassword: isPassword,
        isEnabled: isEnabled,
        readOnly: readOnly,
        autocorrect: autoCorrect,
        required: required,
        labelAdditionalText: showAdditionalText ? labelAdditionalText : null,
        minVisibleLines: minVisibleLines,
        maxVisibleLines: maxVisibleLines,
        maxCharacters: maxCharacters,
        charCountTextStyle: TextStyle(color: Colors.green),
        indicatorPosition: CharacterCountIndicatorPosition.inside,
        inputType: inputType,
        startIcon: hasStartIcon ? Icon(Icons.circle_outlined) : null,
        endIcon: hasEndIcon ? Icon(Icons.circle_outlined) : null,
        incrementIcon: hasStartIcon ? Icon(Icons.circle_outlined) : null,
        decrementIcon: hasEndIcon ? Icon(Icons.circle_outlined) : null,
        countryCodes: [
          CountryCodeData(
            code: '+1',
            flagWidget: _buildFlagWidget('🇺🇸'),
          ),
          CountryCodeData(
            code: '+91',
            flagWidget: _buildFlagWidget('🇮🇳'),
          ),
          CountryCodeData(
            code: '+44',
            flagWidget: _buildFlagWidget('🇬🇧'),
          ),
          CountryCodeData(
            code: '+22',
            flagWidget: _buildFlagWidget('🇸🇳'),
          ),
        ],
        onIncrementClick: () {
          _incrementQuantity();
          print(_quantity);
        },
        onDecrementClick: () {
          _decrementQuantity();
          print(_quantity);
        },
        onChanged: (value) {
          print(value);
        },
        onPhoneNumberChanged: (countryCode, phoneNumber) {
          print('Country: $countryCode, Phone: $phoneNumber');
        },
      ),
    );
  },
);