FeatureSection class abstract

Abstract base class for all feature sections in the application.

Feature sections are special, reusable, and configurable UI components that can be placed in various screens (home, category, etc.) and configured via JSON settings. They differ from typical Flutter widgets in that they are specifically designed to be used as configurable building blocks for screens.

All feature sections should extend this class and use the BLoC pattern for state management to ensure architectural consistency.

Examples of Feature Sections:

  • CollectionsSection
  • NewArrivalsSection
  • FeaturedProductsSection
  • CategoriesSection
  • HeroSection
  • PromoSection

Implementation Guide

When creating a new feature section:

  1. Extend this abstract class
  2. Implement getDefaultSettings() to provide default configuration
  3. Implement build() method
  4. Use getSetting<T>(key) to retrieve configuration values
  5. Use BLoC pattern for state management (BlocProvider + BlocBuilder)
  6. Accept optional settings parameter using super.settings

Complete Example

class MySection extends FeatureSection {
  const MySection({super.key, super.settings});

  @override
  Map<String, dynamic> getDefaultSettings() {
    return {
      'title': 'My Section',
      'titleFontSize': 16.0,
      'horizontalPadding': 20.0,
      'showBorder': true,
    };
  }

  @override
  Widget build(BuildContext context) {
    final repository = adapter.getRepository<MyRepository>();

    return BlocProvider(
      create: (context) => MySectionBloc(repository)
        ..add(LoadData()),
      child: Padding(
        padding: EdgeInsets.symmetric(
          horizontal: getSetting<double>('horizontalPadding'),
        ),
        child: Column(
          children: [
            Text(
              getSetting<String>('title'),
              style: TextStyle(
                fontSize: getSetting<double>('titleFontSize'),
              ),
            ),
            BlocBuilder<MySectionBloc, MySectionState>(
              builder: (context, state) {
                if (state is Loading) return CircularProgressIndicator();
                if (state is Loaded) return _buildContent(state.data);
                if (state is Error) return _buildError(state.message);
                return SizedBox.shrink();
              },
            ),
          ],
        ),
      ),
    );
  }
}

Configuration in environment.json

Feature widgets are configured in assets/config/environment.json:

{
  "plugins": {
    "home": {
      "sections": [
        {
          "name": "my.section",
          "description": "My custom section",
          "settings": {
            "title": "Custom Title",
            "titleFontSize": 18,
            "horizontalPadding": 24,
            "showBorder": false
          }
        }
      ]
    }
  }
}

Settings Priority

Settings are merged with the following priority:

  1. Settings passed via constructor (highest priority)
  2. Default settings from getDefaultSettings() (fallback)

BLoC Pattern Requirement

All feature sections MUST use the BLoC pattern for state management:

  • Create a dedicated BLoC for the section (e.g., MySectionBloc)
  • Define Events and States
  • Use BlocProvider to provide the BLoC
  • Use BlocBuilder to render based on state
  • Keep business logic in BLoC, not in the section
Inheritance

Constructors

FeatureSection({Key? key, Map<String, dynamic>? settings})
const

Properties

hashCode → int
The hash code for this object.
no setterinherited
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
settings → Map<String, dynamic>?
Optional settings/configuration for this section.
final

Methods

adaptersOf(BuildContext context) → AdapterRegistry
Returns the scoped AdapterRegistry from the nearest MooseScope.
build(BuildContext context) → Widget
Describes the part of the user interface represented by this widget.
inherited
createElement() → StatelessElement
Creates a StatelessElement to manage this widget's location in the tree.
inherited
debugDescribeChildren() → List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
inherited
getDefaultSettings() → Map<String, dynamic>
Returns the default settings for this feature section.
getSetting<T>(String key) → T
Helper method to get a setting value from settings or default settings.
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String
A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String
Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a one-line detailed description of the object.
inherited
toStringShort() → String
A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited