How can I add or enable a Position Indicator in SingleChildScrollView

Question

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

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.

Answer 1

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!

Answer 2

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(...

Answer 3

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;
}