15

I need a scroll position indicator for my multi line TextField which is wrapped in a SingleChildScrollView.

enter image description here

There is more text in the text field than is visible and I it's not obvious that there is some text hidden and where it's hidden (top or bottom)

This is Whatsup. The TextField shows a scrollbar. I would like to do the same thing. enter image description here

2
  • 1
    Example ? Not clear Jan 16, 2018 at 10:19
  • The Textfield above has many lines of content but there only a few visible. In order for the user to understand that there is much more content I would like to show a Scrollbar on the right hand site of the TextField.
    – Ride Sun
    Jan 16, 2018 at 23:07

4 Answers 4

31

Just wrap your TextField widget in a ScrollBar widget.

Example:

new Container(
  height: 100.0,
  child: new Scrollbar(
    child: new TextField(
      maxLines: null,
    )
  ),
)

For more info on ScrollBar widget check out the docs here

Hope that helped!

1
  • 1
    this did not work for me without setting a common ScrollController on the Scrollbar and the child in my case a ListView from a Builder.
    – DooMMasteR
    May 19, 2022 at 8:14
14

Thanks for the answer above:The SingleChildScrollView gave me the desired behavior I was looking for combined with the LayoutBuilder and and the constraints: new BoxConstraints:

    Widget _renderTextField() => new LayoutBuilder(
      builder: (context, constraints) => new Column(children: <Widget>[
            new Container(
                    child: new Container(
                    margin: const EdgeInsets.only(
                      right: 5.0,
                    ),
                    child: new Container(
                        constraints: new BoxConstraints(maxHeight: 200.0,
                        maxWidth: constraints.maxWidth),
                        child: new Scrollbar(child: new SingleChildScrollView(
                                scrollDirection: Axis.vertical,
                                reverse: true,
                                child: new TextField(...
6

for SingleChildScrollView just wrap it in RawScrollbar

body: RawScrollbar(
        child: SingleChildScrollView(
                           child: ...
                                    ),
                  ),
2

I create a dialog with a form and a child container with a width and height of 450 and 500. I use a layoutbuilder to create a textboxform whose max height is 200 with a scrollbar and singlechildscrollview. The row is expanded to take the all the width of the widget. I have two material buttons with action included.

 String _myvalue;
 final _myTextController = TextEditingController();
 final _formKey = GlobalKey<FormState>();
 final _scrollController = ScrollController();

  Widget build(BuildContext context) {
       return Dialog(
          child: Form(
             key: _formKey,
             autovalidateMode: AutovalidateMode.disabled,
             child: Container(
                 width: 450,
                 height: 500,
                child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                  Align(
                    alignment: Alignment.center,
                    child: Text(
                      "Some Text",
                      style: Head2Style,
                    ),
                  ),
                  Divider(height: 50),
                  LayoutBuilder(
                      builder: (context, constraints) => Container(
                          constraints: new BoxConstraints(
                              maxHeight: 200.0,
                              maxWidth: constraints.maxWidth),
                          child: Scrollbar(
                              isAlwaysShown: true,
                              controller: _scrollController,
                              child: SingleChildScrollView(
                                  controller: _scrollController,
                                  child: SizedBox(
                                      width: 400,
                                      child: TextFormField(
                                          decoration: InputDecoration(
                                              icon: Icon(Icons.note),
                                              hintText: "My Text"),
                                          autocorrect: true,
                                          controller: _myTextController,
                                          keyboardType:
                                              TextInputType.multiline,
                                          maxLines: null,
                                          maxLength: 1000,
                                          onChanged: (String value) {
                                            setState(() {
                                              _myvalue = value;
                                            });
                                          })))))),
                  Expanded(
                      child: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: [
                      ElevatedButton(
                        onPressed: () {
                          if (_formKey.currentState.validate()) {
                            _do_something(context);
                          }
                        },
                        child: Text("Do something"),
                      ),
                      ElevatedButton(
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                        child: Text("Cancel"),
                      )
                    ],
                  )),
      ])//column
      )//container
   )//form
   )//dialog;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.