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.
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(),
],
);
},
I have an AlertDialog that I use as a settings window, when the user opens it, the Apply button is not active, I would like that when the settings change, the button becomes active and saves the changes. How can I do this?
showAlertDialogSettings(BuildContext context, state) {
Widget okButton = TextButton(
child: Text("Apply"),
onPressed: null,
);
Widget cancelButton = TextButton(
child: Text("Close"),
onPressed:() => Navigator.pop(context),
);
AlertDialog alert = AlertDialog(
title: Center(child: Text("Settings")),
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('Sound:'),
SwitchWidget(),
],),
SizedBox(
height: 48,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('Difficulty:'),
Padding(
padding: const EdgeInsets.only(right: 5),
child: DropDownButtonSettingsWidget()
),
],),
),
],
),
actions: [
okButton,
cancelButton,
],
);
showDialog(
context: context,
builder: (BuildContext context) {
return BackdropFilter (
filter: ImageFilter.blur(sigmaX: 6, sigmaY: 6),
child: alert );
},
);
}
You will need to maintain state of both the sound and the difficulty values (there are many ways to tackle this), though the simplest would be to split out the "body" of the AlertDialog to be a StatefulWidget to contain its state. From there, you can check whether values have changed and update the view state to enable the apply button.
It's highly recommended to not mix business logic with UI logic, so this widget shouldn't actually do any of the saving. Inputs can be encapsulated within a class, and then this class can be passed back via Navigator.of(context).pop(T) (where T is your value class, see docs) upon closing the dialog from the apply button callback.
// Input passed back via `pop(T)` can be retrieved via:
final input = await showDialog(MyAlertDialog());
Flutter Web
So I have a button called add tags which opens up a modal. The Modal has only one text field and two buttons called add another tag and submit.
Now what I want to do is when the user clicks the add another tag button the app will generate another text field.
I've already seen some videos and read the documentation but since I need to work on a modal and the modal has defined size I'm not sure how to handle issues like
What happens if the user adds a lot of tags. How can I make the modal scrollable?
I'm new to flutter_form_builder so I'm not sure if the modal can handle it or not.
Here's my code:
final _formKey = GlobalKey<FormBuilderState>();
Future buildAddTagsForm(BuildContext context,
{Function()? notifyParent}) async {
return await showDialog(
barrierDismissible: false,
barrierColor: Colors.black.withOpacity(0.5),
context: context,
builder: (context) {
var screen = MediaQuery.of(context).size;
return StatefulBuilder(
builder: (context, setState) {
return AlertDialog(
content: SingleChildScrollView(
child: Container(
height: screen.height / 2,
width: screen.height > 650 ? 600.00 : screen.height * 1,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: FormBuilder(
key: _formKey,
autovalidateMode: AutovalidateMode.onUserInteraction,
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
IconButton(
onPressed: () {
Navigator.pop(context);
},
icon: Icon(
Icons.cancel_presentation_rounded,
),
),
],
),
SizedBox(
height: 10,
),
FormBuilderTextField(
name: 'Tag Name',
decoration: InputDecoration(labelText: 'Tag name'),
validator: FormBuilderValidators.compose([
FormBuilderValidators.required(context),
]),
),
SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
MaterialButton(
color: CustomColors.buttonColor,
child: Text(
"Add another tag",
style: TextStyle(
color: Colors.white,
),
),
onPressed: () {},
)
],
),
SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
MaterialButton(
color: CustomColors.buttonColor,
child: Text(
"Submit",
style: TextStyle(
color: Colors.white,
),
),
onPressed: () {},
)
],
),
],
),
),
),
),
),
);
},
);
},
);
}
I'm assuming by "modal" we're talking about the AlertDialog here:
return AlertDialog(
content: SingleChildScrollView(
By using SingleChildScrollView as the AlertDialog content:, we can have any size / any number of text fields we like in the dialog. If their number are too many for the height of dialog inside our screen, the content will scroll.
Although, its immediate child Container with height prevents the SingleChildScrollView from doing its magic:
return AlertDialog(
content: SingleChildScrollView(
child: Container(
height: screen.height / 2,
I think the above AlertDialog would not scroll because it would never be big enough to need to scroll. Plus, any fields added that combine to be taller than that specified height (screen.height / 2) will cause an overflow warning and be cutoff visually.
So to answer question #1: "What happens if the user adds a lot of tags. How can I make the modal scrollable?"
using SingleChildScrollView is the right idea
lets swap the position of the Container with height and the SingleChildScrollView and this should allow the dialog to grow & scroll as needed as columns in FormBuilder increase
Your question #2: "I'm new to flutter_form_builder so I'm not sure if the modal can handle it or not."
flutter_form_builder shouldn't affect how SingleChildScrollView works
Example
Here's a partial example of an AlertDialog with scroll view content: that can grow in number.
Widget build(BuildContext context) {
return Container(
height: 300,
child: AlertDialog(
content: SingleChildScrollView(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: items,
),
),
),
actions: [
OutlinedButton(
child: Text('Add Row'),
onPressed: _incrementCounter
)
]
),
);
}
The complete example runnable in DartPard is here. (Add a 6 or 7 rows and then scroll the content.)
Warning
There's a gotcha with using the above AlertDialog inside a sized Container. That Container with height is not enough to constrain the AlertDialog size.
Your showDialog builder: (that pushes the AlertDialog into existence) must provide additional constraints in order for the sized Container to have constraints to size itself within. Without these constraints, the AlertDialog will grow until it matches the device viewport size. I believe this is a quirk with how showDialog is written, since I'm guessing it's a modal layer on top of the current stack of routes. (Someone can correct me if I'm wrong.) It's only constraint is the physical device, but nothing else. By wrapping builder:'s output with a constraining widget (such as Center) the output will be able to size itself.
To see this in action, remove the Center widget from the full example above an re-run it. The dialog will grow to fill the screen when adding rows instead of being at max 300px in height.
child: OutlinedButton(
child: Text('Open Dialog'),
onPressed: () => showDialog(
context: context,
builder: (context) => Center(child: MyDialog())
),
)
I am building a Flutter web app, which runs flawlessly in debug mode, but whenever I try to run it in release mode or deploy it to the hosting I see a grey box.
I see this:
Instead of this:
As you may see, this is an alertDialog, here is the code of it:
class TeamDetailsDialog extends StatelessWidget {
final Tournament tournament;
final Team team;
final String matchId;
TeamDetailsDialog(this.team, this.matchId, this.tournament);
#override
Widget build(BuildContext context) {
return Theme(
data: ThemeData(buttonBarTheme: ButtonBarThemeData(alignment: MainAxisAlignment.spaceBetween)),
child: AlertDialog(
backgroundColor: Color(0xFF333D81),
title: Text(
"Csapatnév: ${team.name}",
style: TextStyle(color: Colors.white),
),
content: DefaultTextStyle(
style: TextStyle(color: Colors.white),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Align(alignment: Alignment.centerLeft, child: Text("A csapat tagjai:")),
),
for (Player player in team.players) Text("${player.displayName}(${player.inGameDisplayName})")
],
),
),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: Text(
"Bezárás",
style: TextStyle(color: Colors.white),
)),
Spacer(),
TextButton(
onPressed: () {
// Retrieving the match object from the Cubit.
final Match matchWithoutWinner =
BlocProvider.of<TournamentCubit>(context).getMatchOfTournamentById(tournament, matchId);
// Creating a new match instance containing the winner team.
if (matchWithoutWinner is DoubleEliminationLoserBranchMatch) {
final DoubleEliminationLoserBranchMatch matchWithWinner = DoubleEliminationLoserBranchMatch(
matchWithoutWinner.id,
matchWithoutWinner.team1,
matchWithoutWinner.team2,
team,
matchWithoutWinner.parent1id,
matchWithoutWinner.parent2id);
BlocProvider.of<TournamentCubit>(context).setWinnerOfMatch(tournament, matchWithWinner);
}
else {
final Match matchWithWinner = Match(matchWithoutWinner.id, matchWithoutWinner.team1,
matchWithoutWinner.team2, team, matchWithoutWinner.parent1id, matchWithoutWinner.parent2id);
BlocProvider.of<TournamentCubit>(context).setWinnerOfMatch(tournament, matchWithWinner);
}
Navigator.pop(context);
},
child: Text(
"Beállítás győztesnek",
style: TextStyle(color: Colors.white),
))
],
),
);
}
}
I've found out that the grey box is the release version of the red screen of death. After that, I checked, none of the injected variables are null. There is only one problem in debug:
What could be the problem? Could this cause the issue and how can I fix it?
The cause of the issue was the Spacer() between the two buttons in the actions list, removing it fixed the problem, without changing the UI.
staff.ulogin is a list returned from a web service. If there is more than one item returned, I need to display of list of those items (displaying the company name). I can get the first item displaying, but I'm not sure how to display the entire list.
I also need the user to be able to tap an item so I can setup that company for use, so I'll need to know what item they chose. Thanks for any help.
if (staff.ulogin.length > 1) {
Alert(
context: context,
title: 'Choose Company',
content: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
//how to display all the items
ListTile(
title: Text(staff.ulogin[0].company),
onTap () {}, // <--- how to get the index of the item tapped
),
],
),
),
buttons: [
DialogButton(
child: Text('Cancel', style: TextStyle(color: Colors.white, fontSize: 20)),
color: kMainColor,
onPressed: () {
Navigator.of(context).pop();
},
),
],
).show();
} else
I believe that the correct way of display a list o items is using a ListView. For this case you can use a ListView.builder like this:
Container(
height: 300.0, // Change as you wish
width: 300.0, // Change as you wish
child: ListView.builder
(
itemCount: staff.ulogin.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(staff.ulogin[index].company),
onTap () {
someFunction(staff.ulogin[index]);
},
),
}
)
)