# 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.

```dart
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`.

```dart
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**.