title: Last composables in Row() get squeezed (Jetpack Compose)
body: <p>I am trying to create a custom search bar; in which I am using <code>Row()</code> composable as a container for all the other elements. Here the last <code>FloatingActionButton</code> gets squeezed but I want the <code>TextField</code> to be flexible so that it gets shortened to accommodate the remaining elements.</p>
  <p><a href="https://i.stack.imgur.com/ZyDns.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZyDns.png" alt="Last element squeezed in Row" /></a></p>
  <p>I already know some workarounds to this but I want a better solution. See below for the known workarounds and their drawbacks.</p>
  <pre class="lang-kotlin prettyprint-override"><code>
  @Preview(showBackground = true, widthDp = 410)
  @Composable
  fun MyComposable() {
      Row(Modifier.fillMaxWidth()) {
          TextField(value = &quot;Search&quot;, onValueChange = {})
          FloatingActionButton(onClick = {}) {Icon(Icons.Filled.SkipNext, contentDescription = null)}
          FloatingActionButton(onClick = {}) {Icon(Icons.Filled.Close, contentDescription = null)}
          FloatingActionButton(onClick = {}) {Icon(Icons.Filled.Home, contentDescription = null)}
      }
  }
  
  </code></pre>
  <h4>Known workarounds:</h4>
  <ol>
  <li>Using <code>ConstraintLayout</code> (Drawback: Complicated. Seems like overkill in many situations.)</li>
  <li><a href="https://stackoverflow.com/questions/66835210/jetpack-compose-change-layout-direction-of-a-composable">Using <code>CompositionLocalProvider</code></a> to  provide a RTL <code>LocalLayoutDirection</code>. (Drawback: Seems hacky. All the layouts of child components become RTL. For example textfield icons and text placement.)</li>
  <li>Specifying fixed width (or weights) to the last element. (Drawback: This makes the second last element to squeeze and forces me to hardcode width which cannot be done on some elements like <code>Button</code> as its width is determined by localized text in it.)</li>
  </ol>