title: How to make the height of a TextField and a search button equal in Flutter?
body: <p>I'm creating a Flutter app. The app has a <code>TextField</code> and an <code>IconButton</code>, I want to make their height equal. Here is the current code:</p>
  <pre class="lang-dart prettyprint-override"><code>import 'package:flutter/material.dart';
  
  class MyHomePage extends StatefulWidget {
    const MyHomePage({Key? key}) : super(key: key);
  
    @override
    State&lt;MyHomePage&gt; createState() =&gt; _MyHomePageState();
  }
  
  class _MyHomePageState extends State&lt;MyHomePage&gt; {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Center(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20),
            child: SafeArea(
                child: Row(
                  children: [
                    const Expanded(
                      child: TextField(
                        decoration: InputDecoration(
                          fillColor: Colors.yellow,
                          filled: true,
                          hintText: &quot;Input here...&quot;,
                          isCollapsed: true,
                          border: OutlineInputBorder(
                            borderSide: BorderSide(
                              width: 0,
                              style: BorderStyle.none,
                            ),
                          ),
                        ),
                      ),
                    ),
                    const SizedBox(width: 10),
                    Ink(
                      decoration: const BoxDecoration(
                        color: Colors.yellow,
                      ),
                      child: IconButton(
                          onPressed: () =&gt; {},
                          icon: const Icon(Icons.search)
                      ),
                    )
                  ],
            )),
          ),
        ),
      );
    }
  }
  </code></pre>
  <p>This is the result:</p>
  <p><a href="https://i.stack.imgur.com/93beM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/93beM.png" alt="enter image description here" /></a></p>
  <p>You can see that their height is not the same. There are some suggestions on the Internet to make their height equal, but none of them worked for me. Most suggest using a <code>contentPadding</code> inside <code>TextField</code>, like this:</p>
  <pre class="lang-dart prettyprint-override"><code>TextField(
    decoration: InputDecoration(
      fillColor: Colors.yellow,
      filled: true,
      hintText: &quot;Input here...&quot;,
      isCollapsed: true,
  
      // Add this
      contentPadding: EdgeInsets.all(12),
  
      border: OutlineInputBorder(
        borderSide: BorderSide(
          width: 0,
          style: BorderStyle.none,
        ),
      ),
    ),
  ),
  </code></pre>
  <p>This seems to work. My complaint with this method is that I need to manually try the correct padding, which is <code>12</code> in the above code. Does the number always work on all devices? I'm not sure.</p>
  <p>Some suggest using a <code>SizedBox</code>, I've tried it, it doesn't work for me either. Here is my code:</p>
  <pre class="lang-dart prettyprint-override"><code>import 'package:flutter/material.dart';
  
  class MyHomePage extends StatefulWidget {
    const MyHomePage({Key? key}) : super(key: key);
  
    @override
    State&lt;MyHomePage&gt; createState() =&gt; _MyHomePageState();
  }
  
  class _MyHomePageState extends State&lt;MyHomePage&gt; {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Center(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20),
            child: SafeArea(
                child: Row(
                  children: [
                    const Expanded(
                      child: SizedBox(
                        height: 80,
                        child: TextField(
                          decoration: InputDecoration(
                            fillColor: Colors.yellow,
                            filled: true,
                            hintText: &quot;Input here...&quot;,
                            border: OutlineInputBorder(
                              borderSide: BorderSide(
                                width: 0,
                                style: BorderStyle.none,
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),
                    const SizedBox(width: 10),
                    SizedBox(
                        height: 80,
                        child: Ink(
                          decoration: const BoxDecoration(
                            color: Colors.yellow,
                          ),
                          child: IconButton(
                              onPressed: () =&gt; {},
                              icon: const Icon(Icons.search)),
                        ))
                  ],
                )),
          ),
        ),
      );
    }
  }
  </code></pre>
  <p>Here is the screenshot:</p>
  <p><a href="https://i.stack.imgur.com/T8wWy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/T8wWy.png" alt="enter image description here" /></a></p>
  <p>My question is, what's the correct way to make it work?</p>