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.

Widget Class Location

The FUISectionPlain widget class could be found in:

focus_ui_kit/components/section/fui_section_plain.dart

Widget Theme Location

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')),
                ],
              ),
            ),
          ),
        ],
      ),
    );
    
}

Please refer to the Basic UI Structure section to learn more on horizontalSpace.

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.