DropdownButtonFormField, with fixed width but dynamic text itemsButton Width Match Parent : FlutterHow to offset a scaffold widget in Flutter?How to fix Text widget overflow issue to show the overflowed text in next line?Flutter : Bad state: Stream has already been listened toRemove items from GridView in Flutter dynamicallyFull width button, how to align textGridView inside a Listview causing “Vertical viewport was given unbounded height” even when ExpandedFlutter infinite/long list - memory issue and stack overflow errorSet text to match column width in flutterFlutter TextField width should match width of contained text
Copycat chess is back
Divisibility of sum of multinomials
How is the claim "I am in New York only if I am in America" the same as "If I am in New York, then I am in America?
Why do we use polarized capacitor?
Can Medicine checks be used, with decent rolls, to completely mitigate the risk of death from ongoing damage?
"which" command doesn't work / path of Safari?
What is the command to reset a PC without deleting any files
Can town administrative "code" overule state laws like those forbidding trespassing?
What makes Graph invariants so useful/important?
Why is an old chain unsafe?
Can you lasso down a wizard who is using the Levitate spell?
cryptic clue: mammal sounds like relative consumer (8)
How can I fix this gap between bookcases I made?
How to determine if window is maximised or minimised from bash script
How do we improve the relationship with a client software team that performs poorly and is becoming less collaborative?
Is there a familial term for apples and pears?
How did the USSR manage to innovate in an environment characterized by government censorship and high bureaucracy?
Need help identifying/translating a plaque in Tangier, Morocco
Can I interfere when another PC is about to be attacked?
N.B. ligature in Latex
Email Account under attack (really) - anything I can do?
Does the radius of the Spirit Guardians spell depend on the size of the caster?
Is it legal to have the "// (c) 2019 John Smith" header in all files when there are hundreds of contributors?
Why has Russell's definition of numbers using equivalence classes been finally abandoned? ( If it has actually been abandoned).
DropdownButtonFormField, with fixed width but dynamic text items
Button Width Match Parent : FlutterHow to offset a scaffold widget in Flutter?How to fix Text widget overflow issue to show the overflowed text in next line?Flutter : Bad state: Stream has already been listened toRemove items from GridView in Flutter dynamicallyFull width button, how to align textGridView inside a Listview causing “Vertical viewport was given unbounded height” even when ExpandedFlutter infinite/long list - memory issue and stack overflow errorSet text to match column width in flutterFlutter TextField width should match width of contained text
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I don't think I understand constraints in Flutter that well so bear with me!
I want to DropdownButtonFormField
that populates its items from DB. The string could be of any dynamic length. So what I have decided is to have a fixed width DropdownButtonFormField
and DropdownMenuItem
will have ellipsed Text
.
Here is what I have tried.
SizedBox(
width: 136.0,
child: DropdownButtonFormField<int>(
hint: Text("hintText")
decoration: InputDecoration(
contentPadding: const EdgeInsets.all(0.0),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
isDense: true),
items: [
DropdownMenuItem<int>(
value: 0,
child: TextOneLine(
"less character",
),
),
DropdownMenuItem<int>(
value: 0,
child: TextOneLine(
"mooooorrrrreeee character",
),
)
]
),
);
class TextOneLine extends StatelessWidget
final String data;
final TextStyle style;
final TextAlign textAlign;
final bool autoSize;
TextOneLine(
String data,
Key key,
this.style,
this.textAlign,
this.autoSize = false,
) : this.data = data,
assert(data != null),
super(key: key);
@override
Widget build(BuildContext context)
return Text(
data,
style: style,
textAlign: textAlign,
maxLines: 1,
overflow: TextOverflow.ellipsis,
);
- I am getting overflow error
- but when I click on
DropdownButtonFormField
the list ofDropdownMenuItem
are ellipsed.
How do I get rid of the Overflow error? I can't have Flexible or Expanded DropDownButtonFormField because the String length could be dynamic (could be longer than what could fit).
dart flutter flutter-layout
|
show 3 more comments
I don't think I understand constraints in Flutter that well so bear with me!
I want to DropdownButtonFormField
that populates its items from DB. The string could be of any dynamic length. So what I have decided is to have a fixed width DropdownButtonFormField
and DropdownMenuItem
will have ellipsed Text
.
Here is what I have tried.
SizedBox(
width: 136.0,
child: DropdownButtonFormField<int>(
hint: Text("hintText")
decoration: InputDecoration(
contentPadding: const EdgeInsets.all(0.0),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
isDense: true),
items: [
DropdownMenuItem<int>(
value: 0,
child: TextOneLine(
"less character",
),
),
DropdownMenuItem<int>(
value: 0,
child: TextOneLine(
"mooooorrrrreeee character",
),
)
]
),
);
class TextOneLine extends StatelessWidget
final String data;
final TextStyle style;
final TextAlign textAlign;
final bool autoSize;
TextOneLine(
String data,
Key key,
this.style,
this.textAlign,
this.autoSize = false,
) : this.data = data,
assert(data != null),
super(key: key);
@override
Widget build(BuildContext context)
return Text(
data,
style: style,
textAlign: textAlign,
maxLines: 1,
overflow: TextOverflow.ellipsis,
);
- I am getting overflow error
- but when I click on
DropdownButtonFormField
the list ofDropdownMenuItem
are ellipsed.
How do I get rid of the Overflow error? I can't have Flexible or Expanded DropDownButtonFormField because the String length could be dynamic (could be longer than what could fit).
dart flutter flutter-layout
use -FittedBox
widget - docs.flutter.io/flutter/widgets/FittedBox-class.html
– anmol.majhail
Mar 9 at 6:09
I tried wrappingFittedBox
aroundSizedBox
- the overflow error is not going. I can see the textSize reducing but as I said the error remains
– Harsh Bhikadia
Mar 9 at 9:42
can you produce minimum reproducible code of the issue ?
– anmol.majhail
Mar 9 at 11:29
done. check now
– Harsh Bhikadia
Mar 9 at 14:05
Likely the SizedBox the issue
– Rémi Rousselet
Mar 11 at 9:15
|
show 3 more comments
I don't think I understand constraints in Flutter that well so bear with me!
I want to DropdownButtonFormField
that populates its items from DB. The string could be of any dynamic length. So what I have decided is to have a fixed width DropdownButtonFormField
and DropdownMenuItem
will have ellipsed Text
.
Here is what I have tried.
SizedBox(
width: 136.0,
child: DropdownButtonFormField<int>(
hint: Text("hintText")
decoration: InputDecoration(
contentPadding: const EdgeInsets.all(0.0),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
isDense: true),
items: [
DropdownMenuItem<int>(
value: 0,
child: TextOneLine(
"less character",
),
),
DropdownMenuItem<int>(
value: 0,
child: TextOneLine(
"mooooorrrrreeee character",
),
)
]
),
);
class TextOneLine extends StatelessWidget
final String data;
final TextStyle style;
final TextAlign textAlign;
final bool autoSize;
TextOneLine(
String data,
Key key,
this.style,
this.textAlign,
this.autoSize = false,
) : this.data = data,
assert(data != null),
super(key: key);
@override
Widget build(BuildContext context)
return Text(
data,
style: style,
textAlign: textAlign,
maxLines: 1,
overflow: TextOverflow.ellipsis,
);
- I am getting overflow error
- but when I click on
DropdownButtonFormField
the list ofDropdownMenuItem
are ellipsed.
How do I get rid of the Overflow error? I can't have Flexible or Expanded DropDownButtonFormField because the String length could be dynamic (could be longer than what could fit).
dart flutter flutter-layout
I don't think I understand constraints in Flutter that well so bear with me!
I want to DropdownButtonFormField
that populates its items from DB. The string could be of any dynamic length. So what I have decided is to have a fixed width DropdownButtonFormField
and DropdownMenuItem
will have ellipsed Text
.
Here is what I have tried.
SizedBox(
width: 136.0,
child: DropdownButtonFormField<int>(
hint: Text("hintText")
decoration: InputDecoration(
contentPadding: const EdgeInsets.all(0.0),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
isDense: true),
items: [
DropdownMenuItem<int>(
value: 0,
child: TextOneLine(
"less character",
),
),
DropdownMenuItem<int>(
value: 0,
child: TextOneLine(
"mooooorrrrreeee character",
),
)
]
),
);
class TextOneLine extends StatelessWidget
final String data;
final TextStyle style;
final TextAlign textAlign;
final bool autoSize;
TextOneLine(
String data,
Key key,
this.style,
this.textAlign,
this.autoSize = false,
) : this.data = data,
assert(data != null),
super(key: key);
@override
Widget build(BuildContext context)
return Text(
data,
style: style,
textAlign: textAlign,
maxLines: 1,
overflow: TextOverflow.ellipsis,
);
- I am getting overflow error
- but when I click on
DropdownButtonFormField
the list ofDropdownMenuItem
are ellipsed.
How do I get rid of the Overflow error? I can't have Flexible or Expanded DropDownButtonFormField because the String length could be dynamic (could be longer than what could fit).
dart flutter flutter-layout
dart flutter flutter-layout
edited Mar 9 at 14:04
Harsh Bhikadia
asked Mar 9 at 4:09
Harsh BhikadiaHarsh Bhikadia
673526
673526
use -FittedBox
widget - docs.flutter.io/flutter/widgets/FittedBox-class.html
– anmol.majhail
Mar 9 at 6:09
I tried wrappingFittedBox
aroundSizedBox
- the overflow error is not going. I can see the textSize reducing but as I said the error remains
– Harsh Bhikadia
Mar 9 at 9:42
can you produce minimum reproducible code of the issue ?
– anmol.majhail
Mar 9 at 11:29
done. check now
– Harsh Bhikadia
Mar 9 at 14:05
Likely the SizedBox the issue
– Rémi Rousselet
Mar 11 at 9:15
|
show 3 more comments
use -FittedBox
widget - docs.flutter.io/flutter/widgets/FittedBox-class.html
– anmol.majhail
Mar 9 at 6:09
I tried wrappingFittedBox
aroundSizedBox
- the overflow error is not going. I can see the textSize reducing but as I said the error remains
– Harsh Bhikadia
Mar 9 at 9:42
can you produce minimum reproducible code of the issue ?
– anmol.majhail
Mar 9 at 11:29
done. check now
– Harsh Bhikadia
Mar 9 at 14:05
Likely the SizedBox the issue
– Rémi Rousselet
Mar 11 at 9:15
use -
FittedBox
widget - docs.flutter.io/flutter/widgets/FittedBox-class.html– anmol.majhail
Mar 9 at 6:09
use -
FittedBox
widget - docs.flutter.io/flutter/widgets/FittedBox-class.html– anmol.majhail
Mar 9 at 6:09
I tried wrapping
FittedBox
around SizedBox
- the overflow error is not going. I can see the textSize reducing but as I said the error remains– Harsh Bhikadia
Mar 9 at 9:42
I tried wrapping
FittedBox
around SizedBox
- the overflow error is not going. I can see the textSize reducing but as I said the error remains– Harsh Bhikadia
Mar 9 at 9:42
can you produce minimum reproducible code of the issue ?
– anmol.majhail
Mar 9 at 11:29
can you produce minimum reproducible code of the issue ?
– anmol.majhail
Mar 9 at 11:29
done. check now
– Harsh Bhikadia
Mar 9 at 14:05
done. check now
– Harsh Bhikadia
Mar 9 at 14:05
Likely the SizedBox the issue
– Rémi Rousselet
Mar 11 at 9:15
Likely the SizedBox the issue
– Rémi Rousselet
Mar 11 at 9:15
|
show 3 more comments
1 Answer
1
active
oldest
votes
Please refer the attached images, I've added 3 images.
Image 1: this is the issue you are getting.
Image 2: when I removed the width
from SizedBox
. Now it shows 3 boxes 1 is hint text and other is empty and 3rd is the drop-down arrow. I think the overflow is causing because of the 2nd empty space.
Image 3: Now in this, I've again added a width to SizedBox
of 136
and put the SizedBox
inside a Container
having a fixed width size of 100
(is the width of the text in dropdown and it will wrap your text as per the width for sure). This resolved the overflow issue as per the code you have given.
I think as you have added a custom widget which is TextOneLine
causing the issue. There may be some other workarounds but this solved the issue.
SizedBox(
width: 136,
child: DropdownButtonFormField<int>(
hint: Text("hintText"),
decoration: InputDecoration(
contentPadding: const EdgeInsets.all(0.0),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
isDense: true),
items: [
DropdownMenuItem<int>(
value: 0,
child: Container(
width: 100,
child: TextOneLine(
"less character",
),
),
),
DropdownMenuItem<int>(
value: 0,
child: Container(
width: 100,
child: TextOneLine(
"mooooorrrrreeee character",
),
))
]),
)
Try out this and let me know whether this was the issue (and resolved) and please keep us updated any other workaround you done. Thanks
that makes sense. it is a very simple solution. i feel dumb now!! Thanks anyways.
– Harsh Bhikadia
Mar 11 at 12:35
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55073897%2fdropdownbuttonformfield-with-fixed-width-but-dynamic-text-items%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Please refer the attached images, I've added 3 images.
Image 1: this is the issue you are getting.
Image 2: when I removed the width
from SizedBox
. Now it shows 3 boxes 1 is hint text and other is empty and 3rd is the drop-down arrow. I think the overflow is causing because of the 2nd empty space.
Image 3: Now in this, I've again added a width to SizedBox
of 136
and put the SizedBox
inside a Container
having a fixed width size of 100
(is the width of the text in dropdown and it will wrap your text as per the width for sure). This resolved the overflow issue as per the code you have given.
I think as you have added a custom widget which is TextOneLine
causing the issue. There may be some other workarounds but this solved the issue.
SizedBox(
width: 136,
child: DropdownButtonFormField<int>(
hint: Text("hintText"),
decoration: InputDecoration(
contentPadding: const EdgeInsets.all(0.0),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
isDense: true),
items: [
DropdownMenuItem<int>(
value: 0,
child: Container(
width: 100,
child: TextOneLine(
"less character",
),
),
),
DropdownMenuItem<int>(
value: 0,
child: Container(
width: 100,
child: TextOneLine(
"mooooorrrrreeee character",
),
))
]),
)
Try out this and let me know whether this was the issue (and resolved) and please keep us updated any other workaround you done. Thanks
that makes sense. it is a very simple solution. i feel dumb now!! Thanks anyways.
– Harsh Bhikadia
Mar 11 at 12:35
add a comment |
Please refer the attached images, I've added 3 images.
Image 1: this is the issue you are getting.
Image 2: when I removed the width
from SizedBox
. Now it shows 3 boxes 1 is hint text and other is empty and 3rd is the drop-down arrow. I think the overflow is causing because of the 2nd empty space.
Image 3: Now in this, I've again added a width to SizedBox
of 136
and put the SizedBox
inside a Container
having a fixed width size of 100
(is the width of the text in dropdown and it will wrap your text as per the width for sure). This resolved the overflow issue as per the code you have given.
I think as you have added a custom widget which is TextOneLine
causing the issue. There may be some other workarounds but this solved the issue.
SizedBox(
width: 136,
child: DropdownButtonFormField<int>(
hint: Text("hintText"),
decoration: InputDecoration(
contentPadding: const EdgeInsets.all(0.0),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
isDense: true),
items: [
DropdownMenuItem<int>(
value: 0,
child: Container(
width: 100,
child: TextOneLine(
"less character",
),
),
),
DropdownMenuItem<int>(
value: 0,
child: Container(
width: 100,
child: TextOneLine(
"mooooorrrrreeee character",
),
))
]),
)
Try out this and let me know whether this was the issue (and resolved) and please keep us updated any other workaround you done. Thanks
that makes sense. it is a very simple solution. i feel dumb now!! Thanks anyways.
– Harsh Bhikadia
Mar 11 at 12:35
add a comment |
Please refer the attached images, I've added 3 images.
Image 1: this is the issue you are getting.
Image 2: when I removed the width
from SizedBox
. Now it shows 3 boxes 1 is hint text and other is empty and 3rd is the drop-down arrow. I think the overflow is causing because of the 2nd empty space.
Image 3: Now in this, I've again added a width to SizedBox
of 136
and put the SizedBox
inside a Container
having a fixed width size of 100
(is the width of the text in dropdown and it will wrap your text as per the width for sure). This resolved the overflow issue as per the code you have given.
I think as you have added a custom widget which is TextOneLine
causing the issue. There may be some other workarounds but this solved the issue.
SizedBox(
width: 136,
child: DropdownButtonFormField<int>(
hint: Text("hintText"),
decoration: InputDecoration(
contentPadding: const EdgeInsets.all(0.0),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
isDense: true),
items: [
DropdownMenuItem<int>(
value: 0,
child: Container(
width: 100,
child: TextOneLine(
"less character",
),
),
),
DropdownMenuItem<int>(
value: 0,
child: Container(
width: 100,
child: TextOneLine(
"mooooorrrrreeee character",
),
))
]),
)
Try out this and let me know whether this was the issue (and resolved) and please keep us updated any other workaround you done. Thanks
Please refer the attached images, I've added 3 images.
Image 1: this is the issue you are getting.
Image 2: when I removed the width
from SizedBox
. Now it shows 3 boxes 1 is hint text and other is empty and 3rd is the drop-down arrow. I think the overflow is causing because of the 2nd empty space.
Image 3: Now in this, I've again added a width to SizedBox
of 136
and put the SizedBox
inside a Container
having a fixed width size of 100
(is the width of the text in dropdown and it will wrap your text as per the width for sure). This resolved the overflow issue as per the code you have given.
I think as you have added a custom widget which is TextOneLine
causing the issue. There may be some other workarounds but this solved the issue.
SizedBox(
width: 136,
child: DropdownButtonFormField<int>(
hint: Text("hintText"),
decoration: InputDecoration(
contentPadding: const EdgeInsets.all(0.0),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
isDense: true),
items: [
DropdownMenuItem<int>(
value: 0,
child: Container(
width: 100,
child: TextOneLine(
"less character",
),
),
),
DropdownMenuItem<int>(
value: 0,
child: Container(
width: 100,
child: TextOneLine(
"mooooorrrrreeee character",
),
))
]),
)
Try out this and let me know whether this was the issue (and resolved) and please keep us updated any other workaround you done. Thanks
edited Mar 11 at 11:25
answered Mar 11 at 11:00
Amol GAmol G
34513
34513
that makes sense. it is a very simple solution. i feel dumb now!! Thanks anyways.
– Harsh Bhikadia
Mar 11 at 12:35
add a comment |
that makes sense. it is a very simple solution. i feel dumb now!! Thanks anyways.
– Harsh Bhikadia
Mar 11 at 12:35
that makes sense. it is a very simple solution. i feel dumb now!! Thanks anyways.
– Harsh Bhikadia
Mar 11 at 12:35
that makes sense. it is a very simple solution. i feel dumb now!! Thanks anyways.
– Harsh Bhikadia
Mar 11 at 12:35
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55073897%2fdropdownbuttonformfield-with-fixed-width-but-dynamic-text-items%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
use -
FittedBox
widget - docs.flutter.io/flutter/widgets/FittedBox-class.html– anmol.majhail
Mar 9 at 6:09
I tried wrapping
FittedBox
aroundSizedBox
- the overflow error is not going. I can see the textSize reducing but as I said the error remains– Harsh Bhikadia
Mar 9 at 9:42
can you produce minimum reproducible code of the issue ?
– anmol.majhail
Mar 9 at 11:29
done. check now
– Harsh Bhikadia
Mar 9 at 14:05
Likely the SizedBox the issue
– Rémi Rousselet
Mar 11 at 9:15