flutter - Convert text widget to text field widget on particular text click

Question

If user clicks on particular text it should be converted to text field and i need to get the input value from the user, so far i have added string into list using split and showing the list items using listview.

i have two doubts. 1.how can i convert text into textfield on particular text click. 2.if i retrun textfield in listview it takes full width, i could't wrap textfield inside container by giving width, since text width might change based on API response

any suggestion would be appreciated.

this is what i need to achieve

  String demoString = 'You might want to try eating more healthy food.';

  new Row(children: <Widget>[
              Expanded(
                  child: SizedBox(
                      height: 150.0,
                      child: ListView(
                        padding: EdgeInsets.all(20),
                        scrollDirection: Axis.horizontal,
                        children: demoString
                            .split(' ')
                            .map((String text) => Padding(
                                padding: const EdgeInsets.all(18.0),
                                child: Text(text)))
                            .toList(),
                      )))
            ])

question from:https://stackoverflow.com/questions/65887856/convert-text-widget-to-text-field-widget-on-particular-text-click

Answer 1

To be able to click and get a textfield you should create a little widget (for example) which will detect if he receive a click (gestureDetector / inkWell ...) and then change a widget by an other one.

For example, MySwapWidget will contain this idea :

MySwapWidget(
  selected: (default value, could be useful, false by default) true / false,
  childIfSelected: TextField(),
  childIfNotSelected: Text(),
)