Flutter TextField with maxLength and - flutter

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)),
),

Related

Flutter - how to vertically align text input within a container?

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,
),
),
)

How do I stop my text field from growing horizontally?

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"))
],
),
),
);
});

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

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

TextField auto resize flutter

How to auto resize TextField when you type in long messages like whatsapp?
Here is my TextField code:
Row(
children: [
Expanded(
flex: 1,
child: Icon(
Icons.tag_faces,
color: Colors.grey,
size: 30,
),
),
Expanded(
flex: 8,
child: TextField(
controller: inputTextController,
style: TextStyle(
color: Colors.black
),
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Type a message',
hintStyle: TextStyle(
color: Color(0xff99999B),
)
),
),
),
Expanded(
flex: 1,
child: IconButton(
icon: Icon(
Icons.camera_alt,
color: Colors.grey,
size: 30,
),
padding: EdgeInsets.all(0),
onPressed: () {
//print(inputTextController.text);
},
),
)
],
),
Tried using maxLines: null and it actually works for the text/message to auto entered but the textfield wouldn't resize vertically.
Below is my implementation:
Container(
margin: const EdgeInsets.only(top: 20, bottom: 8),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.1),
borderRadius: BorderRadius.circular(2),
),
constraints: BoxConstraints(
minWidth: MediaQuery.of(context).size.width,
maxWidth: MediaQuery.of(context).size.width,
minHeight: 25.0,
maxHeight: 100.0,
),
child: Scrollbar(
child: TextField(
keyboardType: TextInputType.multiline,
textInputAction: TextInputAction.done,
onSubmitted: (value) {
},
maxLines: null,
// focusNode: focusNode,
controller: _message,
style: const TextStyle(color: Colors.white),
decoration: const InputDecoration(
border: InputBorder.none,
contentPadding:
EdgeInsets.symmetric(horizontal: 13, vertical: 13),
hintText: "Message(optional)",
hintStyle:
TextStyle(color: Colors.white24, fontSize: 14),
),
),
),
),

Dynamically change container size depending on textfield value

In the todoScreen, there is a container containing a column with two text fields, I want the container to change dynamically as the number of characters in the second text field increases, but the container just expands to the bottom. How do I solve this?
Scaffold(
body: SafeArea(
child: Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 20.0),
child: Container(
decoration: BoxDecoration(
color: Color(0xFF414141),
boxShadow: const [
BoxShadow(
color: Color(0xFF414141),
offset: Offset(2.5, 2.5),
blurRadius: 5.0,
spreadRadius: 1.0,
), //B
],
borderRadius: BorderRadius.circular(14.0)),
padding:
const EdgeInsets.symmetric(horizontal: 24.0, vertical: 15.0),
child: Column(
children: [
TextField(
controller: titleEditingController,
autofocus: true,
autocorrect: false,
cursorColor: Colors.grey,
maxLines: 1,
textInputAction: TextInputAction.next,
decoration: const InputDecoration(
hintText: "Title", border: InputBorder.none),
style: GoogleFonts.notoSans(
color: Color(0xFFA8A8A8), fontSize: 20.0),
),
const Divider(
color: Color(0xFF707070),
),
TextField(
controller: detailEditingController,
maxLines: null,
autocorrect: false,
cursorColor: Colors.grey,
textInputAction: TextInputAction.done,
decoration: const InputDecoration(
hintText: "Notes", border: InputBorder.none),
style: GoogleFonts.notoSans(
color: Color(0xFFA8A8A8), fontSize: 20.0),
),
],
)),
),
),
);
-> Use This Code You're Issue Solved
Ex:
body: SafeArea(
child: SingleChildScrollView(
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 20.0),
child: Container(
decoration: BoxDecoration(
color: Color(0xFF414141),
boxShadow: const [
BoxShadow(
color: Color(0xFF414141),
offset: Offset(2.5, 2.5),
blurRadius: 5.0,
spreadRadius: 1.0,
), //B
],
borderRadius: BorderRadius.circular(14.0)),
padding:
const EdgeInsets.symmetric(horizontal: 24.0, vertical: 15.0),
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
TextField(
controller: titleEditingController,
autofocus: true,
autocorrect: false,
cursorColor: Colors.grey,
maxLines: 1,
textInputAction: TextInputAction.next,
decoration: const InputDecoration(
hintText: "Title", border: InputBorder.none),
style: TextStyle(
color: Color(0xFFA8A8A8), fontSize: 20.0),
),
const Divider(
color: Color(0xFF707070),
),
TextField(
controller: detailEditingController,
maxLines: null,
autocorrect: false,
cursorColor: Colors.grey,
textInputAction: TextInputAction.done,
decoration: const InputDecoration(
hintText: "Notes", border: InputBorder.none),
style:TextStyle(
color: Color(0xFFA8A8A8), fontSize: 20.0),
),
],
)),
),
),
),