How to add padding between TextField border and the scroll bar in Flutter?

user_955594 0
Viewed 200

This is my current code:

  Widget _buildContent(TextStyle _textStyle6) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Focus(
          onFocusChange: (hasFocus) => setState(() => focused = hasFocus),
          child: widget.scrollController != null 
            ? Scrollbar(
              controller: widget.scrollController,
              thickness: 10,
              trackVisibility: true,
              thumbVisibility: true,
              radius: Radius.circular(8),
              child: _buildTextField(_textStyle6),
            ) 
            : _buildTextField(_textStyle6),
        ),
        if (widget.outerHintText != null) Padding(
          padding: const EdgeInsets.only(left: 18, top: 6),
          child: Text(widget.outerHintText!, style: widget.outerHintStyle),
        ),
      ],
    );
  }

  Widget _buildTextField(TextStyle _textStyle6) {
    return TextFormField(
      style: _textStyle6,
      maxLength: widget.maxLength,
      minLines: widget.minLines,
      maxLines: widget.maxLines,
      keyboardType: widget.keyboardType,
      scrollController: widget.scrollController,
      // scrollPadding: EdgeInsets.all(30),
      decoration: InputDecoration(
        alignLabelWithHint: widget.alignLabelWithHint,
        border: OutlineInputBorder(),
        enabledBorder: OutlineInputBorder(
          borderSide: BorderSide(color: Colors.grey.shade300, width: 0.8),
        ),
        focusedBorder: OutlineInputBorder(
          borderSide: BorderSide(color: Color(0xff1a73e8), width: 2),
        ),
        labelText: widget.label,
        labelStyle: TextStyle(color: focused ? Color(0xff1a73e8) : Colors.black),
        contentPadding: EdgeInsets.symmetric(horizontal: 18, vertical: 20),
        prefixIcon: widget.prefixIcon,
        prefixIconColor: widget.prefixIconColor,
        constraints: widget.constraints,
      ),
    );
  }

Widget returned like this:

enter image description here

I wanna add some padding between the right border of TextField and the scrollbar. How to get it?

flutter textfield scrollbar
1 Answers
Container(
    padding: const EdgeInsets.only(
      right: 10.0,
    ),
    decoration: BoxDecoration(
      color: Color(),
      border: Border.all(
        color: Color(),
      ),
    ),
    child: Scrollbar(
      thickness: 5.0,
      controller: _scrollController,
      trackVisibility: true,
      thumbVisibility: true,
      child: TextFormField(
        maxLines: 8,
        textCapitalization: TextCapitalization.words,
        scrollController: _scrollController,
        decoration: const InputDecoration(
          hintText: '....',
          hintStyle: TextStyles.bodyTextLight,
          isDense: true,
          border: InputBorder.none,
          filled: true,
          fillColor: Color(),
        ),
      ),
    ),
  ),

You can do something like this, wrap your textfield and scrollbar to a container and give that container the same border and background style to it which you are giving to the textfield. And give it padding on the right side of the container.

https://i.stack.imgur.com/B2XIg.png

user_122571770
Related