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)),
),
),
Related
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,
),
I am trying to add a search input control to the app header in my Flutter web app.
See...
Widget _buildSearchControl() {
return Container(
alignment: Alignment.centerLeft,
color: Colors.white,
padding: EdgeInsets.only(right: 20),
margin: EdgeInsets.all(10),
width: 300,
child: TextField(
style: TextStyle(backgroundColor: Colors.white, color: Colors.black),
decoration: InputDecoration(
prefixIcon: const Icon(Icons.search,color: Colors.black,),
suffixIcon: IconButton(
icon: const Icon(Icons.clear,color: Colors.black,),
onPressed: () {
/* Clear the search field */
},
),
hintText: 'Search...',
border: InputBorder.none),
),
);
}
However, when entering the text, the characters are not vertically centre aligned as I wpuld expect
Is there a way I can have the characters input to the TextField control vertically centered so that they line up with the icons?
Have you tried this textAlignVertical property?
TextField(
textAlignVertical: TextAlignVertical.center,
....
),
I wrap the Container with Padding.
And add contentPadding: const EdgeInsets.all(5), to InputDecoration
...
Padding(
padding: const EdgeInsets.all(8.0).copyWith(bottom: 0),
child: Container(
decoration: BoxDecoration(
border: Border.all(color: Theme.of(context).primaryColor, width: 2),
borderRadius: const BorderRadius.all(Radius.circular(10)),
color: Colors.white
),
child: TextFormField(
controller: _controller,
onChanged: (string) {},
style: TextStyle(color: Theme.of(context).primaryColor),
cursorColor: Theme.of(context).primaryColor,
decoration: InputDecoration(
contentPadding: const EdgeInsets.all(5),
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
labelText: 'Enter',
labelStyle: TextStyle(
color: Theme.of(context).primaryColor,
fontSize: 16,
fontWeight: FontWeight.w500),
prefixIcon: Icon(
Icons.document_scanner_sharp,
color: Theme.of(context).primaryColor,
),
suffixIcon: Padding(
padding: const EdgeInsets.only(top: 5.0),
child: IconButton(
alignment: Alignment.topLeft,
icon: const Icon(
Icons.clear,
size: 25,
color: Colors.red,
),
tooltip: 'Clear',
onPressed: () {
FocusScope.of(context).unfocus();
_controller.clear();
}
),
)
)
),
),
),
Use this , maybe it depends on your contentPadding
Container(
width: 300,
height: 56,
margin: EdgeInsets.fromLTRB(0, 0, 0, 20),
child: TextFormField(
key: widget.globalKey,
autocorrect: false,
onTap: widget.onClick,
minLines: widget.minLines,
maxLines: widget.maxLines,
textInputAction: TextInputAction.done,
onChanged: (val) => widget.onChangeValue(val),
style: getInputStyle,
initialValue: widget.initialValue,
textAlign: TextAlign.left,
autovalidateMode: AutovalidateMode.onUserInteraction,
controller: widget.controller,
keyboardAppearance: Brightness.dark,
decoration: InputDecoration(
contentPadding: REdgeInsets.fromLTRB(
14, 16, 0, 16),
labelText: widget.labelText,
hintText: widget.hintText,
floatingLabelBehavior: FloatingLabelBehavior.auto,
labelStyle: getLabelStyle,
hintStyle: getLabelStyle,
fillColor: widget.backGroundColor ,
filled: true,
prefix: widget.prefix,
),
),
)
I am creating a notes application and using a text field with max lines set as null so the text can expand infinitely according to the text. The problem is that you can only start typing in the note when you select the text field due to its size I want to make it big enough to cover the entire screen for accessibility but I fear that the size of the text field may differ on each device which would ruin the entire point of making it fit the entire screen.
TextField(
controller: _textController,
style: const TextStyle(color: Colors.white),
keyboardType: TextInputType.multiline,
maxLines: null,
decoration: const InputDecoration(
contentPadding:
EdgeInsets.symmetric(horizontal: 10, vertical: 10),
border: InputBorder.none,
hintText: "Start typing your note...",
hintStyle: TextStyle(color: Colors.white),
),
);
By wraping your TextField in a SizedBox with a height: double.infinity you can expand your TextField
SizedBox(
height: double.infinity,
child: TextField(
controller: _textController,
style: const TextStyle(color: Colors.white),
keyboardType: TextInputType.multiline,
maxLines: null,
decoration: const InputDecoration(
contentPadding:
EdgeInsets.symmetric(horizontal: 10, vertical: 10),
border: InputBorder.none,
hintText: "Start typing your note...",
hintStyle: TextStyle(color: Colors.white),
)),
),
SizedBox(
height: MediaQuery.of(context).size.height,
TextField(
controller: _textController,
style: const TextStyle(color: Colors.white),
keyboardType: TextInputType.multiline,
maxLines: null,
decoration: const InputDecoration(
contentPadding:
EdgeInsets.symmetric(horizontal: 10, vertical: 10),
border: InputBorder.none,
hintText: "Start typing your note...",
hintStyle: TextStyle(color: Colors.white),
),
),
),
This is the design I want:
This is my current design:
I am new to using flutter. I want to ask for an opinion on how to make text in the textformfield at what position according to the design I want. I try to use contentPadding: EdgeInsets.symmetric(vertical: 40), and height in textformfield style but still can't solve my problem. Please advise from stack overflow.
This is my code:
Container(
width: double.infinity,
margin: EdgeInsets.fromLTRB(10, 0, 10, 10),
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
border: Border.all(
color: Colors.transparent,
width: 1.0,
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 30,
child: Text(
'Important patient note',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16),
),
),
SizedBox(
width: 950,
child: TextFormField(
textAlign: TextAlign.start,
style: const TextStyle(color: Colors.black),
controller: importantNotes,
onSaved: (String? value) {
importantNotes.text = value!;
},
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(70.0),
border: OutlineInputBorder(),
hintText: 'Important patient note',
hintStyle: TextStyle(
color: Colors.black, fontSize: 16,),
),
),
)
],
))
Just remove contentPadding: EdgeInsets.all(70.0),
SizedBox(
width: 950,
child: TextFormField(
textAlign: TextAlign.start,
maxLines : 5, // add this
style: const TextStyle(color: Colors.black),
controller: importantNotes,
onSaved: (String? value) {
importantNotes.text = value!;
},
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(70.0), // remove or set it to 0
border: OutlineInputBorder(),
hintText: 'Important patient note',
hintStyle: TextStyle(
color: Colors.black, fontSize: 16,),
),
)),
try this one
Widget textfield(
String hint, TextEditingController _controller, bool obsecurtext) {
return Container(
width: MediaQuery.of(context).size.width - 70,
height: 60,
child: TextFormField(
obscureText: obsecurtext,
controller: _controller,
decoration: InputDecoration(
labelStyle: TextStyle(fontSize: 15),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(21),
borderSide:
BorderSide(width: 1, color: Color.fromARGB(255, 226, 135, 230)),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(21),
borderSide:
BorderSide(width: 1, color: Color.fromARGB(255, 231, 127, 127)),
),
hintText: hint,
),
),
);
}
usage textfield("Email", _email, false)
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)),
),