ElevatedButton not take up height of parent on Flutter Android

Question

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.

Answer 1

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")),
    ],
  ),
),