Related
My Dropdown button value doesn't update until the AlertDialog box is closed and reopened.
I have the variable set at the top of my class
class _ItemListState extends State<ItemList> {
int _ratingController;
...
}
Within the class I have an AlertDialog that opens a form, within here I have the DropdownButtonFormField
AlertDialog(
content: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
TextField(
controller: _eateryController,
autofocus: true,
decoration:
InputDecoration(labelText: 'Eatery', hintText: 'eg Pizza Hut'),
),
TextField(
controller: _supplierController,
decoration: InputDecoration(
labelText: 'Supplier', hintText: 'eg Deliveroo'),
),
TextField(
controller: _descriptionController,
decoration: InputDecoration(
labelText: 'Description', hintText: 'eg cheese pizza'),
),
DropdownButtonFormField<int>(
value: _ratingController,
items: [1, 2, 3, 4, 5]
.map((label) => DropdownMenuItem(
child: Text(label.toString()),
value: label,
))
.toList(),
hint: Text('Rating'),
onChanged: (value) {
setState(() {
_ratingController = value;
});
},
),
],
),
actions: <Widget>[
FlatButton(
onPressed: () {
_handleSubmit(_eateryController.text, _supplierController.text,
_descriptionController.text, _ratingController);
Navigator.pop(context);
},
child: Text('Save'),
),
FlatButton(
onPressed: () => Navigator.pop(context),
child: Text('Cancel'),
)
],
);
the setState doesn't seem to be dynamically updating the fields value. The updated value will only show once I close and re open the AlertDialog.
How can I get this to update instantly?
Thanks
You need to create a new StatefulWidget class that should return your AlertDialog
class MyDialog extends StatefulWidget {
#override
_MyDialogState createState() => _MyDialogState();
}
class _MyDialogState extends State<MyDialog> {
int _ratingController;
#override
Widget build(BuildContext context) {
return AlertDialog(
content: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
TextField(
controller: _eateryController,
autofocus: true,
decoration:
InputDecoration(labelText: 'Eatery', hintText: 'eg Pizza Hut'),
),
TextField(
controller: _supplierController,
decoration: InputDecoration(
labelText: 'Supplier', hintText: 'eg Deliveroo'),
),
TextField(
controller: _descriptionController,
decoration: InputDecoration(
labelText: 'Description', hintText: 'eg cheese pizza'),
),
DropdownButtonFormField<int>(
value: _ratingController,
items: [1, 2, 3, 4, 5]
.map((label) => DropdownMenuItem(
child: Text(label.toString()),
value: label,
))
.toList(),
hint: Text('Rating'),
onChanged: (value) {
setState(() {
_ratingController = value;
});
},
),
],
),
actions: <Widget>[
FlatButton(
onPressed: () {
_handleSubmit(_eateryController.text, _supplierController.text,
_descriptionController.text, _ratingController);
Navigator.pop(context);
},
child: Text('Save'),
),
FlatButton(
onPressed: () => Navigator.pop(context),
child: Text('Cancel'),
)
],
);
}
}
Use it like this
showDialog(
context: context,
builder: (context) {
return MyDialog();
},
);
You can use statefulBuilder inside alert dialog.
return AlertDialog(
title: new Text('Table'),
content: StatefulBuilder(builder:
(BuildContext context,
StateSetter setState) {
return Container(
child: new SingleChildScrollView(
scrollDirection: Axis.vertical,
child: new Column(
children: <Widget>[
DropdownButtonFormField<String>(
value: dropdownValue,
style: TextStyle(
color: Colors.black87),
items: <String>[
'Lot 1',
'Lot 2',
'Lot 3',
'Lot 4',
].map<
DropdownMenuItem<
String>>(
(String value) {
return DropdownMenuItem<
String>(
value: value,
child: Text(value),
);
}).toList(),
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
),
```
It looks like you're calling setState in a wrong widget. The AlertDialog doesn't belong to ItemList's tree because it's located inside another Route. So calling setState inside _ItemListState won't rebuild the AlertDialog.
Consider pulling out content of AlertDialog into a separate StatefulWidget and putting int _ratingController into it's state.
I have implemented
SystemChrome.setEnabledSystemUIOverlays([]);
in my main function to hide the status bar but I need to bring it back when I tap on my Textfield. So the user can use the back option on the bottom bar.
I've tried to do this :
onTap: () => SystemChrome.restoreSystemUIOverlays()
but that don't work.
Container _getSearchBar() {
return new Container(
margin: const EdgeInsets.only(top: 21.0, right: 8.0, left: 8.0),
child: new Card(
child: new ListTile(
leading: new Icon(Icons.search),
title: new TextField(
onTap: () => SystemChrome.restoreSystemUIOverlays(),
controller: controller,
decoration: new InputDecoration(
hintText: 'Search', border: InputBorder.none),
),
trailing: new IconButton(
icon: new Icon(Icons.cancel),
onPressed: () {
controller.clear();
},
),
),
),
);
}
According to restoreSystemUIOverlays() function documentation it only returns the last setting of setEnabledSystemUIOverlays() which is in your case hiding status bar. Instead you should use :
onTap: () => SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
I want to pass data from alert dialog.Alert dialog contains textfield,so whatever the user type on the textfield that text should pass to the main page (screen).Below is the code of the alert dialog
Padding(
padding: const EdgeInsets.only(left: 42.0),
child: Align(
alignment: Alignment.topCenter,
child: RaisedButton(onPressed: (){
_showDialog();
},
),
),
Padding(
padding: const EdgeInsets.only(top: 50.0),
child: new Text('// Displays text'););
void _showDialog() {
showDialog(
context: context,
builder: (BuildContext context) {
// return object of type Dialog
return AlertDialog(
title: new Text("Alert Dialog title"),
content: TextField(
keyboardType: TextInputType.number,
decoration: InputDecoration(
hintText: 'Enter the number'
),
)
,
actions: <Widget>[
// usually buttons at the bottom of the dialog
Row(
children: <Widget>[
new FlatButton(
child: new Text("Cancel"),
onPressed: () {
Navigator.of(context).pop();
},
),
new FlatButton(onPressed: (){
}, child: new Text("OK"))
],
),
],
);
},
);
}
Edit new solution:
// write this in your main page
String onMainPageText;
you can display like this in on your main page! after clicking the okey in your _showdialog method Text(onMainPageText)
change your _showDialog method with the following code.
void _showDialog() {
String dialogText;
showDialog(
context: context,
builder: (BuildContext context) {
// return object of type Dialog
return AlertDialog(
title: new Text("Alert Dialog title"),
content: TextField(
onChanged: (String textTyped) {
setState(() {
dialogText = textTyped;
});
},
keyboardType: TextInputType.number,
decoration: InputDecoration(hintText: 'Enter the number'),
),
actions: <Widget>[
// usually buttons at the bottom of the dialog
Row(
children: <Widget>[
new FlatButton(
child: new Text("Cancel"),
onPressed: () {
setState(() {
onMainPageText = '';
});
Navigator.of(context).pop();
},
),
new FlatButton(
onPressed: () {
setState(() {
onMainPageText = dialogText;
});
Navigator.of(context).pop();
},
child: new Text("OK"))
],
),
],
);
},
);
}
Old answer:
create a global TextEditingController will handle your problem you can access the text field text with textEditingConroller.text
dont forget to define textEditingController inside your class
class YourMainPageState extends State<YourMainPage>{
TextEditingController textEditingController = new TextEditingController();
}
void _showDialog() {
showDialog(
context: context,
builder: (BuildContext context) {
// return object of type Dialog
return AlertDialog(
title: new Text("Alert Dialog title"),
content: TextField(
controller: textEditingController,
keyboardType: TextInputType.number,
decoration: InputDecoration(hintText: 'Enter the number'),
),
actions: <Widget>[
// usually buttons at the bottom of the dialog
Row(
children: <Widget>[
new FlatButton(
child: new Text("Cancel"),
onPressed: () {
Navigator.of(context).pop();
},
),
new FlatButton(onPressed: () {print(textEditingController.text);}, child: new Text("OK"))
],
),
],
);
},
);
}
You can display typed text with that code :
Padding(
padding: const EdgeInsets.only(top: 50.0),
child: new Text(texEditingController.text););
The textfield has a parameter called onChanged: you can use that to pass a function
TextField(
keyboardType: TextInputType.number,
onChange: onChange
decoration: InputDecoration(
hintText: 'Enter the number'
),
)
in your main screen use this:
void onChange(String text) {
//do stuff here with text like maybe setState
}
I am trying to add done button in number type input for a TextFormField in flutter but I could not able to do that.
TextFormField(
key: Key(keyValue),
initialValue: valueBuilder,
onSaved: (text) {
fieldsController.text = text.trim();
},
inputFormatters: [inputFormatters],
keyboardType: TextInputType.phoneNumber,)
I want create a keyboard like the below. For the input text form field.
Change
keyboardType: TextInputType.number
to
keyboardType: TextInputType.numberWithOptions(signed: true, decimal: true)
You don't need a done button just wrap MaterialApp with a GestureDetector
GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () {
FocusScopeNode currentFocus = FocusScope.of(context);
if (!currentFocus.hasPrimaryFocus &&
currentFocus.focusedChild != null) {
FocusManager.instance.primaryFocus.unfocus();
}
},
child: MaterialApp(
title: "My title",
home:MyHomeScreen(),
),
);
I've just created a package for add basic actions to the current keyboards .
You can take a look here :
https://pub.dartlang.org/packages/keyboard_actions
Usage :
import 'package:flutter/material.dart';
import 'package:keyboard_actions/keyboard_actions.dart';
//...
FocusNode _nodeText1 = FocusNode();
FocusNode _nodeText2 = FocusNode();
FocusNode _nodeText3 = FocusNode();
FocusNode _nodeText4 = FocusNode();
FocusNode _nodeText5 = FocusNode();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Keyboard Actions Sample"),
),
body: FormKeyboardActions(
keyboardActionsPlatform: KeyboardActionsPlatform.ALL, //optional
keyboardBarColor: Colors.grey[200], //optional
nextFocus: true, //optional
actions: [
KeyboardAction(
focusNode: _nodeText1,
),
KeyboardAction(
focusNode: _nodeText2,
closeWidget: IconButton(
icon: Icon(Icons.close),
onPressed: () {},
),
),
KeyboardAction(
focusNode: _nodeText3,
onTapAction: () {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
content: Text("Custom Action"),
actions: <Widget>[
FlatButton(
child: Text("OK"),
onPressed: () => Navigator.of(context).pop(),
)
],
);
});
},
),
KeyboardAction(
focusNode: _nodeText4,
displayCloseWidget: false,
),
KeyboardAction(
focusNode: _nodeText5,
closeWidget: Padding(
padding: EdgeInsets.all(5.0),
child: Text("CLOSE"),
),
),
],
child: Padding(
padding: const EdgeInsets.all(15.0),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
TextField(
keyboardType: TextInputType.number,
focusNode: _nodeText1,
decoration: InputDecoration(
hintText: "Input Number",
),
),
TextField(
keyboardType: TextInputType.text,
focusNode: _nodeText2,
decoration: InputDecoration(
hintText: "Input Text with Custom Close Widget",
),
),
TextField(
keyboardType: TextInputType.number,
focusNode: _nodeText3,
decoration: InputDecoration(
hintText: "Input Number with Custom Action",
),
),
TextField(
keyboardType: TextInputType.text,
focusNode: _nodeText4,
decoration: InputDecoration(
hintText: "Input Text without Close Widget",
),
),
TextField(
keyboardType: TextInputType.number,
focusNode: _nodeText5,
decoration: InputDecoration(
hintText: "Input Number with Custom Close Widget",
),
),
],
),
),
),
),
);
}
add this to your TextField
TextField(
...
keyboardType: TextInputType.numberWithOptions(signed: true),
inputFormatters: [
FilteringTextInputFormatter.digitsOnly,
],
...
),
This is how to add Done button to your TextFormField when keyboard is opened:
textInputAction: TextInputAction.done,
Please keep in mind that iOS doesn’t support Done on NUMERIC keyboards.
I used this way to handle done button in IOS
keyboardType: Platform.isIOS?
TextInputType.numberWithOptions(signed: true, decimal: true)
: TextInputType.number,
// This regex for only amount (price). you can create your own regex based on your requirement
inputFormatters: [FilteringTextInputFormatter.allow(RegExp(r'^\d+\.?\d{0,4}'))],
There is no done button in ios keyboard. Solution is that use "keyboard_actions" plugin otherwise add layout top of keyboard check this
https://blog.usejournal.com/keyboard-done-button-ux-in-flutter-ios-app-3b29ad46bacc
I used the signed option to display the done button. Then I used a TextInputFormatter with a RegEx to limit what the user can input.
new TextFormField(
controller: myController,
keyboardType: TextInputType.numberWithOptions(signed:true, decimal: true),
textInputAction: TextInputAction.done,
onFieldSubmitted: (term) {
_showSnackBar(context, double.parse(myController.text));
},
onEditingComplete: () {
_showSnackBar(context, double.parse(myController.text));
},
decoration: const InputDecoration(
helperText: "Actual",
hintText: "Units used",
border: UnderlineInputBorder(),
icon: Icon(Icons.keyboard),
),
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(RegExp(r'^\d*\.?\d*$')),
],
),
There is no done button in iOS but we can check the length of the input and clear focus to hide the numberpad keyboard.
Implement like below,(it'll work with fix length of number value)
onChanged: (val) {
if (val.length == 10) { //10 is the length of the phone number you're allowing
FocusScope.of(context).requestFocus(FocusNode());
}
}
When i select a Textfield, the keyboard is going to be shown but the keyboard hide my selected TextField. Does someone have a solution?
Scaffold(
resizeToAvoidBottomInset: true,
body: SingleChildScrollView(
child: Container(
child: Column(
children: <Widget>[
TextFormField(
decoration: InputDecoration(
labelText: 'Enter Text',
),
),TextFormField(
decoration: InputDecoration(
labelText: 'Enter Text',
),
),TextFormField(
decoration: InputDecoration(
labelText: 'Enter Text',
),
),TextFormField(
decoration: InputDecoration(
labelText: 'Enter Text',
),
),TextFormField(
decoration: InputDecoration(
labelText: 'Enter Text',
),
),TextFormField(
decoration: InputDecoration(
labelText: 'Enter Text',
),
),TextFormField(
decoration: InputDecoration(
labelText: 'Enter Text',
),
),
TextFormField(
decoration: InputDecoration(
labelText: 'Enter Text',
),
)
],
),
),
)
);
// resizeToAvoidBottomPadding: false isDeprecated
use resizeToAvoidBottomInset: true.
Compose an animation and move your TextField container up when a TextField gets focus.
For learning about composing animations refer to:
Composing Animations and Chaining Animations in Dart's Flutter Framework
Use Flutter's FocusNode to detect the focus on a TextField
Edit:
Here I've written an example that does exactly what you want:
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Animation Demo',
theme: new ThemeData(
primaryColor: new Color(0xFFFF0000),
),
home: new FormDemo(),
);
}
}
class FormDemo extends StatefulWidget {
#override
_FormDemoState createState() => _FormDemoState();
}
class _FormDemoState extends State<FormDemo> with SingleTickerProviderStateMixin {
AnimationController _controller;
Animation _animation;
FocusNode _focusNode = FocusNode();
#override
void initState() {
super.initState();
_controller = AnimationController(vsync: this, duration: Duration(milliseconds: 300));
_animation = Tween(begin: 300.0, end: 50.0).animate(_controller)
..addListener(() {
setState(() {});
});
_focusNode.addListener(() {
if (_focusNode.hasFocus) {
_controller.forward();
} else {
_controller.reverse();
}
});
}
#override
void dispose() {
_controller.dispose();
_focusNode.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: false, // this avoids the overflow error
appBar: AppBar(
title: Text('TextField Animation Demo'),
),
body: new InkWell( // to dismiss the keyboard when the user tabs out of the TextField
splashColor: Colors.transparent,
onTap: () {
FocusScope.of(context).requestFocus(FocusNode());
},
child: Container(
padding: const EdgeInsets.all(20.0),
child: Column(
children: <Widget>[
SizedBox(height: _animation.value),
TextFormField(
decoration: InputDecoration(
labelText: 'I move!',
),
focusNode: _focusNode,
)
],
),
),
),
);
}
}
Just cut and paste your body code in this -
SingleChildScrollView(
child: Stack(
children: <Widget>[
// your body code
],
),
),
A pretty short way to realize this is by simply using a MediaQuery for getting the bottom view insets. This would look as follows:
...
return Column(
children: <Widget>[
TextField(
decoration: InputDecoration.collapsed(hintText: "Start typing ..."),
controller: _chatController,
),
SizedBox(
height: MediaQuery.of(context).viewInsets.bottom,
),
],
);
...
Hope it helps!
In my case I had to combine answer given by #Javid Noutash which uses AnimationController along with scrollPadding property of TextFormField.
code:
Add this line in build method
double bottomInsets = MediaQuery.of(context).viewInsets.bottom;
Add scrollPadding property
return ListView(
children:[
...widgets,
Container(
margin:EdgeInsets.only(
top:1.0,
left:1.0,
right:1.0,
bottom:_focusNode.hasFocus && bottomInsets != 0?
_animation.value : 1.0),
child:TextFormField(
decoration: InputDecoration(
labelText: 'I move!',
),
focusNode: _focusNode,
scrollPadding: EdgeInsets.only(bottom:bottomInsets + 40.0),
),
),
]
);
Note: Combine this code with #Javid Noutash's code
I had the same problem where the parent widget is Material and the other widgets are inside a ListView. The problem was fixed when I changed the parent widget to Scaffold without any extra code and the TextField, TextFormField in my case, is being showed above the Keyboard automatically. So, if you encountered this problem just make sure to have Scaffold as the main widget.
The most simple way is to just wrap it with
SingleChildScrollView( ... )
When the textfield is on the page bottom and the keyboard appears, the textfield is automatically scrolled up. Then the text may be entered right above the keyboard.
My way here
Scaffold(
resizeToAvoidBottomInset: false,
resizeToAvoidBottomPadding: false,
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/Bg img.png'), fit: BoxFit.fill)),
child: Padding(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom),
child: CustomScrollView(
slivers: [
SliverFillRemaining(
hasScrollBody: false,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
.............
This template has some advantages:
Move content up when the keyboard appears
Column using spaceBetween inside a scroll view
Background is sticked phone scren and never change event the keyboard ups
Wrap your widget into Padding and set padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
<activity
android:name="..ActivityName"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
android:hardwareAccelerated="true"
android:windowSoftInputMode="adjustResize"/>
only for android
if you use FlutterFragment add configChanges and windowSoftInputMode for the Activity.
another way
add your TextField to a ListView
ListView(
children: <Widget>[
TextField(),
TextField(),
]
)
The above does not work if you have a CustomScrollview in a NestedScrollView.
First, you need to give the TextField a focusNode.
TextField(focusNode:_focusNode(),
...);
Use NestedScrollViewState to get access to the innerScrollController of the NestedScrollView. You can view the example here on how to get the innerScrollController. Declare a globalKey and assign it to NestedScrollView.
body: NestedScrollView(
key: globalKey,
...)
Setup the focusNode Listener to listen for when the textfield has been activated and animate the innerScrollController accordingly.
void initState() {
super.initState();
_focusNode.addListener(() {
if (_focusNode.hasFocus) {
double innerOffSet = globalKey.currentState.innerController.offset;
if(innerOffSet < 100)
globalKey.currentState.innerController.jumpTo(innerOffSet+100);
}
});
}
var _contentController;
void _settingModalBottomSheet(BuildContext context, String initialText) {
_contentController = new TextEditingController(text: initialText);
showModalBottomSheet(
context: context,
isDismissible: true,
builder: (BuildContext bc) {
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
height: 40,
margin: EdgeInsets.only(left: 4, right: 4, bottom: 8),
decoration: BoxDecoration(
color: AppColor.bgTextFieldComment,
borderRadius: BorderRadius.circular(16),
),
child: Row(
children: <Widget>[
Expanded(
child: Padding(
padding: EdgeInsets.only(left: 24),
child: TextField(
focusNode: _contentFocusNode,
autofocus: true,
controller: _contentController,
decoration: InputDecoration(
hintText: 'Enter Content',
border: InputBorder.none,
fillColor: AppColor.bgTextFieldComment,
),
keyboardType: TextInputType.multiline,
maxLines: null,
style: TextStyle(
color: Colors.black87,
fontSize: 16,
fontStyle: FontStyle.normal,
),
)),
),
InkWell(
child: Padding(
padding: EdgeInsets.only(left: 4, right: 4),
child: Icon(
Icons.send,
color: Colors.blue,
),
),
onTap: () {
// do ON TAP
},
),
],
),
),
SizedBox(
height: MediaQuery.of(bc).viewInsets.bottom,
),
],
);
},).then((value) {
print('Exit Modal');
});
print('request focus');
_contentFocusNode.requestFocus();
}
Instead of TextField, use TextFormField and wrap the widget with a list of TextFormField to Form:
Form(
child: Column(
children: <Widget> [
TextFormField(),
TextFormField(),
...
TextFormField(),
]
)
)
you can easily try to use Flexible widget just wrap your widget with it
Flexible(
child: Image(
image :
AssetImage('assets/logo.png'),
),
),
I had a very complex widget with Stack, Column and Single ChildChildScrollView, and I fixed it by adding a padding to the SCSV like this:
child: Stack(
children: [
Padding(
padding: const EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
child: SingleChildScrollView(
child: Column(
children: [... a lot of children here, one of them is a TextField],
),
),
),
// a widget at the bottom of the stack that shows despite the size of the scrollable column
],
),
It's very easy in my case check out code
Column(
children: [
Expanded(
child:// Top View,
),
postSend // edittext. and button
],
)