flutterdart

Overlay cursor cover the Textfield Border


i have a textfield which is custom but when we want to paste in the textfield, rounded white keep covering the border line of the textField, which i dont know why,

sample images

image

another image sample

is just suppose to show only the past at the top of the TextField not the rounded circle that cover the borderline at the bottom

here is the code

TextField(
          controller: widget.controller,
          // focusNode: _internalFocusNode,
          keyboardType: widget.keyboardType,
          obscureText: widget.obscureText,
          inputFormatters: widget.inputFormatters,
          onChanged: widget.onChanged,
          onTap: widget.onTap,
          readOnly: widget.readOnly,
          enabled: widget.enabled,
          maxLength: widget.maxLength,
          cursorColor: AppColors.brandColorDark,
          style: textStyle,
          decoration: InputDecoration(
            hintText: widget.hintText,
            hintStyle: inputDecorationTheme.hintStyle
                    ?.copyWith(fontWeight: FontWeight.w400) ??
                textTheme.bodyLarge
                    ?.copyWith(color: AppColors.hintColor, fontWeight: fw400),
            prefixIcon: widget.prefixIconAsset != null
                ? Padding(
                    padding: const EdgeInsets.symmetric(
                        horizontal: 12.0, vertical: 10.0),
                    child: SvgPicture.asset(widget.prefixIconAsset!,
                        colorFilter: ColorFilter.mode(
                            widget.enabled ? iconColor : Colors.grey.shade400,
                            BlendMode.srcIn),
                        width: 20.0,
                        height: 20.0))
                : (widget.icon != null
                    ? Padding(
                        padding: const EdgeInsets.symmetric(
                            horizontal: 12.0, vertical: 10.0),
                        child: Icon(widget.icon,
                            color: widget.enabled
                                ? iconColor
                                : Colors.grey.shade400,
                            size: 20.0))
                    : null),
            prefixIconConstraints:
                (widget.prefixIconAsset != null || widget.icon != null)
                    ? const BoxConstraints(minHeight: 40, minWidth: 40)
                    : null,
            suffixIcon: widget.suffixIconAsset != null
                ? IconButton(
                    icon: SvgPicture.asset(widget.suffixIconAsset!,
                        width: 20,
                        height: 20,
                        colorFilter: ColorFilter.mode(
                            widget.enabled ? iconColor : Colors.grey.shade400,
                            BlendMode.srcIn)),
                    onPressed: widget.enabled ? widget.onSuffixIconTap : null,
                    splashRadius: 20,
                  )
                : null,
            suffixIconConstraints: widget.suffixIconAsset != null
                ? const BoxConstraints(minHeight: 40, minWidth: 40)
                : null,
            filled: true,
            fillColor: widget.enabled
                ? (inputDecorationTheme.fillColor ?? AppColors.whiteColor)
                : AppColors.whiteColor,
            contentPadding: currentContentPadding,
            border: defaultBorder,
            enabledBorder: hasError ? errorBorder : defaultBorder,
            focusedBorder: hasError ? focusedErrorBorder : focusedBorder,
            errorBorder: errorBorder,
            focusedErrorBorder: focusedErrorBorder,
            disabledBorder: disabledBorder,
            errorText: widget.errorText,
            errorStyle: inputDecorationTheme.errorStyle ??
                TextStyle(color: errorColor, fontSize: 12),
            errorMaxLines: 2,
          ),
        ),

Solution

  • The teardrop shaped icon you see when editing text is text selection handle. The is the default behavior. It may not be possible to get rid of it as to my knowledge. You can change the color of the handle though. Here's the code:

    
    MaterialApp(
      textSelectionTheme: TextSelectionThemeData(
        selectionHandleColor: Colors.transparent,
      ),
    );
    
    

    Setting the color to Colors.transparent will make the selection handle invisible, but as it is still there, users can tap on it to show the context menu, hold and drag to move the edit cursor line. Instead of assigning the transparent color, you can chose any other visible colors if you choose.