Flutter scrollbar on textfield

3,270

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,
    ),
  ),
);
Share:
3,270
jacob galam
Author by

jacob galam

Updated on December 29, 2022

Comments

  • jacob galam
    jacob galam 10 months

    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<TextEditor> {
      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

    What I have

    This is what I want, the scrollbar on the right

    What I want

    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

  • jacob galam
    jacob galam over 2 years
    Thanks you so much! :)