Flutter scrollbar on textfield

Question

I have full screen TextField that grow in size when the user added more lines/text. I want to add scrollbar for the user to know the size the TextField and where is he.

This is the code the my screen and TextField:

import 'package:flutter/material.dart';

class TextEditor extends StatefulWidget {
  TextEditor();
  @override
  _TextEditorState createState() => _TextEditorState();
}

class _TextEditorState extends State {
  TextEditingController _editTextController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    var scaffold = Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () => _backButton(),
        ),
        title: Text("File name"),
      ),
      body: _buildTextEditor(),
      resizeToAvoidBottomInset: true,
    );
    return scaffold;
  }

  Widget _buildTextEditor() {
    return TextField(
      autofocus: true,
      keyboardType: TextInputType.multiline,
      maxLines: null,
      autocorrect: true,
      onChanged: (s) => {},
      decoration: InputDecoration(
        border: InputBorder.none,
        isDense: true,
      ),
    );
  }

  _backButton() {}
}

This is what I have

This is what I want, the scrollbar on the right

I could not find a way to do this and I don't an expert on Flutter to know how to do this on my own

Admin · Answer

Fortunately, the TextField widget accepts a scroll controller. This can be used to generate a scrollbar. See the example below.

TextEditingController _editTextController = TextEditingController();

// Initialise a scroll controller.
ScrollController _scrollController = ScrollController();

Then, add it to the TextField widget and wrap this widget in a Scrollbar!

return Scrollbar(
  controller: _scrollController,
  isAlwaysShown: true,
  child: TextField(
    scrollController: _scrollController,
    autofocus: true,
    keyboardType: TextInputType.multiline,
    maxLines: null,
    autocorrect: true,
    onChanged: (s) => {},
    decoration: InputDecoration(
      border: InputBorder.none,
      isDense: true,
    ),
  ),
);

Flutter scrollbar on textfield

This is what I have

This is what I want, the scrollbar on the right

1 Answers