I have a flutter web app. When I use it on my computer everything works fine. But if I use it on my phones browser parts of the Text are just missing. The Bounds of the text or the box dont matter, its just missing. Only if I press it, it shows the whole text. Has anyone an idea why that could be? Oh and when I shorten the text its the same. The last part is missing.
Already tried using FittedBox for the text but doesnt work. Thanks
Code for the alertBoxes:
void showCustomDialog(BuildContext context, String message) {
showDialog(
context: context,
child: AlertDialog(
title: FittedBox(
fit: BoxFit.scaleDown,
child: Text(
message,
style: TextStyle(color: Colors.red),
),
),
actions: [
FlatButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text(
"Abbrechen",
style: TextStyle(color: Colors.red),
),
),
]));
}
First part of the dialog:
Widget dialog(BuildContext context) {
return AlertDialog(
title: Text("Kategorie Hinzufügen?"),
content: TextFormField(
controller: textEditingController,
decoration: InputDecoration(
labelText: "Namen eingeben",
prefixIcon: Icon(Icons.category_outlined)),
onChanged: (String val) {},
),
actions: [
FlatButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text(
"Abbrechen",
style: TextStyle(color: Colors.red),
),
),
I fixed it. Apparently it happens when I use DuckDuckGo. When I use Chrome everything is fine. But when you use DuckDuckGo the last character of the String or if you have spaces everything behind the last space gets cutted. Hm strange
The flutter team just fixed it on the master channel (1.26.0-2.0.pre.403). I have tested it and it works fine. Probably soon it will be on the beta channel.
https://github.com/flutter/flutter/issues/65099
Related
I'm having trouble creating showDialog. I want to draw a dialog apo sample I have all the elements. But the problem is that I can't place them properly. Here's what I want to do:
enter image description here
I'm having trouble creating showDialog. I want to draw a dialog apo sample I have all the elements. But the problem is that I can't place them properly. Here's what I want to do:
There is text, an icon and a button. I created it all, but there is a problem with the display, it's not in the center. Here is my code, can anyone know how all this will lead to a normal look, I will be grateful.
_showDialog(BuildContext context) {
showDialog(
context: context,
builder: (BuildContext ctx) {
// return object of type Dialog
return AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(15)),
),
title: Center(child: Text(Titles.serviceNotAvailable)),
//content: const Text(Titles.serviceNotAvailable),
actions: <Widget>[
SvgPicture.asset(Img.simpleOrder),
CustomElevatedButton(
isDark: false,
isEnabled: false,
onPressed: () {
_showDialog(context);
},
child: Text(
Titles.backToChoiceServices,
style: TextStyle(
color: Colorz.primary,
fontSize: FontSize.small,
fontWeight: FontWeight.w600,
),
),
),
],
);
},
);
}
Trye to wrap it in a Center widget, setting it as his child.
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.
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 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.
I have a sign-up page which contains Text like privacy policy, terms and etc and I want that on clicking those text webpage should get open.
I used the GestureDetector for that but the issue is that it contains one child only
But I want all the three texts to be there and should perform Onclick or here onTap.
Any idea?
GestureDetector(
onTap: () => launch(
'https://docs.flutter.io/flutter/services/UrlLauncher- class.html'),
child: Text('Terms of use,',
style: TextStyle(
color: Colors.blueAccent,
fontSize: 18.0,
fontWeight: FontWeight.bold)),
)
expected: all three text with onTap inside GestureDetector.
actual: only one child is there.
You can try creating a Row widget which contains the text you need, that is, privacy policy, terms and etc, as its children. And then wrap the Text widgets with GestureDetector widgets. A code snippet is given below:
Container(
alignment: Alignment.center,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
GestureDetector(
onTap: (){
print("Privacy policy");
},
child: Text("Privacy policy, "),
),
GestureDetector(
onTap: (){
print('Terms');
},
child: Text("Terms, "),
),
GestureDetector(
onTap: (){
print('Contact Us');
},
child: Text("Contact Us"),
),
],
),
),
Outputs:
Hope this helps!!
That's currently not directly supported by Flutter. But you can use RichText for implementing the requirement.
It is similar to Spannable string in Android.