I don't understand why is this Scaffold not moving up when the keyboard is shown.
#override
Widget build(BuildContext context) {
if (widget.usuario.city.length < 3) {
controladorUbicacion.text = ciudadPropuesta + ", " + provinciaPropuesta;
}
if (widget.usuario.country.length < 3) {
controladorPais.text = paisPropuesto;
}
return SafeArea(
top: false,
bottom: true,
child: Scaffold(
appBar: AppBar(
backgroundColor: AppColors.rojoMovMap,
title: Text("miperfil".tr()),
),
body: SingleChildScrollView(
child: Column(
children: [
//username
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
onChanged: (text) {},
controller: controladorUsername,
decoration: InputDecoration(
hintText: 'tuusername'.tr().toString(),
hintStyle: TextStyle(color: Colors.black, fontSize: 14),
labelText: 'tuusername'.tr().toString(),
labelStyle:
TextStyle(fontSize: 18, color: AppColors.negroMovMap),
),
)),
//ubicacion
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
onChanged: (text) {},
controller: controladorUbicacion,
decoration: InputDecoration(
hintText: 'tuubicacion'.tr().toString(),
hintStyle: TextStyle(color: Colors.black, fontSize: 14),
labelText: 'tuubicacion'.tr().toString(),
labelStyle:
TextStyle(fontSize: 18, color: AppColors.negroMovMap),
),
)),
//pais
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
onChanged: (text) {},
controller: controladorPais,
decoration: InputDecoration(
hintText: 'tupais'.tr().toString(),
hintStyle: TextStyle(color: Colors.black, fontSize: 14),
labelText: 'tupais'.tr().toString(),
labelStyle:
TextStyle(fontSize: 18, color: AppColors.negroMovMap),
),
)),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
onChanged: (text) {},
controller: controladorNombre,
decoration: InputDecoration(
hintText: 'tunombre'.tr().toString(),
hintStyle: TextStyle(color: Colors.black, fontSize: 14),
labelText: 'tunombre'.tr().toString(),
labelStyle:
TextStyle(fontSize: 18, color: AppColors.negroMovMap),
),
)),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
onChanged: (text) {},
controller: controladorApellidos,
decoration: InputDecoration(
hintText: 'tusapellidos'.tr().toString(),
hintStyle: TextStyle(color: Colors.black, fontSize: 14),
labelText: 'tusapellidos'.tr().toString(),
labelStyle:
TextStyle(fontSize: 18, color: AppColors.negroMovMap),
),
)),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
onChanged: (text) {},
controller: controladorWeb,
decoration: InputDecoration(
hintText: 'tuweb'.tr().toString(),
hintStyle: TextStyle(color: Colors.black, fontSize: 14),
labelText: 'tuweb'.tr().toString(),
labelStyle:
TextStyle(fontSize: 18, color: AppColors.negroMovMap),
),
)),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
onChanged: (text) {},
decoration: InputDecoration(
hintText: 'PersonalInfoWeight'.tr().toString(),
hintStyle: TextStyle(color: Colors.black, fontSize: 14),
labelText: 'PersonalInfoWeight'.tr().toString(),
labelStyle:
TextStyle(fontSize: 18, color: AppColors.negroMovMap),
),
)),
],
),
),
),
);
}
}
Try to add inside Scaffold widget
Refer resizeToAvoidBottomInset
resizeToAvoidBottomInset: true,
Related
How to change color of this? and position other place.( like center of top )
Code:
TextField(
maxLength: 25,
textAlign: TextAlign.center,
obscureText: obscuretext,
decoration: InputDecoration(
contentPadding: const EdgeInsets.all(8.0),
border: InputBorder.none,
iconColor: Colors.grey.shade800,
hintText: hintText,
hintStyle: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 16,
color: Colors.grey.shade800,
),
filled: true,
fillColor: Colors.white54,
),
);
Try below code and use buildCounter
Padding(
padding: const EdgeInsets.all(16),
child: TextFormField(
maxLength: 25,
decoration: const InputDecoration(
border: OutlineInputBorder(),
// If you want change color only of counterText then refer below style
/*counterStyle: TextStyle(
color: Colors.green,
),*/
),
buildCounter: (BuildContext context,
{int? currentLength, int? maxLength, bool? isFocused}) =>
Container(
alignment: Alignment.topLeft,//use alignment position on your need
child: Text(
'${currentLength.toString()}/${maxLength.toString()}',
style: const TextStyle(
color: Colors.indigo,
),
),
),
),
),
Result Screen->
you can build your custom counter
TextField(
maxLength: 25,
buildCounter: (_, {currentLength, maxLength, isFocused}) => Container(
alignment: Alignment.centerLeft,
child: Text(currentLength.toString() + "/" + maxLength.toString()),
),
)
I want to make the text be written at the center of the container but it keeps being at the bottom.
Container(
width: 250.yswx,
padding: EdgeInsets.symmetric(horizontal: 5.yswx),
child: Center(
child: TextField(
textAlignVertical: TextAlignVertical.center,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
fontSize: 13.yswx
),
cursorColor: Colors.black,
decoration: InputDecoration(
border: InputBorder.none,
hintText: widget.placeHolder,
hintStyle: TextStyle(
color: Color(0xffbfbfbf),
fontSize: 13.yswx
)
),
),
),
);
the result:
Hope this helps:
TextField(
textAlign: TextAlign.center,
decoration: InputDecoration(
hintText: "Testing Centered",
),
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 to change the color in this code
Alert Dialog(
backgroundColor: Color(0xFF161619),
title: Text('Enter Your Name',
style: TextStyle(color: Colors.white, fontSize: 25.0)),
content: Row(
children: [
Expanded(
child: TextField(
autofocus: true,
decoration: InputDecoration(
labelText: 'Name',
labelStyle: TextStyle(
color: Colors.white,
fontFamily: 'abel',
fontSize: 20.0),
hintText: 'eg. Raakib Zargar'),
onChanged: (value) {
teamName = value;
},
))
],
),
Check This Image
Add TextStyle to the TextField and provide color property :
Alert Dialog(
backgroundColor: Color(0xFF161619),
title: Text('Enter Your Name',
style: TextStyle(color: Colors.white, fontSize: 25.0)),
content: Row(
children: [
Expanded(
child: TextField(
see here ---> style: TextStyle(color: Colors.red),
autofocus: true,
decoration: InputDecoration(
underline color ---> enabledBorder: UnderlineInputBorder(borderSide: BorderSide(color: Colors.red),),
focusedBorder: UnderlineInputBorder(borderSide: BorderSide(color: Colors.green),),
labelText: 'Name',
labelStyle: TextStyle(
color: Colors.white,
fontFamily: 'abel',
fontSize: 20.0),
hintText: 'eg. Raakib Zargar'),
onChanged: (value) {
teamName = value;
},
))
],
),
the code works fine when it's statelesswidget but after converting it to statefulwidget the textformfiled
stopped showing the text value from firestore.
when entering data the filed works just fine and the value stored in the firebase but when editing the the data the filed not showing the value to be edited and when entering the data in the filed new record is being stored in the firebase
class PostView extends StatefulWidget {
PostView({Key key, this.edittingPost}) : super(key: key);
final Post edittingPost;
#override
State<StatefulWidget> createState() {
return CreatePostView();
}
}
class CreatePostView extends State<PostView>{
final airlineController = TextEditingController();
final paxController = TextEditingController();
final infantController = TextEditingController();
final transitController = TextEditingController();
final dateController = TextEditingController();
Post edittingPost;
#override
Widget build(BuildContext context) {
return ViewModelBuilder<CreatePostViewModel>.reactive(
viewModelBuilder: () => CreatePostViewModel(),
onModelReady: (model) {
// update the text in the controller
airlineController.text = edittingPost?.airline ?? '';
paxController.text = edittingPost?.pax ?? '';
infantController.text = edittingPost?.infant ?? '';
transitController.text = edittingPost?.transit ?? '';
dateController.text = edittingPost?.date ?? '';
model.setEdittingPost(edittingPost);
},
builder: (context, model, child) => Scaffold(
floatingActionButton: FloatingActionButton(
child: !model.busy
? Icon(Icons.add)
: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation(Colors.white),
),
onPressed: () {
if (!model.busy) {
model.addPost(date: dateController.text, airline: airlineController.text, pax: paxController.text,
infant: infantController.text, transit: transitController.text);
}
},
backgroundColor:
!model.busy ? Theme.of(context).primaryColor : Colors.grey[600],
),
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 30.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
verticalSpace(40),
Text(
'Create Post',
style: TextStyle(fontSize: 26),
),
verticalSpaceMedium,
Container(
alignment: Alignment.centerLeft,
decoration: kBoxDecorationStyle,
height: 55.0,
child: TextFormField(
style: TextStyle(
color: Colors.white,
fontFamily: 'OpenSans',
),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding:
EdgeInsets.only(top: 14.0),
prefixIcon: Icon(
Icons.calendar_today,
color: Colors.white,
),
hintText: 'Date of Flight',
hintStyle: kHintTextStyle),
controller: dateController,
onTap: () async{
DateTime date = DateTime(1900);
FocusScope.of(context).requestFocus(FocusNode());
date = await showDatePicker(
context: context,
initialDate:DateTime.now(),
firstDate:DateTime(1900),
lastDate: DateTime(2100));
dateController.text = date.toIso8601String();},),
),
verticalSpaceMedium,
Container(
alignment: Alignment.centerLeft,
decoration: kBoxDecorationStyle,
height: 55.0,
child: TextFormField(
style: TextStyle(
color: Colors.white,
fontFamily: 'OpenSans',
),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding:
EdgeInsets.only(top: 14.0),
prefixIcon: Icon(
Icons.airplanemode_active,
color: Colors.white,
),
hintText: 'Airline',
hintStyle: kHintTextStyle,
),
controller: airlineController,
)),
verticalSpaceMedium,
Container(
alignment: Alignment.centerLeft,
decoration: kBoxDecorationStyle,
height: 55.0,
child: TextFormField(
keyboardType: TextInputType.number,
style: TextStyle(
color: Colors.white,
fontFamily: 'OpenSans',
),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding:
EdgeInsets.only(top: 14.0),
prefixIcon: Icon(
Icons.airline_seat_recline_extra,
color: Colors.white,
),
hintText: 'Pax',
hintStyle: kHintTextStyle,
),
controller: paxController,
)),
verticalSpaceMedium,
Container(
alignment: Alignment.centerLeft,
decoration: kBoxDecorationStyle,
height: 55.0,
child: TextFormField(
keyboardType: TextInputType.number,
style: TextStyle(
color: Colors.white,
fontFamily: 'OpenSans',
),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding:
EdgeInsets.only(top: 14.0),
prefixIcon: Icon(
Icons.child_friendly,
color: Colors.white,
),
hintText: 'Infant',
hintStyle: kHintTextStyle,
),
controller: infantController,
)),
verticalSpaceMedium,
Container(
alignment: Alignment.centerLeft,
decoration: kBoxDecorationStyle,
height: 55.0,
child: TextFormField(
keyboardType: TextInputType.number,
style: TextStyle(
color: Colors.white,
fontFamily: 'OpenSans',
),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding:
EdgeInsets.only(top: 14.0),
prefixIcon: Icon(
Icons.transit_enterexit,
color: Colors.white,
),
hintText: 'Transit',
hintStyle: kHintTextStyle,
),
controller: transitController,
)),
],
),
),
)),
);
}
}
If you want see change text from textfromField - you have to use setState() where you will asssigned new value to variable.