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,
)
Related
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"))
],
),
),
);
});
I want this type of country_code_picker styling, but can't adjust the width and height of country_code_picker
Here is my code
InputDecorator(
decoration: InputDecoration(
labelText: 'Nationality',
labelStyle:
const TextStyle(color: AppColors.fIconsAndTextColor),
enabledBorder: OutlineInputBorder(
borderSide:
const BorderSide(color: AppColors.fIconsAndTextColor),
borderRadius: BorderRadius.circular(20.0),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
),
),
child: CountryCodePicker(
initialSelection: 'AE',
showCountryOnly: true,
textOverflow: TextOverflow.visible,
showOnlyCountryWhenClosed: true,
showDropDownButton: true,
),
),
My Output
How can I make this looks like above style?
We can use Stack and CountryCodePicker's builder .
body: LayoutBuilder(
builder: (context, constraints) => Center(
child: Container(
width: constraints.maxWidth,
height: 64,
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 1),
borderRadius: const BorderRadius.all(Radius.circular(24))),
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned(
top: -10,
left: 24,
child: Container(
padding: const EdgeInsets.only(left: 8.0, right: 8),
color: Colors.white,
// container can be replace with text filed color
child: Text(
"Language",
style: TextStyle(
color: Colors.red,
),
),
),
),
SizedBox(
width: constraints.maxWidth,
height: 64,
child: CountryCodePicker(
builder: (p0) {
return Padding(
padding: const EdgeInsets.symmetric(
horizontal: 25,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
if (p0?.code != null) Text(p0!.code!),
// decorate others
Icon(Icons.arrow_drop_down),
],
),
);
},
showCountryOnly: true,
showOnlyCountryWhenClosed: true,
showDropDownButton: true,
),
)
],
),
),
),
),
modify some decoration and it will be perfect.
You can use prefix instead of prefixIcon. The issue will it won’t be visible always. For this, you can use autofocus: true, on TextFiled, you can check this thread about prefix visibility.
TextFormField(
autofocus: true,
decoration: InputDecoration(
isDense: true,
prefix: CountryCodePicker(
showCountryOnly: true,
showOnlyCountryWhenClosed: true,
showDropDownButton: true,
),
label: Text('Language'),
floatingLabelAlignment: FloatingLabelAlignment.start,
floatingLabelBehavior:
),
You can also wrap CountryCodePicker with Sizedbox for sizing.
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 putting the country code before the phone number.
I usedcountry_pickers package but something gone wrong with my code,
my TextField's hintText visibility has gone, it's showing nothing
here is my widget
Padding(
padding: const EdgeInsets.only(top: 5.0),
child: new Container(
padding: const EdgeInsets.only(left: 10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5.0)),
border: Border.all(color: Colors.blue)
),
child: TextField(
keyboardType: TextInputType.phone,
decoration: InputDecoration(
border: InputBorder.none,
hintText: "Phone Number",
prefix: CountryPickerDropdown(
initialValue: 'in',
itemBuilder: _buildDropdownItem,
onValuePicked: (Country country) {
print("${country.name}");
},
),
),
onChanged: (value){
this.phoneNo=value;
},
),
),
),
here's widget method for country code
Widget _buildDropdownItem(Country country) => Container(
child: Row(
children: <Widget>[
CountryPickerUtils.getDefaultFlagImage(country),
SizedBox(
width: 8.0,
),
Text("+${country.phoneCode}(${country.isoCode})"),
],
),
);
The right way to use this is in Row widget. Prefix won't work here.
Row(
children: <Widget>[
Expanded(
child: CountryPickerDropdown(
initialValue: 'in',
itemBuilder: _buildDropdownItem,
onValuePicked: (Country country) {
print("${country.name}");
},
),
),
Expanded(
child: TextField(
keyboardType: TextInputType.phone,
decoration: InputDecoration(
border: InputBorder.none,
hintText: "Phone Number",
),
onChanged: (value) {
// this.phoneNo=value;
print(value);
},
),
),
],
),