Skip to main content
The Fern UI Framework provides a comprehensive set of widgets for building interactive user interfaces. Widgets are the building blocks of your UI, ranging from simple text displays to complex interactive controls.

​
Widget Categories

​
Basic Widgets

Fundamental UI elements for displaying content:
  • TextWidget - Display text with customizable fonts, colors, and styles
  • CircleWidget - Draw circular shapes with click and hover support
  • LineWidget - Draw lines between two points with configurable thickness

​
Interactive Widgets

Widgets that respond to user input:

​
Progress Indicators

Widgets for showing progress and status:

​
Layout Widgets

Widgets for arranging other widgets:
  • Row & Column - Arrange children horizontally or vertically
  • Center - Center a child widget
  • Padding - Add space around a widget
  • Expanded - Expand to fill available space
  • SizedBox - Create fixed-size spacing

​
Base Widget Class

All widgets inherit from the Widget base class, which provides: 
class Widget {
public:
    virtual void render() = 0;
    virtual bool handleInput(const InputState& input) = 0;
    
    virtual void setPosition(int x, int y);
    virtual int getX() const;
    virtual int getY() const;
    virtual void resize(int width, int height);
    virtual int getWidth() const;
    virtual int getHeight() const;
};

​
Common Patterns

​
Factory Functions

Most widgets provide factory functions for easy creation: 
auto text = Text(TextConfig(100, 50, "Hello World")
    .style(TextStyle().color(Colors::White).fontSize(20)));

auto button = Button(ButtonConfig(100, 100, 120, 40, "Click Me"));

​
Signals for Events

Interactive widgets use signals to handle events: 
auto button = Button(ButtonConfig(50, 50, 100, 30, "Submit"));
button->onClick.connect([]() {
    std::cout << "Button clicked!" << std::endl;
});

​
Style Configuration

Many widgets support fluent style configuration: 
TextStyle style;
style.color(Colors::White)
     .fontSize(18)
     .useTTFFont("arial")
     .alignment(1); // Center

​
Preset Configurations

Widgets often provide preset configurations for common use cases: 
auto primaryBtn = Button(ButtonPresets::Primary(10, 10, 100, 35, "Save"));
auto dangerBtn = Button(ButtonPresets::Danger(120, 10, 100, 35, "Delete"));

​
Widget Manager

Widgets are automatically added to the widget manager when created with addToManager = true (the default for most factory functions): 
// Automatically added to manager
auto text = Text(Point(100, 50), "Hello", 2, Colors::White);

// Not added to manager (for manual management)
auto text = Text(Point(100, 50), "Hello", 2, Colors::White, false);

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us