Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter TextField ScrollBar bottom margin

Tags:

flutter

When I insert a multi-line TextField inside the ScrollBar, then add a lot of lines, then scroll it to the end, the rewind line on the right side does not reach the end. Why?

Flutter EditField and ScrollBar

Widget _buildTextField() {
controller = TextEditingController(
  text: text,
);
controller.addListener(_onTextChanged);
return Scrollbar(
  child: TextField(
    style: Styles.headlineRegular(color: ThemeColors.blackText),
    controller: controller,
    maxLines: widget.maxLines,
    minLines: widget.minLines,
    keyboardType: TextInputType.multiline,
    decoration: InputDecoration(
      fillColor: ThemeColors.veryLightGray,
      filled: true,
      hintStyle: Styles.headlineRegular(color: ThemeColors.darkGray),
      hintText: widget.hintText,
      enabledBorder: _buildBorder(ThemeColors.lightGray),
      focusedBorder: _buildBorder(ThemeColors.darkGray),
    ),
  ),
);}
like image 906
gc986 Avatar asked May 28 '26 14:05

gc986


1 Answers

Add contentPadding: EdgeInsets.zero inside the IntputDecoration, it will remove that scrollbar padding.
Then you can wrap everything in a Padding Widget without messing the scrollbar.

Widget _buildTextField() {
    controller = TextEditingController(
        text: text,
    );
    controller.addListener(_onTextChanged);

    return Scrollbar(
        child: TextField(
            style: Styles.headlineRegular(color: ThemeColors.blackText),
            controller: controller,
            maxLines: widget.maxLines,
            minLines: widget.minLines,
            keyboardType: TextInputType.multiline,
            decoration: InputDecoration(
                contentPadding: EdgeInsets.zero, // <----- ADD THIS LINE
                fillColor: ThemeColors.veryLightGray,
                filled: true,
                hintStyle: Styles.headlineRegular(color: ThemeColors.darkGray),
                hintText: widget.hintText,
                enabledBorder: _buildBorder(ThemeColors.lightGray),
                focusedBorder: _buildBorder(ThemeColors.darkGray),
            ),
        ),
    );
}
like image 161
MinD Avatar answered May 31 '26 22:05

MinD