CenterWidget positions its child widget at the center of the available space, automatically handling responsive resizing.
Basic Usage
#include <fern/fern.hpp>
using namespace Fern;
auto text = Text(Point(0, 0), "Centered Text", 3, Colors::White);
auto centered = Center(text);
Constructor
CenterWidget(int x, int y, int width, int height)
X position of the center container
Y position of the center container
Width of the center container
Height of the center container
Factory Function
std::shared_ptr<CenterWidget> Center(
std::shared_ptr<Widget> child,
bool addToManager = false
)
Whether to add to the widget manager
Methods
Adding Children
void add(std::shared_ptr<Widget> child)
Responsive Resizing
void onWindowResize(int newWidth, int newHeight)
ResponsiveWidget and automatically recenters when the window is resized.
Examples
Center a Text Widget
auto text = Text(Point(0, 0), "Hello, Fern!", 3, Colors::White);
auto centered = Center(text);
addWidget(centered);
auto button = Button(ButtonConfig(0, 0, 120, 40, "Click Me"));
auto centered = Center(button);
Center on Full Screen
int width = Fern::getWidth();
int height = Fern::getHeight();
auto centerWidget = std::make_shared<CenterWidget>(0, 0, width, height);
centerWidget->add(Text(Point(0, 0), "Centered", 3, Colors::White));
addWidget(centerWidget);
Center a Column Layout
auto column = Column({
Text(Point(0, 0), "Title", 3, Colors::White),
SizedBox(0, 20),
Button(ButtonConfig(0, 0, 100, 30, "Click"))
});
auto centered = Center(column);
Center a Row Layout
auto row = Row({
Button(ButtonConfig(0, 0, 80, 30, "OK")),
SizedBox(10, 0),
Button(ButtonConfig(0, 0, 80, 30, "Cancel"))
});
auto centered = Center(row);
Center Complex Layout
auto title = Text(Point(0, 0), "Welcome", 4, Colors::White);
auto subtitle = Text(Point(0, 0), "Please sign in", 2, Colors::Gray);
auto usernameInput = TextInput(TextInputConfig(0, 0, 250, 35)
.placeholder("Username"));
auto passwordInput = TextInput(TextInputConfig(0, 0, 250, 35)
.placeholder("Password"));
auto loginBtn = Button(ButtonConfig(0, 0, 250, 40, "Login"));
auto loginForm = Column({
title,
SizedBox(0, 10),
subtitle,
SizedBox(0, 40),
usernameInput,
SizedBox(0, 15),
passwordInput,
SizedBox(0, 25),
loginBtn
});
auto centered = Center(loginForm);
addWidget(centered);
Center in a Region
// Center within a specific region (not full screen)
auto centerWidget = std::make_shared<CenterWidget>(100, 100, 400, 300);
centerWidget->add(Text(Point(0, 0), "In Region", 2, Colors::White));
Complete Example
From examples/cpp/new/01_hello_text.cpp:
#include <fern/fern.hpp>
using namespace Fern;
void setupUI() {
int width = Fern::getWidth();
int height = Fern::getHeight();
auto centerWidget = std::make_shared<CenterWidget>(0, 0, width, height);
centerWidget->add(Text(Point(0, 0), "Hello, Fern!", 3, Colors::White));
addWidget(centerWidget);
}
void draw() {
Draw::fill(Colors::DarkBlue);
}
int main() {
Fern::initialize();
setupUI();
Fern::setDrawCallback(draw);
Fern::startRenderLoop();
return 0;
}
Responsive Behavior
CenterWidget automatically responds to window resize events:
auto text = Text(Point(0, 0), "Always Centered", 3, Colors::White);
auto centered = Center(text);
// Text will remain centered even if window is resized
Use Cases
- Welcome screens - Center title and login forms
- Loading screens - Center loading indicators
- Dialog boxes - Center modal content
- Single-widget displays - Center primary content
- Responsive layouts - Maintain centering across screen sizes
Best Practices
Create Children at (0, 0)
When using Center, create child widgets at position (0, 0):
// Good
auto widget = Text(Point(0, 0), "Text", 2, Colors::White);
auto centered = Center(widget);
// Avoid
auto widget = Text(Point(100, 50), "Text", 2, Colors::White);
auto centered = Center(widget); // Will offset from center
auto layout = Column({
Text(Point(0, 0), "Title", 3, Colors::White),
Button(ButtonConfig(0, 0, 100, 30, "Click"))
});
auto centered = Center(layout);
See Also