FeatureBuilder

Clean Framework provides FeatureBuilder widget to simplify usage of Feature Flags in UI code.

Using FeatureBuilder

Head to login_page.dart, where we'll wrap the title with FeatureBuilder as shown below.

Scaffold(
  appBar: AppBar(
    title: FeatureBuilder<bool>(
      flagKey: 'newTitle',
      defaultValue: false,
      builder: (context, useNewTitle) {
        return Text(
          useNewTitle ? 'Feature Flagging Demo' : 'Feature Widget',
          textAlign: TextAlign.center,
        );
      },
    ),
  ),
  ...
)

Here, we're resolving the flag for key newTitle, which in enabled (see in flags.json). So, the value (useNewTitle) will be true.

Evaluation Context

The evaluation context provides ambient information for the purposes of flag evaluation. Contextual data may be used as the basis for targeting, including rule-based evaluation, overrides for specific subjects, or fractional flag evaluation.

The following part will give us an idea on how evaluation context can be used in FeatureBuilder. Head to counter_page.dart, wrap the ElevatedButton with FeatureBuilder.

FeatureBuilder<int>(
  flagKey: 'color',
  defaultValue: Colors.deepPurple.value,
  evaluationContext: EvaluationContext(
    {'email': widget.email ?? ''},
  ),
  builder: (context, colorValue) {
    return ElevatedButton(
      onPressed: () => Navigator.pop(context),
      style: ElevatedButton.styleFrom(
        onPrimary: Color(colorValue),
      ),
      child: const Text('LOG OUT'),
    );
  },
),

In this snippet, we're evaluating the flag for key "color", but with an evaluation context "email". The evaluation process first identifies the matching rule, and checks it against the defined operation. If the operation is validated then a variant from action object is reported, otherwise a default variant is reported.

For instance, if we login with email user@feature.test then the second rule (in the flags.json) for the key "color" will be used, which means the color for button will be evaluated as red.