Customizing Themes

This guide uses FAccordionStyle as an example, but the same principles apply to all Forui widgets. It relies on the CLI.

Generate `main.dart`

Navigate to your project directory.

Generate a main.dart:

dart run forui init

This generates a main.dart file where you will add your generated theme:

1
2import 'package:flutter/material.dart';
3
4import 'package:forui/forui.dart';
5
6import 'theme.dart';
7
8void main() {
9  runApp(const Application());
10}
11
12class Application extends StatelessWidget {
13  const Application({super.key});
14
15  @override
16  Widget build(BuildContext context) {
17    // Assign the generated theme to `theme`.
18    final theme = neutralLight;
19
20    return MaterialApp(
21      localizationsDelegates: FLocalizations.localizationsDelegates,
22      supportedLocales: FLocalizations.supportedLocales,
23      builder: (_, child) => FTheme(
24        data: theme,
25        child: FToaster(child: FTooltipGroup(child: child!)),
26      ),
27      theme: theme.toApproximateMaterialTheme(),
28      home: const FScaffold(
29        // TODO: replace with your widget.
30        child: Placeholder(),
31      ),
32    );
33  }
34}
35

Generate a Style

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

Generate a FAccordionStyle:

dart run forui style create accordion

This generates an accordion style file which you can add to your theme:

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.
11      [.hovered, .pressed]: const .delta(decoration: .underline),
12      // {@endhiglight}
13    },
14  ),
15  childTextStyle: typography.sm.copyWith(color: colors.foreground),
16  iconStyle: .all(IconThemeData(color: colors.mutedForeground, size: 20)),
17  focusedOutlineStyle: style.focusedOutlineStyle,
18  dividerStyle: FDividerStyle(color: colors.border, padding: .zero),
19  tappableStyle: style.tappableStyle.copyWith(
20    motion: const .delta(bounceTween: FTappableMotion.noBounceTween),
21  ),
22  titlePadding: const .symmetric(vertical: 15),
23  childPadding: const .only(bottom: 15),
24  motion: const FAccordionMotion(),
25);
26

To learn how to customize widget styles, see the customizing widget styles guide.

Generate a Theme

Tip: Run dart run forui theme ls to see all available themes.

Generate a theme based on neutral's light variant:

dart run forui theme create neutral-light

This generates a theme file which you can:

add to your generated main.dart.
add the generated styles to.

1
2import 'package:flutter/material.dart';
3
4import 'package:forui/forui.dart';
5
6import 'accordion_style.dart';
7
8
9FThemeData get neutralLight {
10  final colors = FThemes.neutral.light.colors;
11
12  final typography = _typography(colors: colors);
13  final style = _style(colors: colors, typography: typography);
14
15  return FThemeData(
16    colors: colors,
17    typography: typography,
18    style: style,
19    // Add your generated styles here.
20    accordionStyle: accordionStyle(
21      colors: colors,
22      typography: typography,
23      style: style,
24    ),
25  );
26}
27
28FTypography _typography({
29  required FColors colors,
30  String defaultFontFamily = 'packages/forui/Inter',
31}) => FTypography(
32  xs: TextStyle(
33    color: colors.foreground,
34    fontFamily: defaultFontFamily,
35    fontSize: 12,
36    height: 1,
37  ),
38  sm: TextStyle(
39    color: colors.foreground,
40    fontFamily: defaultFontFamily,
41    fontSize: 14,
42    height: 1.25,
43  ),
44);
45
46FStyle _style({required FColors colors, required FTypography typography}) =>
47    FStyle(
48      formFieldStyle: .inherit(colors: colors, typography: typography),
49      focusedOutlineStyle: FFocusedOutlineStyle(
50        color: colors.primary,
51        borderRadius: const .all(.circular(8)),
52      ),
53      iconStyle: IconThemeData(color: colors.primary, size: 20),
54      tappableStyle: FTappableStyle(),
55    );
56

Customizing Themes

Generate main.dart

Generate a Style

Generate a Theme

On this page

Generate `main.dart`