CODEWITHSUNDEEP
androiduser-interfaceflutter
Mushaheed Syed
Mushaheed Syed

Reputation: 683

I want to make TextField scrollable in both horizontal & vertical direction

I want the ability to scroll multiline TextField in both horizontal or vertical direction. Currently, the Scrollable widget used by EditableText only allows scrolling in one direction i.e AxisDirection.down when multiline. My problem is it wraps overflowing text which is understandable but I want to scroll not wrap text.

I've tried diagonal_scrollview but it doesn't work for TextField properly. Is there another way to achieve this effect?

My Screen layout looks like this: flutter_02 The Layout is roughly like: Scaffold -> body: NestedScrollView body: MyCustomTextField -> Column[ConstrainedBox -> ListView.builder, Expanded -> EditableText]

Upvotes: 1

Views: 2317

Answers (2)

MD. Saffan Alvy
MD. Saffan Alvy

Reputation: 337

Well, for vertical scroll, I just wrapped the TextField with a SingleChildScrollView widget and set the scrollDirection: Axis.vertical. That does the work for me. However, I put maxLines of the text field to 6 because that fixed size suits my app's layout.

Upvotes: 0

Spatz
Spatz

Reputation: 20118

If you limit the maximum width of TextField to some fairly large value, you can wrap all that with SingleChildScrollView with enabled horizontal scroll direction:

        SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: ConstrainedBox(
            constraints: BoxConstraints.expand(width: 1000),
            child: TextField(
              maxLines: null,
              // controller and etc.
            ),
          ),
        )

Another solution (based on IntrinsicWidth widget):

        SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: IntrinsicWidth(
            stepWidth: 1000,
            child: TextField(
              maxLines: null,
              // controller and etc.
            ),
          ),
        )

stepWidth: 1000 prevents TextField with empty content from collapsing.

However, there are some consequences when using the IntrinsicWidth widget:

This class is relatively expensive, because it adds a speculative layout pass before the final layout phase. Avoid using it where possible. In the worst case, this widget can result in a layout that is O(N²) in the depth of the tree.

Upvotes: 5

Related Questions