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,
),
),
);
Author by
jacob galam
Updated on December 29, 2022Comments
-
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
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
-
jacob galam over 2 yearsThanks you so much! :)