SizedBox (also known as SpacingWidget) creates empty space of specified dimensions. It’s primarily used for adding gaps between widgets in Row and Column layouts.
Basic Usage
#include <fern/fern.hpp>
using namespace Fern;
auto column = Column({
Text(Point(0, 0), "First", 2, Colors::White),
SizedBox(0, 20), // 20px vertical spacing
Text(Point(0, 0), "Second", 2, Colors::White)
});
Constructor
SpacingWidget(int width, int height)
Width of the space in pixels
Height of the space in pixels
Factory Function
std::shared_ptr<SpacingWidget> SizedBox(
int width,
int height,
bool addToManager = false
)
Characteristics
- Invisible - Renders nothing, just takes up space
- Non-interactive - Does not handle input events
- Fixed size - Always maintains specified dimensions
Examples
Vertical Spacing
Add vertical gaps in a Column:
auto column = Column({
Text(Point(0, 0), "Title", 3, Colors::White),
SizedBox(0, 10), // 10px gap
Text(Point(0, 0), "Subtitle", 2, Colors::Gray),
SizedBox(0, 20), // 20px gap
Button(ButtonConfig(0, 0, 100, 30, "Click"))
});
Horizontal Spacing
Add horizontal gaps in a Row:
auto row = Row({
Button(ButtonConfig(0, 0, 80, 30, "First")),
SizedBox(10, 0), // 10px gap
Button(ButtonConfig(0, 0, 80, 30, "Second")),
SizedBox(10, 0), // 10px gap
Button(ButtonConfig(0, 0, 80, 30, "Third"))
});
Consistent Spacing
const int SPACING = 15;
auto column = Column({
widget1,
SizedBox(0, SPACING),
widget2,
SizedBox(0, SPACING),
widget3,
SizedBox(0, SPACING),
widget4
});
auto form = Column({
Text(Point(0, 0), "Registration Form", 3, Colors::White),
SizedBox(0, 30), // Large gap after title
TextInput(TextInputConfig(0, 0, 250, 35).placeholder("Name")),
SizedBox(0, 15),
TextInput(TextInputConfig(0, 0, 250, 35).placeholder("Email")),
SizedBox(0, 15),
TextInput(TextInputConfig(0, 0, 250, 35).placeholder("Password")),
SizedBox(0, 25), // Larger gap before button
Button(ButtonConfig(0, 0, 250, 40, "Register"))
});
auto buttonGroup = Row({
Button(ButtonPresets::Primary(0, 0, 100, 35, "Save")),
SizedBox(10, 0),
Button(ButtonPresets::Secondary(0, 0, 100, 35, "Cancel")),
SizedBox(10, 0),
Button(ButtonPresets::Danger(0, 0, 100, 35, "Delete"))
});
Two-Dimensional Spacing
Create space that affects both dimensions:
auto spacer = SizedBox(20, 30); // 20px wide, 30px tall
Progressive Spacing
Use different spacing amounts:
auto column = Column({
Text(Point(0, 0), "Section 1", 3, Colors::White),
SizedBox(0, 10), // Small gap
Text(Point(0, 0), "Content 1", 2, Colors::Gray),
SizedBox(0, 30), // Large gap between sections
Text(Point(0, 0), "Section 2", 3, Colors::White),
SizedBox(0, 10), // Small gap
Text(Point(0, 0), "Content 2", 2, Colors::Gray)
});
Nested Layouts with Spacing
auto innerRow = Row({
Button(ButtonConfig(0, 0, 60, 25, "A")),
SizedBox(5, 0),
Button(ButtonConfig(0, 0, 60, 25, "B"))
});
auto column = Column({
Text(Point(0, 0), "Choose:", 2, Colors::White),
SizedBox(0, 15),
innerRow,
SizedBox(0, 25),
Button(ButtonConfig(0, 0, 100, 30, "Submit"))
});
Complete Example
#include <fern/fern.hpp>
using namespace Fern;
void setupUI() {
// Create a settings panel with consistent spacing
auto title = Text(Point(0, 0), "Settings", 3, Colors::White);
auto volumeSlider = Slider(SliderConfig(0, 0, 200, 20));
auto volumeLabel = Text(Point(0, 0), "Volume", 2, Colors::White);
auto brightnessSlider = Slider(SliderConfig(0, 0, 200, 20));
auto brightnessLabel = Text(Point(0, 0), "Brightness", 2, Colors::White);
auto saveBtn = Button(ButtonConfig(0, 0, 200, 35, "Save Settings"));
auto settingsPanel = Column({
title,
SizedBox(0, 30), // Large gap after title
volumeLabel,
SizedBox(0, 8), // Small gap between label and slider
volumeSlider,
SizedBox(0, 25), // Medium gap between settings
brightnessLabel,
SizedBox(0, 8),
brightnessSlider,
SizedBox(0, 40), // Large gap before action button
saveBtn
});
auto centered = Center(settingsPanel);
addWidget(centered);
}
Common Spacing Values
Standard Spacing Scale
// Tight spacing
SizedBox(0, 5) // 5px
SizedBox(0, 8) // 8px
// Normal spacing
SizedBox(0, 10) // 10px
SizedBox(0, 15) // 15px
// Loose spacing
SizedBox(0, 20) // 20px
SizedBox(0, 25) // 25px
// Extra loose
SizedBox(0, 30) // 30px
SizedBox(0, 40) // 40px
Responsive Spacing
Define spacing constants for consistency:
namespace Spacing {
const int TIGHT = 5;
const int SMALL = 10;
const int MEDIUM = 15;
const int LARGE = 20;
const int XLARGE = 30;
}
auto column = Column({
widget1,
SizedBox(0, Spacing::MEDIUM),
widget2,
SizedBox(0, Spacing::LARGE),
widget3
});
Use Cases
- Form layouts - Space between input fields
- Button groups - Space between buttons
- Text blocks - Space between paragraphs
- Sections - Separate logical sections
- Lists - Space between list items
Best Practices
Use Consistent Spacing
Define spacing constants and reuse them:
const int ITEM_SPACING = 15;
const int SECTION_SPACING = 30;
auto layout = Column({
section1,
SizedBox(0, SECTION_SPACING),
section2,
SizedBox(0, SECTION_SPACING),
section3
});
Vertical in Columns, Horizontal in Rows
// Column: Use (0, height) for vertical spacing
Column({
widget1,
SizedBox(0, 20), // Vertical
widget2
})
// Row: Use (width, 0) for horizontal spacing
Row({
widget1,
SizedBox(20, 0), // Horizontal
widget2
})
Progressive Spacing
Use larger spacing for more important breaks:
Column({
title,
SizedBox(0, 30), // Large gap after title
item1,
SizedBox(0, 10), // Small gap between related items
item2,
SizedBox(0, 25), // Medium gap between groups
item3,
SizedBox(0, 10),
item4
})
Avoid Excessive Spacing
Don’t add SizedBox at the beginning or end of layouts:
// Good
Column({
widget1,
SizedBox(0, 10),
widget2
})
// Avoid
Column({
SizedBox(0, 10), // Unnecessary at start
widget1,
SizedBox(0, 10),
widget2,
SizedBox(0, 10) // Unnecessary at end
})
See Also