Uneditable textformfield with draggable text

I'm trying to create a TextFormField that takes it's value from some other logic instead of directly typing the text. If the user taps on this TextFormField, they'll be prompted to a new screen where they can select things from a list and their choice will be reflected back on the TextFormField. Now, the selection can be multiple hence the text may be longer than the TextFormField's width. Now I want to make the text inside it draggable so that the user can see their selection. My code for this TextFormField is like such.

GestureDetector(
  onTap: () => Navigator.pushNamed(context, NamedRoutes.breedScreenRoute),
  child: TextFormField(
    controller: controller,
    enabled: false,
    decoration: InputDecoration(
      suffixIcon: Padding(
        SvgPicture.asset(
          "assets/images/forwardArrow.svg",
          fit: BoxFit.scaleDown,
        )
      ),
      contentPadding:
          const EdgeInsets.symmetric(horizontal: 14.0, vertical: 15.0),
      focusedBorder: const UnderlineInputBorder(
        borderSide: BorderSide(color: Color(0xFFD9E2EC)),
      ),
      enabledBorder: const UnderlineInputBorder(
        borderSide: BorderSide(
          color: Color(0xFFD9E2EC),
        ),
      ),
      labelText: "Tell us more about the breed",
      labelStyle: TextStyle(
        fontSize: 14.0,
        color: Color(0xFF6E7191),
        fontWeight: FontWeight.w400,
      ),
    ),
  ),
);

If I want to drag the text, I need to enable the TextFormField. But then user will be able to type in it as well which I don't want. How can I achieve this?

CodePudding user response：

Set enabled: true, scrollPhysics: AlwaysScrollableScrollPhysics() and readOnly: true. And use onTap inside TextFormField instead of GestureDetector. User can scroll but can not edit it.

TextFormField(
    controller: controller,
    enabled: true,
    readOnly: true,
    scrollPhysics: AlwaysScrollableScrollPhysics(),
   onTap: () => Navigator.pushNamed(context,  NamedRoutes.breedScreenRoute),
    decoration: InputDecoration(
      suffixIcon: Padding(
        SvgPicture.asset(
          "assets/images/forwardArrow.svg",
          fit: BoxFit.scaleDown,
        )
      ),
      contentPadding:
          const EdgeInsets.symmetric(horizontal: 14.0, vertical: 15.0),
      focusedBorder: const UnderlineInputBorder(
        borderSide: BorderSide(color: Color(0xFFD9E2EC)),
      ),
      enabledBorder: const UnderlineInputBorder(
        borderSide: BorderSide(
          color: Color(0xFFD9E2EC),
        ),
      ),
      labelText: "Tell us more about the breed",
      labelStyle: TextStyle(
        fontSize: 14.0,
        color: Color(0xFF6E7191),
        fontWeight: FontWeight.w400,
      ),
    ),
);

CodePudding user response：

If you dont want user type in it, then why using the TextFormField()? Consider using Text() or use DropdownButton()