Skip to main content

Center & Align

Center centers a child within available space. Align positions a child at any alignment point.

Center​

widgets.Center{
    Child: widgets.Text{Content: "Centered"},
}

// Helper function
widgets.Centered(widgets.Text{Content: "Centered"})

Align​

Position a child within available space using any alignment:

widgets.Align{
    Alignment: layout.AlignmentBottomRight,
    Child:     widgets.Text{Content: "Bottom right"},
}

Align expands to fill available space, then positions the child. Center is equivalent to Align{Alignment: layout.AlignmentCenter}.

Properties​

Center​

PropertyTypeDescription
Childcore.WidgetChild widget to center

Align​

PropertyTypeDescription
Alignmentlayout.AlignmentWhere to position the child
Childcore.WidgetChild widget

Common Patterns​

Centering Content on Screen​

widgets.SafeArea{
    Child: widgets.Center{
        Child: widgets.Column{
            MainAxisAlignment:  widgets.MainAxisAlignmentCenter,
            CrossAxisAlignment: widgets.CrossAxisAlignmentCenter,
            MainAxisSize:       widgets.MainAxisSizeMin,
            Children: []core.Widget{
                logo,
                widgets.VSpace(16),
                title,
            },
        },
    },
}