FUISectionPlain

Previously outlined in the documentation section on the Basic UI Structure, the FUISectionPlain element corresponds to the HTML <section> tag. This widely used tag in the UI Kit enables the creation of “sections” on a page, encapsulating various widgets within a single container.

The FUISectionPlain widget class could be found in:

focus_ui_kit/components/section/fui_section_plain.dart

The FUISectionTheme class serves as the theme class for FUISectionPlain. Kindly explore this theme class to ascertain various settings applicable to FUISectionPlain.

Accessing the theme

To access the theme class object, do the following:

@override
Widget build(BuildContext context) {
    FUISectionTheme fuiSectionTheme = context.theme.fuiSection;
    
    // ...
}

Usage

@override
Widget build(BuildContext context) {

    return FUISingleChildScrollView(
      child: FUIColumn(
        children: [
          FUISectionPlain(
            horizontalSpace: FUISectionHorizontalSpace.tight,
            child: FUISectionContainer(
              child: Column(
                children: [
                  H1(Text('Heading 1')),
                  Regular(Text('Content Text')),
                ],
              ),
            ),
          ),
        ],
      ),
    );
    
}

Major Parameters

Parameters	Description
EdgeInsets? padding	Corresponds to the padding of a `Container`. Please explore some of the pre-defined padding EdgeInsets in `FUISectionTheme.eiSecPaddingXX` before configuring this with specific `EdgetInsets`
Color? backgroundColor	The default color of the is `fuiColors.bg0`.
FUISectionHorizontalSpace horizontalSpace	Accepts values from `FUISectionHorizontalSpace`; the default is `FUISectionHorizontalSpace.focus`.

Other Parameters

The other parameters correspond with Flutter's Container widget.

26 March 2025

Focus Theme UI Kit Documentation Help