title: How can I specify an exact amount of spacing between children in a Jetpack Compose Column?
body: <p>I am trying to create a Column in Jetpack Compose with a specific amount of spacing between each child element, such as 10.dp. In SwiftUI, this is relatively simple. I would just create a <code>VStack</code> with a <code>spacing</code> value:</p>
  <pre class="lang-swift prettyprint-override"><code>struct ContentView: View {
      let strings = [&quot;Hello&quot;, &quot;World&quot;, &quot;Apples&quot;]
  
      var body: some View {
          VStack(spacing: 10) {
              ForEach(strings, id: \.self) { string in
                  Text(string).background(Color.green)
              }
          }
          .background(Color.blue)
      }
  }
  
  struct ContentView_Previews: PreviewProvider {
      static var previews: some View {
          ContentView()
      }
  }
  </code></pre>
  <p>This is what it looks like in a SwiftUI Preview:</p>
  <p><a href="https://i.stack.imgur.com/BwRIS.png" rel="noreferrer"><img src="https://i.stack.imgur.com/BwRIS.png" alt="enter image description here" /></a></p>
  <p>In Jetpack Compose, my code is:</p>
  <pre class="lang-kotlin prettyprint-override"><code>@Composable
  fun ContentView() {
      val strings = listOf&lt;String&gt;(&quot;Hello&quot;, &quot;World&quot;, &quot;Apples&quot;)
  
      MaterialTheme {
          Surface(color = MaterialTheme.colors.background) {
              Column(
                  modifier = Modifier
                      .background(Color.Blue)
                      // I would expect to be able to add something like &quot;.spacer(10.dp)&quot; here
              ) {
                  strings.forEach { string -&gt;
                      Text(
                          modifier = Modifier.background(Color.Green),
                          text = string
                      )
                  }
              }
          }
      }
  }
  
  @Preview(showBackground = true)
  @Composable
  fun DefaultPreview() {
      ContentView()
  }
  </code></pre>
  <p>Because this code is missing any spacing, this is what it currently looks like:</p>
  <p><a href="https://i.stack.imgur.com/I6bjJ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/I6bjJ.png" alt="enter image description here" /></a></p>
  <p>My criteria are:</p>
  <ul>
  <li>A space of a specific height (such as 10.dp) should be present between child elements of a Column.</li>
  <li>The space should <em>not</em> appear before the <em>first</em> element.</li>
  <li>The space should <em>not</em> appear after the <em>last</em> element.</li>
  </ul>
  <p>I would use a <code>Spacer</code> element, but I don't believe this would work, because in a for loop, I believe I would end up having a <code>Spacer</code> either before the first or after the last element, which I do not want.</p>