Flutter Question posted in
The official Flutter documentation can be found here.

ElevatedButton not take up height of parent on Flutter Android

Like the title, you can see my Button is not take up full height of the Row.The Blue background color is the Container wrap my button to visualize the container size. You can see the Image without some background color below.
I have no idea what causes this, can’t find any answer on internet so i post this here. Below is my code and the image. Thank you for any help.

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Center(
            child: Container(
              padding: EdgeInsets.all(16),
              // color: Colors.redAccent,
              child: Container(
                // color: Colors.indigo,
                child: Column(
                  children: [
                    Row(
                      children: [
                        Expanded(
                          child: TextField(
                            decoration: InputDecoration(
                              contentPadding: EdgeInsets.symmetric(
                                  horizontal: 8, vertical: 0),
                              border: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(10),
                              ),
                              hintText: 'Enter Match ID',
                            ),
                          ),
                        ),
                        Container(
                          // color: Colors.blue,
                          padding: EdgeInsets.all(0),
                          margin: EdgeInsets.all(0),
                          child: ElevatedButton(
                              style: ElevatedButton.styleFrom(
                                // backgroundColor: Colors.greenAccent,
                                shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(10)),
                              ),
                              onPressed: () => {},
                              child: Text("Scan Code")),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

I paint the background in order to research the problem
Original one

I have try Expand, SizedBox, SizedBox.expand,… but nothing works. I think the problem is the button it self or maybe I’m not understand the button, yet.

Tags:

3

Answers


  1. 0

    It’s simply not that high. Children of a row by default don’t stretch the full height. To do that you can try giving the Row

    crossAxisAlignment: CrossAxisAlignment.stretch,

    And remove the Container holding the button

    Login or Signup to reply.
  2. 0

    it seems like ElevatedButton have a default padding, try this code

    ElevatedButton(
    style: ElevatedButton.styleFrom(
      // backgroundColor: Colors.greenAccent,
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10)),
      minimumSize: Size.zero, // Set this
      padding: EdgeInsets.zero, // and this
    ),
    onPressed: () => {},
    child: Text("Scan Code")),
    Login or Signup to reply.
  3. 0

    stretch the row using CrossAxisAlignment.stretch, so all of the children height will stretch to the highest child

    then wrap the row using IntrinsicHeight

    IntrinsicHeight(
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        children: [
                          Expanded(
                            child: TextField(
                              decoration: InputDecoration(
                                contentPadding: EdgeInsets.symmetric(
                                    horizontal: 8, vertical: 0),
                                border: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(10),
                                ),
                                hintText: 'Enter Match ID',
                              ),
                            ),
                          ),
                          ElevatedButton(
                              style: ElevatedButton.styleFrom(
                                // backgroundColor: Colors.greenAccent,
                                shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(10)),
                              ),
                              onPressed: () => {},
                              child: Text("Scan Code")),
                        ],
                      ),
                    ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search