The title sums up the question pretty well. I have a TextField with a maxLength: 250 and this is what it looks like:
Is there a way to put the counter somewhere else? Optimally to the left of the send button, but otherwise maybe just above and on the left of the TextField. Any ideas? Thanks!
Probably not necessary, but here's my code:
TextField(
controller: inputTextEditingController,
focusNode: inputFocusNode,
style: TextStyle(color: Platform.isAndroid ? Colors.green : Colors.blue, height: 0.8),
maxLength: 250,
maxLines: null,
decoration: InputDecoration(
contentPadding: const EdgeInsets.fromLTRB(20, 15, 0, 15),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(28)),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Platform.isAndroid ? Colors.green : Colors.blue),
borderRadius: BorderRadius.circular(28)),
suffixIcon: IconButton(
onPressed: _handleSubmitted,
icon: Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 20, 0),
child: Icon(Icons.send,
color: inputFocusNode.hasFocus
? Platform.isAndroid ? Colors.green : Colors.blue
: Colors.black54),
),
),
hintText: "Say something!",
hintStyle: inputFocusNode.hasFocus
? TextStyle(color: Platform.isAndroid ? Colors.green : Colors.blue, fontSize: 16)
: TextStyle(color: Colors.black54)),
You need to build and pass your own counter as a buildCounter parameter of a TextField Widget.
TextField(
maxLength: 250,
buildCounter: (_, {currentLength, maxLength, isFocused}) => Padding(
padding: const EdgeInsets.only(left: 16.0),
child: Container(
alignment: Alignment.centerLeft,
child: Text(currentLength.toString() + "/" + maxLength.toString())),
),
)
child: new TextField(
style: BurmeseUtil.textStyle(context),
controller: txtController,
maxLength: 1500,
maxLines: null,
decoration: new InputDecoration(
counterText: '',
border: OutlineInputBorder(),
),
),
Use decoration in TextField.Add counterText:' '
Good luck
Related
I have a TextFormField with validation on Empty.
In order to control height, TextFormField was nested inside Container widget.
Which cause unexpected side effect of displaying error message overlap as attached pictures.
to test sample code, press "Submit" to see error.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: SimpleForm(),
);
}
}
class SimpleForm extends StatelessWidget {
#override
Widget build(BuildContext context) {
final formKey = GlobalKey<FormState>();
return SafeArea(
child: Scaffold(
// primary: true,
body: Form(
key: formKey,
child: Column(
children: [
SizedBox(
height: 0,
),
// Container(height: 0,),
Container(
height: 38,
margin: EdgeInsets.all(6),
child: TextFormField(
maxLines: 1,
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'Name',
// errorStyle: TextStyle(fontSize: 0, height: 0),
),
validator: (value) => (value.isEmpty) ? '**' : null,
),
),
FlatButton(
child: Text('Submit'),
onPressed: () {
formKey.currentState.validate();
},
)
],
),
)),
);
}
}
Solution 1. You can set helperText for the TextField's decoration and increase the Container's height:
Container(
height: 60,
child: TextFormField(
maxLines: 1,
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'Name',
helperText: ' ', // this is new
),
validator: (value) => (value.isEmpty) ? '**' : null,
),
),
Solution 2. You can set the line height of the error message to 0 (it will be displayed above the text field):
Container(
height: 38,
child: TextFormField(
maxLines: 1,
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'Name',
errorStyle: TextStyle(height: 0), // this is new
),
validator: (value) => (value.isEmpty) ? '**' : null,
),
),
You can use this
TextFormField(
decoration: new InputDecoration(
enabledBorder: OutlineInputBorder( //change border of enable textfield
borderRadius: BorderRadius.all(Radius.circular(40.0)),
borderSide: BorderSide(color: colorValue),),
focusedBorder: OutlineInputBorder( //focus boarder
borderRadius: BorderRadius.all(Radius.circular(40.0)),
borderSide: BorderSide(color: colorValue),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(width: 1,color: Colors.red),
),
disabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(width: 1,color: Colors.orange),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(width: 1,color: Colors.green),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(width: 1,)
),
errorBorder: OutlineInputBorder(. //error boarder
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(width: 1,color: Colors.black)
),
isDense: true,
counterText: "",
contentPadding: EdgeInsets.fromLTRB(10, 20, 10, 0), //padding according to your need
hintText: "create new",
hintStyle: TextStyle(color: colorValue, fontSize: 13)),
)),
Thanks for the answer Mobina,
Seem like issues is flutter limitation. For time being..
with border I decide to display error message on top. (Your solution :1)
without border I can display err msg as usual. (Your solution : 2)
// with border
Container(
height: 38,
margin: EdgeInsets.all(6),
child: TextFormField(
textAlignVertical: TextAlignVertical.bottom,
style: TextStyle(fontSize: 14),
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'Name',
errorStyle: TextStyle(height: 0),
),
validator: (value) => (value.isEmpty) ? 'hide overlap' : null,
),
),
// without border
Container(
height: 38,
margin: EdgeInsets.all(6),
child: TextFormField(
textAlignVertical: TextAlignVertical.bottom,
style: TextStyle(fontSize: 14),
decoration: InputDecoration(
hintText: 'Name',
helperText: ' ', isDense: true,
counterText: "",
contentPadding: EdgeInsets.fromLTRB(10, 30, 10, 0),
),
validator: (value) => (value.isEmpty) ? 'hide overlap' : null,
),
),
i have textFeilds i put empty feild validation but i don't know how to put another validation(Multiple validation) like "Email is invalid" or whatever i want. This is just important code, all code is a lill lengthy
final TextEditingController _emailControl = new TextEditingController();
bool _validateEmail = false;
child: TextField(
style: TextStyle(
fontSize: 15.0,
color: Colors.black,
),
decoration: InputDecoration(
contentPadding: EdgeInsets.all(10.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5.0),
borderSide: BorderSide(color: Colors.white,),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.white,),
borderRadius: BorderRadius.circular(5.0),
),
hintText: "Email",
prefixIcon: Icon(
Icons.mail_outline,
color: Colors.black,
),
hintStyle: TextStyle(
fontSize: 15.0,
color: Colors.black,
),
labelText: 'Email',
errorText: _validateEmail ? 'Email Can\'t Be Empty' : null,
),
maxLines: 1,
controller: _emailControl,
),
My registration button press is below
onPressed: () {
setState(() {
_emailControl.text.isEmpty ? _validateEmail = true : _validateEmail = false;
if ( _validateEmail == false ){
_isLoading = true;
khan();
}
});
Use TextFormField.
TextFormField(
validator(val):{
if(val.isEmpty){
return "This field cannot be empty",
}
else if(next conditon){
return ....
}
}
style: TextStyle(
fontSize: 15.0,
color: Colors.black,
),
decoration: InputDecoration(
contentPadding: EdgeInsets.all(10.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5.0),
borderSide: BorderSide(color: Colors.white,),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.white,),
borderRadius: BorderRadius.circular(5.0),
),
hintText: "Email",
prefixIcon: Icon(
Icons.mail_outline,
color: Colors.black,
),
hintStyle: TextStyle(
fontSize: 15.0,
color: Colors.black,
),
labelText: 'Email',
errorText: _validateEmail ? 'Email Can\'t Be Empty' : null,
),
maxLines: 1,
controller: _emailControl,
),
And finally use form to validate the textfield.
I tried different ways to design the below design but couldn't be able to do it
The white rounded square is a TextBox that can type numeric.
Does anyone know how to design this in flutter?
If someone can help me, that would be great :)
Here is a working code designing the following textfield:
I've used a Row with two Container inside. The first container is the blue one, and the second container the background of the textfield. The TextField is the child of container 2. For the border and shadow, the decoration property of the containers is used
Full code; use the _height variable to ajust the textfield height:
class MyWidget extends StatelessWidget {
final double _height = 45;
#override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.center,
height: _height,
child: Row(
children: [
Container(
child: Text('A', style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 24)),
alignment: Alignment.center,
width: 50,
height: _height,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(_height / 2), bottomLeft: Radius.circular(_height / 2)),
color: Colors.blueAccent,
boxShadow: [
BoxShadow(
color: Colors.grey,
blurRadius: 4.0, // has the effect of softening the shadow
offset: Offset(
3.0, // horizontal, move right 10
3.0, // vertical, move down 10
),
),
],
),
),
Container(
height: _height,
child: TextField(
decoration: new InputDecoration(
border: InputBorder.none,
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
contentPadding: EdgeInsets.only(left: 10)),
),
width: 300,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topRight: Radius.circular(_height / 2), bottomRight: Radius.circular(_height / 2)),
color: Colors.grey[200],
boxShadow: [
BoxShadow(
color: Colors.grey,
blurRadius: 4.0, // has the effect of softening the shadow
offset: Offset(
3.0, // horizontal, move right 10
3.0, // vertical, move down 10
),
),
],
),
),
],
),
);
}
}
I tried following code and it gives me a similar design
Container(
width: double.infinity,
child: Row(
children: <Widget>[
Card(
margin: EdgeInsets.only(),
color: Color(0xff99d4fa),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(32.0),
topLeft: Radius.circular(32.0)),
),
child: Container(
padding: EdgeInsets.only(
top: 8, bottom: 8, left: 15, right: 12),
child: TextStyles(headText: 'A'),
),
elevation: 6,
),
Expanded(
child: Container(
height: 41,
//margin: EdgeInsets.only(top: 8,),
decoration: new BoxDecoration(
borderRadius: new BorderRadius.only(
bottomRight: Radius.circular(32.0),
topRight: Radius.circular(32.0),
),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey[400],
spreadRadius: 0.01,
offset: Offset(3, 3), //(x,y)
blurRadius: 5,
),
],
),
child: Padding(
padding: EdgeInsets.zero,
child: TextField(
decoration: new InputDecoration(
border: InputBorder.none,
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
contentPadding: EdgeInsets.only(left: 10)),
),
),
))
],
),
),
Is there any easy option to do that?
I'm having an issue trying to align a text widget in the center of a column using flutter. Here's a screenshot of my UI so far, and I want to align the texts below "por Anúncio" in the center of the container. I tried using the Align Widget, another Column, a Center, but nothing worked so far.
Here is a screenshot of what I have:
And this is my code so far:
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height - 80,
decoration: new BoxDecoration(
gradient: LinearGradient(colors: [
index == 0
? Colors.lightGreen
: index == 1
? Colors.lightBlue
: index == 2 ? Colors.orangeAccent : Color(0xff2F4858),
index == 0
? Colors.green
: index == 1
? Colors.blueAccent
: index == 2 ? Colors.deepOrange : Color(0xff04030F)
], begin: Alignment.topLeft, end: Alignment.bottomRight),
borderRadius: BorderRadius.circular(15.0),
),
child: Column(
children: <Widget>[
Align(
alignment: Alignment.topRight,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: GestureDetector(
onTap: () {
Navigator.of(context).pop();
},
child: Icon(
Icons.clear,
color: Colors.white,
)),
),
),
Text(
index == 0
? "Plano Pré Pago"
: index == 1
? "Plano Básico"
: index == 2 ? "Plano Intermediário" : "Plano Premium",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 26,
fontWeight: FontWeight.bold,
decoration: TextDecoration.none),
),
Padding(
padding: const EdgeInsets.fromLTRB(5, 5, 5, 0),
child: Text(
index == 0
? "R\$ 19,90"
: index == 1
? "R\$ 19,90"
: index == 2 ? "R\$ 37,90" : "R\$ 99,00",
textAlign: TextAlign.center,
style: GoogleFonts.nanumGothic(
color: Colors.white,
fontSize: 60,
fontWeight: FontWeight.bold,
decoration: TextDecoration.none),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 5, 5, 0),
child: Text(
index == 0 ? "por Anúncio" : "Mensais",
textAlign: TextAlign.center,
style: GoogleFonts.nanumGothic(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
decoration: TextDecoration.none),
),
),
Container(
child: Center(
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Text(
"- 1 Anúncio Ativo\n- 1 Usuário\n- Notificação de interesses de compra\n- Válido para 30 dias",
textAlign: TextAlign.center,
style: GoogleFonts.nanumGothic(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.w300,
decoration: TextDecoration.none),
),
),
),
),
],
),
);
You have to just add Expanded widget above and below You that Widget. Expanded widget will cover all possible hight so on both side you will get same space.
Expanded(
child : Container()
),
Container(
child: Center(
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Text(
"- 1 Anúncio Ativo\n- 1 Usuário\n- Notificação de interesses de compra\n- Válido para 30 dias",
textAlign: TextAlign.center,
style: GoogleFonts.nanumGothic(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.w300,
decoration: TextDecoration.none),
),
),
),
),
Expanded(
child : Container()
),
I need the textfield should expand vertically up to 5 enter key pressed
after the 5th enter other lines are should enclose within the scrollbar
how can I achieve the textfield I need using flutter
now I set the maxlines: null in the textfield
thank you guys for your suggestions but I have found the actual textfield by the below code
Flexible(
child: new ConstrainedBox(
constraints: new BoxConstraints(
minWidth: size.width,
maxWidth: size.width,
minHeight: 25.0,
maxHeight: 135.0,
),
child: new Scrollbar(
child: new TextField(
cursorColor: Colors.red,
keyboardType: TextInputType.multiline,
maxLines: null,
controller: tc,
_handleSubmitted : null,
decoration: InputDecoration(
border: InputBorder.none,
contentPadding: EdgeInsets.only(
top: 2.0,
left: 13.0,
right: 13.0,
bottom: 2.0),
hintText: "Type your message",
hintStyle: TextStyle(
color:Colors.grey,
),
),
),
),
),
),
You can achieve by adding maxLine and minLine in TextField
new TextField(
minLines: 1,
maxLines: 5,
decoration: new InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey, width: 5.0),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey, width: 5.0),
),
hintText: 'Mobile Number',
),
)