Customizing Widget Styles

There are 2 ways to customize individual widget styles: deltas for small tweaks and the CLI for major overhauls.

Deltas

All widget styles have corresponding deltas that represent a partial modification. For example, FAccordionStyle has a corresponding FAccordionStyleDelta.

Widgets accept deltas via their style parameter. To change an accordion's focused outline color while preserving the rest of the style:

1FAccordion(
2  style: .delta(focusedOutlineStyle: .delta(color: Colors.blue)),
3  children: [],
4);
5

Since widget styles extend their corresponding deltas, you can also pass a full style to replace the existing one entirely:

1FAccordion(
2  // Replace the entire style with a new one based on the green theme.
3  style: FAccordionStyle.inherit(
4    colors: FThemes.green.light.colors,
5    typography: FThemes.green.light.typography,
6    style: FThemes.green.light.style,
7  ),
8  children: const [],
9);
10

Widget styles contain FVariants fields which can be modified using a delta(...) function that accepts a sequence of operations. Depending on the variant's type, operations are either delta-based modifications or full replacements.

There are 3 ways to modify FVariants fields:

Composite types such as BoxDecoration, IconThemeData, TextStyle, and nested styles support delta-based modifications. To modify an accordion's title text style:

1FAccordion(
2  style: .delta(
3    titleTextStyle: .delta([
4      // Change ONLY the base title color.
5      .base(const .delta(color: Colors.red)),
6      // Make hovered AND focused titles underlined, adds a new constraint
7      // if it doesn't already exist.
8      .exact({
9        .hovered.and(.focused),
10      }, const .delta(decoration: .underline)),
11      // Make all existing constraints containing hovered bold, does
12      // nothing if none exist.
13      .match({.hovered}, const .delta(fontWeight: .bold)),
14    ]),
15  ),
16  children: const [],
17);
18

Atomic types such as double and Color only support full replacements. To modify a radio's border color:

1FRadio(
2  style: .delta(
3    borderColor: .delta([
4      // Change ONLY the base border color.
5      .base(Colors.blue),
6      // Set the border color when selected, adds a new constraint
7      // if it doesn't already exist.
8      .exact({.selected}, Colors.green),
9      // Set the border color for all existing constraints containing
10      // disabled, does nothing if none exist.
11      .match({.disabled}, Colors.grey),
12    ]),
13  ),
14);
15

Like widget styles, FVariants can also be replaced entirely by passing an FVariants directly. To replace an accordion's title text style:

1FAccordion(
2  style: .delta(
3    titleTextStyle: FVariants.from(
4      const TextStyle(fontSize: 18, fontWeight: .bold),
5      variants: {
6        [.hovered, .pressed]: const .delta(
7          decoration: TextDecoration.underline,
8        ),
9        [.disabled]: const .delta(color: Colors.grey),
10      },
11    ),
12  ),
13  children: const [],
14);
15

CLI

The following section demonstrates how to override an accordion's style. This is recommended for major style overhauls.

Run to generate a widget style:

dart run forui style create accordion

Tip: Run dart run forui style ls to see all available styles.

To add an underline to the accordion title when focused, modify the generated style:

1FAccordionStyle accordionStyle({
2  required FColors colors,
3  required FTypography typography,
4  required FStyle style,
5}) => FAccordionStyle(
6  titleTextStyle: FVariants.from(
7    // This text style is applied when the accordion is NOT hovered OR pressed.
8    typography.base.copyWith(fontWeight: .w500, color: colors.foreground),
9    variants: {
10      // This text style is applied when the accordion is hovered OR pressed OR focused (new).
11      [.hovered, .pressed, .focused]: const .delta(
12        decoration: TextDecoration.underline,
13      ),
14    },
15  ),
16);
17

Lastly, pass the modified style to an FAccordion:

1
2@override
3Widget build(BuildContext context) => FAccordion(
4  // Pass the modified style to the widget.
5  style: accordionStyle(
6    colors: context.theme.colors,
7    typography: context.theme.typography,
8    style: context.theme.style,
9  ),
10  children: const [
11    FAccordionItem(
12      title: Text('Is it accessible?'),
13      child: Text('Yes. It adheres to the WAI-ARIA design pattern.'),
14    ),
15  ],
16);
17

Customizing Widget Styles

Deltas

Variants

CLI

On this page