<code> Column(children: [
Row(children: [
SizedBox(width: 200,
child: Text('Name')),
Flexible(
child: Text('John')),
),
],
Row(children: [
SizedBox(width: 200,
child: Text('Command')),
Flexible(
child: MenuItemButton(
child: Text('Say Hello')),
),
],
]);
</code>
<code> Column(children: [
Row(children: [
SizedBox(width: 200,
child: Text('Name')),
Flexible(
child: Text('John')),
),
],
Row(children: [
SizedBox(width: 200,
child: Text('Command')),
Flexible(
child: MenuItemButton(
child: Text('Say Hello')),
),
],
]);
</code>
Column(children: [
Row(children: [
SizedBox(width: 200,
child: Text('Name')),
Flexible(
child: Text('John')),
),
],
Row(children: [
SizedBox(width: 200,
child: Text('Command')),
Flexible(
child: MenuItemButton(
child: Text('Say Hello')),
),
],
]);
The MenuItemButton expands to occupy all the available space in the Row. It has left padding/margin so that it does not align with the other values in the same column.
<code> Name | John
-------------------------------
Command | Say Hello |
</code>
<code> Name | John
-------------------------------
Command | Say Hello |
</code>
Name | John
-------------------------------
Command | Say Hello |
How to let the MenuItemButton have a width to fit its child? How to remove its left padding to align with “John” ?
Tried:
<code>MenuItemButton(
style: const ButtonStyle(
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
minimumSize: MaterialStatePropertyAll(Size(0, 0))),
child: Text('Say Hello'))
</code>
<code>MenuItemButton(
style: const ButtonStyle(
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
minimumSize: MaterialStatePropertyAll(Size(0, 0))),
child: Text('Say Hello'))
</code>
MenuItemButton(
style: const ButtonStyle(
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
minimumSize: MaterialStatePropertyAll(Size(0, 0))),
child: Text('Say Hello'))