'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 |