'How to expand button vertically to match the height of row in flutter
I am working on a flutter project I have a TextField and an ElevatedButton.icon in a Row. The height of TextField is higher than ElevatedButton.icon as shown in the figure
I want to make the height of the button same as the height of TextField. I have tried CrossAxisAlignment.stretch but it expands the Row to whole screen. I also have tried FittedBox but the results were not satisfactory. My code of the row is given below.
Row(
children: [
const Expanded(
child: TextField(
decoration: InputDecoration(
filled: true,
labelText: "Enter To Do Task title"),
)),
ElevatedButton.icon(
onPressed: () {},
icon: const Icon(Icons.add),
label: const Padding(
padding: EdgeInsets.all(8.0),
child: Text("Add Task"),
),
style:
ElevatedButton.styleFrom(shape: const StadiumBorder()),
)
],
);
Solution 1:[1]
You just have to increase the top and bottom padding:
Row(
children: [
const Expanded(
child: TextField(
decoration: InputDecoration(
filled: true,
labelText: "Enter To Do Task title"),
)),
ElevatedButton.icon(
onPressed: () {},
icon: const Icon(Icons.add),
label: const Padding(
padding: EdgeInsets.symmetric(vertical: 18.0), // here
child: Text("Add Task"),
),
style:
ElevatedButton.styleFrom(shape: const StadiumBorder()),
)
],
);
Solution 2:[2]
Firstly I am sorry to that I understood the situation wrong. Here is my edited answer. You should use contentPadding in your InputDecoration
Row(
children: [
Expanded(
child: Container(
height: MediaQuery.of(context).size.height * 0.15,
child: TextFormField(
decoration: InputDecoration(
contentPadding:
const EdgeInsets.symmetric(vertical: 40.0),
filled: true,
labelText: "Enter To Do Task title"),
)),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.15,
child: ElevatedButton.icon(
onPressed: () {},
icon: const Icon(Icons.add),
label: const Padding(
padding: EdgeInsets.all(8.0),
child: Text("Add Task"),
),
style: ElevatedButton.styleFrom(shape: const StadiumBorder()),
),
)
],
),
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Junaid Khalid |
| Solution 2 |

