Home > OS >  How to expand button vertically to match the height of row in fluttter
How to expand button vertically to match the height of row in fluttter

Time:03-17

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

enter image description here

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()),
    )
  ],
);

CodePudding user response:

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.only(top: 17.0, bottom: 17.0, left: 8.0, right: 8.0), // here
        child: Text("Add Task"),
      ),
      style:
          ElevatedButton.styleFrom(shape: const StadiumBorder()),
    )
  ],
);

CodePudding user response:

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()),
                ),
              )
            ],
          ),
  • Related