I want to create a custom input field which matches some known strings and then changes the style and adds an onTap gesture when those text values are pressed (ideally using a modifier key to trigger the onTap - I'm using windows for this project - though I think I can figure this out on my own if I can get the rest of the system nailed down) dynamically as the user inputs text.

I've tried to research this, but most of the options I've seen seem to only want to change the style of the text, or don't seem to function as a dynamic text replacement.

One option was to extend TextEditingController and override the buildTextSpan function, but it's not clear to me that this provides a way to create onTap gestures for each individual block (or even blocks) of text.

Unfortunately, I can't provide any examples of what I've done to try this, because I'm not sure there's a predefined system that can accomplish this.

CodePudding user response：

you can try extended_text_field, with this, you can create your on reg text, such as @ or # with tap gesture:

class AtText extends SpecialText {
  static const String flag = "@";
  final int start;

  /// whether show background for @somebody
  final bool showAtBackground;

  AtText(TextStyle textStyle, SpecialTextGestureTapCallback onTap,
      {this.showAtBackground: false, this.start})
      : super(
          flag,
          " ",
          textStyle,
        );

  @override
  InlineSpan finishText() {
    TextStyle textStyle =
        this.textStyle?.copyWith(color: Colors.blue, fontSize: 16.0);

    final String atText = toString();

    return showAtBackground
        ? BackgroundTextSpan(
            background: Paint()..color = Colors.blue.withOpacity(0.15),
            text: atText,
            actualText: atText,
            start: start,

            ///caret can move into special text
            deleteAll: true,
            style: textStyle,
            recognizer: (TapGestureRecognizer()
              ..onTap = () {
                if (onTap != null) onTap(atText);
              }))
        : SpecialTextSpan(
            text: atText,
            actualText: atText,
            start: start,
            style: textStyle,
            recognizer: (TapGestureRecognizer()
              ..onTap = () {
                if (onTap != null) onTap(atText);
              }));
  }
}

CodePudding user response：

here is the custom Form field extends of StatelessWidget... it's one of the reusable components ways to create a dynamic Widget to use anywhere in your App...

if you looking to add more arguments (click on any properties then click Ctrl Q) to know the DataType of the property so you can define it then pass to the contractor

for Example, onSaved is a void Function() DataType and so on...

`class CustomFormField extends StatelessWidget {
  const CustomFormField(
      { 
      this.onSaved,
      required this.textInputType,
      required this.suffixIcon,
      this.obscureText,
      required this.validator,
        this.controller,Key? key}) : super (key: key);

  final void Function(String?)? onSaved;
  final TextInputType? textInputType;
  final Widget? suffixIcon;
  final bool? obscureText;
  final FormFieldValidator? validator;
  final TextEditingController? controller;


  @override
  Widget build(BuildContext context) {
    return TextFormField(
      validator: validator,
      keyboardType: textInputType,
      controller: controller,
      decoration: InputDecoration(
          suffixIcon: suffixIcon,
          floatingLabelBehavior: FloatingLabelBehavior.always,
          enabledBorder: _outlineInputBorder(),
      onSaved: onSaved,
      obscureText: obscureText ?? false,
    );
  }

  OutlineInputBorder _outlineInputBorder() {
    return OutlineInputBorder(
      borderRadius: BorderRadius.circular(20),
      borderSide: const BorderSide(color: Colors.black),
      gapPadding:  10,
    );
  }
}`