控制 flutter 中 listview.builder 中文本字段的滚动

Question

I have created TextFields inside a ListView.builder . As the user submits, the value gets added to the valueList .

List valueList = [];

ListView.builder(
                itemBuilder: (context, index){
                  return Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: TextField(
                      keyboardType: TextInputType.number,
                      onSubmitted: (value) {
                        valueList.add(value);
                        print(valueList);
                      },
                    ),
                  );
                }),

What I want it to do is, when the user hits the submit button I want the scroll to move to the next TextField . There is FocusNode . But I can't seep to find how to implement it in a ListView.builder

Answer 1

You could use a controller on your ListView.builder and animate to a position, provided you know how far to scroll...

final ScrollController scrollcontroller = new Scrollcontroller();
final List valueList = [];

//...

ListView.builder(
  controller: scrollcontroller,

  itemBuilder: (context, index){
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: TextField(
        keyboardType: TextInputType.number,
        onSubmitted: (value) {
          valueList.add(value);

          double height_of_textfield = 20;
          // focus on next input then
          controller.animateTo(index * height_of_textfield, duration: /* some duration */, curve: Curves.easeOutCubic);
        },
      ),
    );
  }),
//...

This would work nice if you have consistent height across, other you would have to figure a way to calculate the scroll height to animate to...