I am trying a simple pop-up that should increment everytime I press the 'Use' button. Using the print command, it is showing the correct current value everytime I press. But for the Text itself, it is just staying a constant value. Any suggestion to fix this? Thanks!
showUsePopup() async {
AwesomeDialog(
context: globalScaffoldKey.currentContext!,
dialogType: DialogType.NO_HEADER,
dismissOnTouchOutside: false,
headerAnimationLoop: false,
animType: AnimType.SCALE,
body: Column(
children: [
Row(
children: [
Text('${controller.numOfItemObs.value}'),
ElevatedButton(
onPressed: () {
controller.numOfItemObs.value++;
print('Current value: ${controller.numOfItemObs.value}');
},
child: const Text('Use'),
),
],
),
],
),
showCloseIcon: false,
btnOkOnPress: () async {},
).show();
}
You need to wrap up the Text widget with Obx. It will update the Text value whenever the changes happen. Here is the example that you can follow.
Obx(
() => Text('${controller.numOfItemObs.value}')')
),
Related
I have a SelectableText Widget with a string which is a phone number
Starts with +
Has 12 digits
When the text is selected, the option to call it doesn't appear.
If I open the same text for example in a google search as below, I can see the option to call it. How can I make that in Flutter?
You may use the contextMenuBuilder property for this.
It will help you creating a different context menu depending on the current state of the user's selection:
More info: see contextMenuBuilder property in SelectableText widget doc
SelectableText(
'data to show',
contextMenuBuilder: (_, textState) => Row(
children: [
if (isPhoneNumber(textState.textEditingValue.text))
Container(), //Widget to make the phone call here
],
),
),
bool isPhoneNumber(String selection) {
if (!selection.startsWith('+')) return false;
return RegExp(r'^[0-9]+$').hasMatch(selection.substring(1));
}
I solved it by looking at the example pointed out by #Luis Utrera
Solution:
contextMenuBuilder: (context, EditableTextState editableTextState) {
return AdaptiveTextSelectionToolbar(
anchors: editableTextState.contextMenuAnchors,
children: [
Padding(
padding: const EdgeInsets.all(10),
child: IconButton(
icon: Icon(Icons.call),
onPressed: () {
// TODO: launch call app
},
),
),
...editableTextState.contextMenuButtonItems
.map((ContextMenuButtonItem buttonItem) {
return CupertinoButton(
borderRadius: null,
onPressed: buttonItem.onPressed,
padding: const EdgeInsets.all(10.0),
pressedOpacity: 0.7,
child: Text(
CupertinoTextSelectionToolbarButton.getButtonLabel(
context,
buttonItem,
),
),
);
})
.toList()
.cast(),
],
);
},
Is there a way to get the "enter" key keyboard event in flutter to default to one of the action buttons on my AlertDialog? Note I'm referring to use of flutter for web where there is a physical keyboard. For example I have this dialog:
Future<void> _confirmDelete(int index) async {
var fp = SessionInfo.of(context).myFloorplans.entries.toList()[index].value;
return showDialog<void>(
context: context,
barrierDismissible: false,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Confirm Delete?'),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(8.0))),
content: SingleChildScrollView(
child: ListBody(
children: <Widget>[
Text("Please confirm deleting ${fp.name}"),
],
),
),
actions: <Widget>[
FlatButton(
child: Text('Cancel'),
onPressed: () {
Navigator.of(context).pop();
},
),
FlatButton(
child: Text('Delete'),
onPressed: () {
_deleteFloorplan(index);
Navigator.of(context).pop();
},
),
],
);
},
);
}
Is there a way to default the "enter" key on the keyboard to act like they hit delete? Maybe not the safest UI experience yet, but mostly just asking to understand the foundation here.
Thanks,
Justin
The only thing you need to do is wrap your AlertDialog in a RawKeyboardListener.
check this example :
RawKeyboardListener(
// its better to initialize and dispose of the focus node only for this alert dialog
focusNode: FocusNode(),
autofocus: true,
onKey: (v) {
if (v.logicalKey == LogicalKeyboardKey.enter) {
_deleteFloorplan(index);
Navigator.pop(context);
}
},
child: your alert dialog ...
I don't see anything that will cause the keyboard to show in this dialog.
Anyway if you have a TextFormField that will show the keyboard you can do something like this
onFieldSubmitted: (value) {
_deleteFloorplan(index);
Navigator.of(context).pop();
}
onFieldSubmitted gets called whenever the user hits the text Input action button (the "enter" key you mentioned)
In my app users are required to submit their government ID's for verification to keep using the app. On the basis of the condition "isIDverified" it displays a text "Verified" or if it's under review it displays "Under Review". Inside the verified condition I want to put a popup which will say "Your account is under review" along with the text somewhere around this green empty block.
My code:
if (isIDVerified) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Verified',
style: kAppBarTitleTextStyle.copyWith(color: primaryColor),
),
SizedBox(
width: _screenUtil.setWidth(10),
),
Icon(
Icons.verified_user,
size: kPreferredIconSize,
color: Colors.green,
),
],
);
} else if (isIDUnderReview) {
return
Text(
'ID Under Review',
style: kAppBarTitleTextStyle.copyWith(color: primaryColor),
);
As far as I understand your question, I would like to answer it.
For displaying popups, you can make use of AlertDialogs.
You can do something like this.
void informUser() {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: new Text("Under Review"),
content: Column(
children: [ LIST OF WIDGETS ]
),
actions: <Widget>[
new FlatButton(
child: new Text("Close"),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}
You can put your widgets in the Column widget of AlertDialog's content.
I'm trying to use a textfield as a button so when someone taps it, it takes him to a different page.
I've tried disabling the textfield but then I cannot use the onTap property. But if the textfield is not disabled, when I click it, it gets editing focus and this is something I don't want.
Can anyone help what's the easiest way this could be done?
Thanks
TextField(
readOnly: true,
onTap: () {
// Do something
},
);
You can use a Flatbutton instead. Just put this in your code:
FlatButton(
onPressed: () {
/*...*/
},
child: Text(
"Clickable text!",
),
)
Or else use a GestureDetector:
GestureDetector(
OnTap: () {...},
child: TextField(
// Text...
),
);
you can wrap it with an InkWell, see below:
InkWell(
onTap: () {
},
child: Container(
padding: EdgeInsets.all(4.0),
child: Text('Click me'),
),
);
you can try the following.
GestureDetector(
onTap: () {
// redirect // nav to different screen
},
child: TextField(
enabled: false
),
)
References
TextField
GestureDetector
I am using the flutter Slidable widget inside a SliverList, where the list elements are pulled from an array. I use setState to update the list.
The problem I am having is that after the list update, I can see all new elements correctly, but the slidable functionality doesn't work. However, after entering a new page with push and leaving with pop, the slidable functionality starts working.
Why is this happening?
return SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) => Card(
child: InkWell(
child: Slidable(
key: Key(_fileList[index].key),
actionPane: SlidableDrawerActionPane(),
child: Container(
child: ListTile(
onTap: () {
...
},
title: Text(_fileList[index].subtitle),
subtitle: Text(_fileList[index].subtitle),
),
),
secondaryActions: <Widget>[
IconSlideAction(
caption: 'Delete',
color: Colors.red,
icon: Icons.delete,
onTap: () {
...
}
),
],
),
),
),
childCount: _fileList.length,
),
);
Updating is done like this:
setState(() {
_fileList = newFileList;
});
i think you may try not to test on hot reload
just type in terminal : flutter run
Never mind, i accidentally disabled and then re-enabled the SlidableController.