I have the default font in a Flutter web app, but when typing into a TextFormField there seems to be something wrong. See images.
In the description field there is a space between something and new, but it doesn't show. And when I tap on a text the blue icon is doubled.
I will migrate all TextFormFields to one widget ... but now I have two in the app
TextFormField(
validator: (value) => value!.isEmpty
? 'Description can\'t be blank'
: null,
style: const TextStyle(
height: 1.5,
),
autocorrect: false,
autofocus: false,
controller: improveDescriptionController,
decoration: const InputDecoration(
labelText: 'Description',
contentPadding: EdgeInsets.only(
top: 10.0,
left: 10.0,
bottom: 10.0,
),
),
maxLines: 5,
minLines: 3,
obscureText: false,
),
and
TextFormField(
inputFormatters: [
LengthLimitingTextInputFormatter(limit),
],
// style: const TextStyle(
// height: 1.5,
// ),
autocorrect: false,
autofocus: false,
controller: controller,
decoration: InputDecoration(
labelText: label,
contentPadding: const EdgeInsets.only(
top: 10.0,
left: 10.0,
bottom: 10.0,
),
),
// obscureText: false,
),
Related
as you can see, there is a big empty space under UnderBoder, I dont know why it exists and how to remove?
here is my code:
TextFormField(
initialValue:
controller.eventTitle ?? widget.event.eventTitle,
textAlign: TextAlign.center,
style: mediumTextStyle(textColor: AppColors.sadColor),
// controller: _eventTitleController,
onChanged: (val) {
controller.getEventTitle(val);
},
decoration: InputDecoration(
isDense: true,
border: InputBorder.none,
contentPadding:
EdgeInsets.only(left: 16, top: 16, bottom: 8),
hintText: 'Event title *',
errorStyle: standardTextStyle(
textColor: AppColors.sadWarningColor),
hintStyle: standardTextStyle(
textColor: AppColors.sadColor.withOpacity(0.8)),
),
),
Thank you for your explanation!
Change the
from
contentPadding: EdgeInsets.only(left: 16, top: 16, bottom: 8),
to
contentPadding: EdgeInsets.only(left: 16, top: 0, bottom: 0, right: 16),
Full code
TextFormField(
initialValue:
controller.eventTitle ?? widget.event.eventTitle,
textAlign: TextAlign.center,
style: mediumTextStyle(textColor: AppColors.sadColor),
// controller: _eventTitleController,
onChanged: (val) {
controller.getEventTitle(val);
},
decoration: InputDecoration(
isDense: true,
border: InputBorder.none,
contentPadding:
EdgeInsets.only(left: 16, top: 0, bottom: 0, right: 16),
hintText: 'Event title *',
errorStyle: standardTextStyle(
textColor: AppColors.sadWarningColor),
hintStyle: standardTextStyle(
textColor: AppColors.sadColor.withOpacity(0.8)),
),
),
I have a text field in a modal sheet that is wrapped with a column. When I type text in the text field it grows horizontally instead of vertically, I've tried setting maxLines to null but it still behaves the same way. I want it to expand vertically.
showModalBottomSheet(
isScrollControlled: true,
context: context,
builder: (BuildContext context) {
return Padding(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context)
.viewInsets
.bottom), //keeps above keyboard
child: SizedBox(
height: 150,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
createSpace(1),
const TextField(
keyboardType: TextInputType.multiline,
autofocus: true,
maxLines: null,
decoration: InputDecoration(
contentPadding: EdgeInsets.only(left: 10),
border: InputBorder.none,
hintText: "Title",
),
),
const TextField(
style: TextStyle(height: 1),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding: EdgeInsets.only(left: 20),
hintText: "Description",
),
),
TextButton(onPressed: () {}, child: const Text("Save"))
],
),
),
);
});
Just add below code in TextField.
minLines: 1,
maxLines: null,
You need to set Size box width also. so that the line takes a constant width then goes to next line. you can also fix minLines and maxLines in TextField that can help to take max line
showModalBottomSheet(
isScrollControlled: true,
context: context,
builder: (BuildContext context) {
return Padding(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context)
.viewInsets
.bottom), //keeps above keyboard
child: SizedBox(
height: 150,
width: MediaQuery.of(context).size.width,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
createSpace(1),
const TextField(
keyboardType: TextInputType.multiline,
autofocus: true,
minLines: 1,
maxLines: 3,
decoration: InputDecoration(
contentPadding: EdgeInsets.only(left: 10),
border: InputBorder.none,
hintText: "Title",
),
),
const TextField(
style: TextStyle(height: 1),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding: EdgeInsets.only(left: 20),
hintText: "Description",
),
),
TextButton(onPressed: () {}, child: const Text("Save"))
],
),
),
);
});
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
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)),
),
I'm trying to make my TextFormField 'bigger'. I tried this code, it does make it bigger, but if I type (here: qwerty) it starts in the middle. Is there an option to start in the left upper corner?
Padding(
padding: EdgeInsets.only(top: 8.0),
child: Container(
width: screenWidth / 1.1,
height: screenHeight / 5.5,
child: Form(
key: _form2Key,
autovalidate: true,
child: TextFormField(
validator: (val) {
if (val.trim().length > 200) {
return "Beschrijving te lang";
} else {
return null;
}
},
onSaved: (val) => beschrijving = val,
minLines: null,
maxLines: null,
expands: true,
decoration: InputDecoration(
border: OutlineInputBorder(),
filled: true,
fillColor: Colors.white,
labelText: "",
labelStyle: TextStyle(fontSize: 15.0),
hintText: " ",
),
),
),
),
)
You can try this.
Padding(
padding: EdgeInsets.all(8.0),
child: Container(
width: 400,
height: 120,
child: Form(
autovalidate: true,
child: TextFormField(
autofocus: true,
validator: (val) {
if (val.trim().length > 200)
return "Beschrijving te lang";
else
return null;
},
maxLines: 100,
decoration: InputDecoration(
border: OutlineInputBorder(),
filled: true,
fillColor: Colors.white,
labelText: "",
labelStyle: TextStyle(fontSize: 15.0),
hintText: "Enter a message",
),
),
),
),
)
Output:
in mycase this is how i solved it.
you could ommit the keyboardType: TextInputType.multiline, in order to allow one to move to the next line.(enter)
TextFormField(
keyboardType: TextInputType.multiline,
controller: _description,
maxLines: 10,
decoration: InputDecoration(
hintMaxLines: 10,
hintText: "description",
labelText: "Description",
hintStyle: hintText),
),