I want to add Scrollbar with TextFormField but when I scroll down I get an error. My Code
Scrollbar(
child: TextFormField(
maxLines: 4,
minLines: 1,
decoration: InputDecoration(
contentPadding: EdgeInsets.all(0.0),
border: InputBorder.none,
isDense: true // text form first
),
),
)
enter image description here
This will not add any Scrollbar but it will be Scrollable.
Container(
height: 60,
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.only(left: 15,right: 15,top: 10),
child: ListView(
children: <Widget>[
TextField(
minLines: 1,
maxLines: 5,
decoration: InputDecoration(
focusedBorder:OutlineInputBorder(
borderSide: BorderSide(color: Colors.black54,)
),
border: InputBorder.none,
isDense: true
),
)
],
),
),
Related
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:
I wanna add some padding between the right border of TextField and the scrollbar. How to get it?
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
How to solve this error?, i want to stack cursor tetxfield over keyboard.
Actually result
I want the result like this
I tried used stack widget but it's not work.
My source Code
Stack(
children: [
const Positioned.fill(
child: Image(
image: AssetImage('assets/images/background.png'),
repeat: ImageRepeat.repeat,
),
),
ListView.separated(
itemBuilder: (_, index) => const SizedBox(),
separatorBuilder: (_, __) => const SizedBox(
height: 8,
),
itemCount: 5,
reverse: true,
),
Positioned(
bottom: MediaQuery.of(context).viewInsets.bottom,
left: 0,
right: 0,
child: Container(
decoration: BoxDecoration(
color: context.theme.colorScheme.surface,
),
child: Row(
children: [
IconButton(
onPressed: () {},
icon: const Icon(
Icons.attachment_rounded,
color: kIconKeyboardChatColor,
),
),
const Expanded(
child: TextField(
decoration: InputDecoration(
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
hintText: 'Write a message...',
),
keyboardType: TextInputType.multiline,
textInputAction: TextInputAction.newline,
),
),
],
),
),
),
],
)
is other solution? I really appreciate your answer.
Try to add maxLines 6 and minLines 1.
TextField(
decoration: InputDecoration(
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
hintText: 'Write a message...',
textCapitalization: TextCapitalization.sentences,
maxLines: 6,
minLines: 1,
)
I want the blue lines not to disappear when it scrolls up.
The blue lines are related to OutlineInputBorder. But it stays inside of SingleChildScrollView widget. How can I do it?
related codes
Expanded(
child: Container(
constraints: BoxConstraints(maxHeight: 100),
margin: EdgeInsets.all(5.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.all(Radius.circular(20.0))),
child: SingleChildScrollView(
child: TextField(
controller: _textEditingController,
keyboardType: TextInputType.multiline,
maxLines: null,
autocorrect: true,
enableInteractiveSelection: true,
enableSuggestions: true,
textCapitalization:
TextCapitalization.sentences,
decoration: InputDecoration(
hintText: "Bir not ekleyin",
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(20.0)),
),
),
),
),
),
),
I solved the problem by putting container inside container. But I removed the OutlineInputBorder.
If you have a better solution, please let me know.
new codes
Expanded(
child: Container(
constraints: BoxConstraints(maxHeight: 100),
margin: EdgeInsets.all(5.0),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius:
BorderRadius.all(Radius.circular(20.0))),
child: Container(
margin: EdgeInsets.all(2.0),
padding: EdgeInsets.all(5.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.all(Radius.circular(18.0))),
child: SingleChildScrollView(
child: TextField(
controller: _textEditingController,
keyboardType: TextInputType.multiline,
maxLines: null,
autocorrect: true,
enableInteractiveSelection: true,
enableSuggestions: true,
textCapitalization:
TextCapitalization.sentences,
decoration: InputDecoration(
hintText: "Bir not ekleyin",
border: InputBorder.none,
// border: OutlineInputBorder(
// borderRadius:
// BorderRadius.all(Radius.circular(20.0)),
// ),
),
),
),
),
),
),
I want to show the data that the user has written into the TextField in the Container as a Text. While receiving data, I gave the Container a constant height and set maxLines: 10000 for the TextField, so as the user writes in without overflowing outside the Container, the text moves up inside the Container. Is there a structure where I can show output user data in this way? When i try to show output in same way, it doesn't show overflowed text, how i make it scrollable?
Here is user data receiving code:
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 4,
),
child: Container(
height: MediaQuery.of(context).size.height * 7 / 10,
decoration: BoxDecoration(
border: Border.all(
color: UserColorHelper.Blue,
width: 1,
),
borderRadius: BorderRadius.circular(4),
),
child: Padding(
padding: const EdgeInsets.all(2.0),
child: TextField(
decoration: InputDecoration.collapsed(
hintText: "Note here..."),
style: TextStyle(color: UserColorHelper.Light),
keyboardType: TextInputType.text,
maxLines: 10000,
textInputAction: TextInputAction.done,
autofocus: false,
onEditingComplete: () {},
),
),
),
),
Text_Input
use TextEditingController
add
controller: reasonController,
fix your code to :
final reasonController = TextEditingController();
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 4,
),
child: Container(
height: MediaQuery.of(context).size.height * 7 / 10,
decoration: BoxDecoration(
border: Border.all(
color: UserColorHelper.Blue,
width: 1,
),
borderRadius: BorderRadius.circular(4),
),
child: Padding(
padding: const EdgeInsets.all(2.0),
child: TextField(
controller: reasonController,
decoration: InputDecoration.collapsed(
hintText: "Note here..."),
style: TextStyle(color: UserColorHelper.Light),
keyboardType: TextInputType.text,
maxLines: 10000,
textInputAction: TextInputAction.done,
autofocus: false,
onEditingComplete: () {
print(reasonController.text);
},
),
),
),
),
get text from Controller
print(reasonController.text)
You can use overflow property of textfield(), do something like this,
overflow: TextOverflow.ellipsis,
OR
overflow: TextOverflow.fade,
I need a Text Area with an enforced maxLength of 250 chars and its label aligned with the hint text. My code is below.
However, the widget is rendering the text on top of the hint. Does anyone know a solution?
It's like if the counter widget forces the actual text field to move upwards.
TextField with maxLength = 250 and alignLabelWithHint = true
TextField(
expands: false,
minLines: null,
maxLines: null,
maxLengthEnforced: maxLengthEnforced,
maxLength: maxLength,
controller: controller,
onChanged: (String value){
print(value);
},
cursorColor: Colors.deepOrange,
keyboardType: keyboardType,
decoration: InputDecoration(
alignLabelWithHint: true,
labelText: text,
labelStyle: TextStyle(color: Colors.grey),
hintText: text,
prefixIcon: Container(
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 15.0),
child: Material(
elevation: 0,
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(30)),
child: Icon(
icon,
color: Colors.red,
),
),
),
],
),
),
border: InputBorder.none,
contentPadding: EdgeInsets.only(right: 10, top: 5, bottom: 5)),
)
The purpose of a hint is to disappear when the user start typing I tried your code and it worked with no problem.
TextField(
expands: false,
minLines: null,
maxLines: null,
maxLengthEnforced: true,
maxLength: 250,
// controller: controller,
onChanged: (String value) {
print(value);
},
cursorColor: Colors.deepOrange,
// keyboardType: keyboardType,
decoration: InputDecoration(
alignLabelWithHint: true,
labelText: "hi",
labelStyle: TextStyle(color: Colors.grey),
hintText: "hi",
prefixIcon: Container(
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 15.0),
child: Material(
elevation: 0,
color: Colors.white,
borderRadius:
BorderRadius.all(Radius.circular(30)),
child: Icon(
Icons.highlight,
color: Colors.red,
),
),
),
],
),
),
border: InputBorder.none,
contentPadding:
EdgeInsets.only(right: 10, top: 5, bottom: 5)),
),