I would like to show DropdownButtonFormField's List of item in the middle of screen. It's never aligned to the center. DropdownButtonFormField is centered already. Spacing on the left and right side are different.
You should be try this
Add DropdownButtonFormField() inside Padding() Widget
Padding (
padding:EdgeInsets.all(16.0),
child:DropdownButtonFormField(),
),
Use this
DropdownButton(
isExpanded: true
value: fieldSelected,
items: items.map<DropdownMenuItem<String>>((var value) {
return DropdownMenuItem<String>(
value: value,
child: Center(
child: Text(
"Your text",
textAlign: TextAlign.center,
),
),
);
}).toList(),
),
Related
I have two DropDownButtons in one Row.
DropdownButtonHideUnderline(
child: DropdownButton(
isExpanded: true,
value: item,
items: widget.items.map((item) {
return DropdownMenuItem(
value: item,
child: Text(
item.toString(),
);
}).toList(),
onChanged: widget.onChanged,
selectedItemBuilder: (context) {
return widget.items.map((item) {
return Align(
child: Text(
item.toString(),
),
alignment: Alignment.centerLeft,
);
}).toList();
}
)
)
)
Is there a way to stretch the width of the menu instead of keeping it the size of the button?
Edit:
Example: Dart pad (Thanks to #Diwyansh; Dropdown only uses half the width of the UI, not entire)
I've fixed this and added more customization in DropdownButton2. By default dropdown menu will take button width but you can change it too if you want. Dropdownbutton2 is based on Flutter's core DropdownButton with more options you can customize to your needs.
So I have two SwitchListTiles on my modal Page, and the problem is that the text doesn't fit into it. (it takes 3 lines, but should 1)
How can I make it to be in one single line, without decreasing it's font size
child: SwitchListTile(
value: state.filter.flagId == null ? false : true,
onChanged: (newValue) =>
context.read<FilterBloc>().add(HotPressed(newValue)),
title: Text(
AppLocalizations.of(context)!.hotAdds.capitalize(),
style: FlutterFlowTheme.dark50016.copyWith(),
),
tileColor: FlutterFlowTheme.white,
activeColor: FlutterFlowTheme.primaryColor,
dense: true,
controlAffinity: ListTileControlAffinity.trailing,
),
I was thinking that the possible answer could be to decrease the distance between tile, but don't know how to do it
Just add "maxLines: 1" to Text widget
title: Text(
AppLocalizations.of(context)!.hotAdds.capitalize(),
style: FlutterFlowTheme.dark50016.copyWith(),
maxLines: 1,
),
There is default padding on the outer edges and also between the text and the switch. From what I can see the outer padding (the padding to the right of the switch and to the left of the text) defaults to 16. You can change this by adding contentPadding as an input to SwitchListTile and set the value to something smaller than 16:
contentPadding: EdgeInsets.symmetric(horizontal: 5),
But I'm not sure if you can change the padding between the text and the switch.
wrap your text widget to Flexible and trim() your text to avoid enter(\n) as string. maxLines =1.
title: Flexible(
child: Text(
AppLocalizations.of(context)!.hotAdds.capitalize().trim(),
style: FlutterFlowTheme.dark50016.copyWith(),
maxLines: 1,
),
),
I'm currently working with Flutter web and I'm trying to achieve the following:
DropdownMenu
I can't set a title for the dropdown menu, only add the title as an item in the list.
I tried what Firas Krifa proposed and I got the following result:
Result in small web size
Result in 4K size
Normal web size(FULL HD)
I don't know why in the small size the dropdownmenu appears at the left of the dropdownbutton and the 4k size appears at the right.
Also on the normal size it appears on the title, while what I want is that it drops right under the title.
Try this
new DropdownButton<String>(
items: <String>['A', 'B', 'C', 'D'].map((String value) {
return new DropdownMenuItem<String>(
value: value,
child: new Text(value),
);
}).toList(),
onChanged: (_) {},
)
The widgets DropdownButtonHideUnderline and Theme will help control how the dropdown looks in the title of the AppBar
https://material.io/guidelines/layout/structure.html#structure-app-bar
new AppBar(
title: new Theme(
child: new DropdownButtonHideUnderline(
child: new DropdownButton<String>(
value: _value,
items: <DropdownMenuItem<String>>[
new DropdownMenuItem(
child: new Text('My Page'),
value: 'one',
),
],
onChanged: (String value) {
setState(() => _value = value);
},
),
),
data: new ThemeData.dark(),
),
),
We have a list with 20+ elements that we have to show in a dropdown. The problem is that when we deploy the dropdown, the list covers all the screen. We want to reduce the number of shown elements to about 5 or 6 and be able to scroll down the rest of the list.
We would also like to know if it's possible that the dropDownMenuItems deploy under the dropDownButton.
We have tryed doing ".toList().sublist(0,5)," but this way didn´t allow us to scroll.
Widget _dropdown() {
return new Container(
width: MediaQuery.of(context).size.width * 35 / 100,
height: MediaQuery.of(context).size.height * 6 / 100,
decoration: BoxDecoration(
backgroundBlendMode: BlendMode.darken,
),
child: Theme(
child: DropdownButtonHideUnderline(
child: ButtonTheme(
alignedDropdown: true,
child: new DropdownButton(
hint: Text(
'HINT TEXT',
),
value: selected_item,
onChanged: (newValue) {
setState(
() {
selected_item = newValue;
},
);
},
isDense: false,
isExpanded: true,
items: data.map((location) {
return new DropdownMenuItem<String>(
child: new Container(
child: Align(
alignment: Alignment.centerLeft,
child: new Text(
location.toUpperCase(),
),
),
),
value: location,
);
}).toList(),
),
),
),
),
);
}
Look into this custom DropDown Button. It is the normal Dropdown Button with the possibility to give height to the widget. If you set height = 5* 48.0 (which is the _menuItemHeight) you should only see 5 elements.
I can center the DataCell in a DataRow but how do you do it for the DataColumn label?
I want the first DataColumn left justified and the rest centered. Wrapping the label in a Center widget does not take effect.
new DataColumn(
label: Center(
child: Text(statName,textAlign: TextAlign.center,
style: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),),
)
);
Found how:
DataColumn(
label: Expanded(
child: Text(
'Label',
textAlign: TextAlign.center,
))),
You may want to wrap the contents of the Label in a Center widget. There's also an Align widget that uses alignment: Alignment.center and your Text as it's child.
This is how i resolved this issue :
DataColumn(
label: Center(
widthFactor: 5.0, // You can set as per your requirement.
child: Text(
'View',
style: style_16_bold_primary,
),
),
),
I had the same problem and solved the issue by commenting the following code section in data_table.dart file.
if (onSort != null) {
final Widget arrow = _SortArrow(
visible: sorted,
down: sorted ? ascending : null,
duration: _sortArrowAnimationDuration,
);
const Widget arrowPadding = SizedBox(width: _sortArrowPadding);
label = Row(
textDirection: numeric ? TextDirection.rtl : null,
children: <Widget>[ label, arrowPadding, arrow ],
);
}