Spacings


Page Summary


Specifications references

Usage

The spacing scale increases in small increments needed to describe both internal and external spacing relationships. Spacing tokens can be applied as padding and margins.

Apply spacing for magin

Apply the spacing to get magin arround element like this:

// Add a padding of 16px arround the text in the button
ElevatedButton(
  onPressed: () {
    // Add your action here
  },
  child: Padding(
    padding: EdgeInsets.all(spacingM),
    child: Text("ButtonText"),
  ),
),


// Add a magin of 16px (leading and trailing)
Container(
  margin: EdgeInsets.symmetric(horizontal: spacingM),
  child: Column(
    children: [
      Text("Title"),
      Text("A very long text for description in the main view"),
    ],
  ),
),


Apply spacing for padding

Apply the spacing to separate elements like this:

Row(
  children: [
    Icon(Icons.favorite),
    SizedBox(width: ODSSpacing.m),
    Text("Some text"),
  ],
)