How/Where is FluentTheme registered with context?

[ronnyek]

So I'm somewhat new to flutter, but have vast software engineering experience. I'm looking at the example application and want to utilize the titlebar/buttons etc for a windows application.

theme.dart was copied directly from the example and should be identical code.

I've got the app displaying just fine, but for the code where the actions are being included and the light/dark theme switcher is broke.

in main.dart

child: ToggleSwitch(
                          content: const Text('Dark Mode'),
                          checked: FluentTheme.of(context).brightness.isDark,
                          onChanged: (v) {
                            if (v) {
                              appTheme.mode = ThemeMode.dark;
                            } else {
                              appTheme.mode = ThemeMode.light;
                            }
                          },
                        ),

I get an exception on the line that does ``FluentTheme.of(context).brightness.isDarkthat readsNull check operator used on a null value`, presumably because no FluentTheme has been registered with this context.

The main difference I see is about how I setup the app, I'm basically not tryin to use the FluentApp.router and have this so far

const String appTitle = 'Win UI for Flutter';
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await flutter_acrylic.Window.initialize();
  await flutter_acrylic.Window.hideWindowControls();
  await WindowManager.instance.ensureInitialized();
  windowManager.waitUntilReadyToShow().then((_) async {
    await windowManager.setTitleBarStyle(
      TitleBarStyle.hidden,
      windowButtonVisibility: true,
    );
    await windowManager.setMinimumSize(const Size(500, 600));
    await windowManager.show();
    await windowManager.setPreventClose(false);
    await windowManager.setSkipTaskbar(false);
  });

  runApp(const MyApp());
}

final _appTheme = AppTheme();

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider.value(
        value: _appTheme,
        builder: (context, child) {
          final appTheme = context.watch<AppTheme>();
          return FluentApp(
              title: appTitle,
              color: appTheme.color,
              themeMode: appTheme.mode,
              darkTheme: FluentThemeData(
                brightness: Brightness.dark,
                accentColor: appTheme.color,
                visualDensity: VisualDensity.standard,
                focusTheme: FocusThemeData(
                  glowFactor: is10footScreen(context) ? 2.0 : 0.0,
                ),
              ),
              theme: FluentThemeData(
                accentColor: appTheme.color,
                visualDensity: VisualDensity.standard,
                focusTheme: FocusThemeData(
                  glowFactor: is10footScreen(context) ? 2.0 : 0.0,
                ),
              ),
              locale: appTheme.locale,
              builder: (context, child) {
                return Directionality(
                  textDirection: appTheme.textDirection,
                  child: NavigationPaneTheme(
                    data: NavigationPaneThemeData(
                      backgroundColor: appTheme.windowEffect !=
                          flutter_acrylic.WindowEffect.disabled
                          ? Colors.transparent
                          : null,
                    ),
                    child: child!,
                  ),
                );
              },
              home: NavigationView(
                appBar: NavigationAppBar(
                  automaticallyImplyLeading: false,
                  title: () {
                    return const DragToMoveArea(
                      child: Align(
                        alignment: AlignmentDirectional.centerStart,
                        child: Text("Weird Calendar"),
                      ),
                    );
                  }(),
                  actions:
                      Row(mainAxisAlignment: MainAxisAlignment.end, children: [
                    Align(
                      alignment: AlignmentDirectional.centerEnd,
                      child: Padding(
                        padding: const EdgeInsetsDirectional.only(end: 8.0),
                        child: ToggleSwitch(
                          content: const Text('Dark Mode'),
                          checked: FluentTheme.of(context).brightness.isDark,
                          onChanged: (v) {
                            if (v) {
                              appTheme.mode = ThemeMode.dark;
                            } else {
                              appTheme.mode = ThemeMode.light;
                            }
                          },
                        ),
                      ),
                    ),
                    const WindowButtons(),
                  ]),
                ),
                pane: NavigationPane(
                    displayMode: PaneDisplayMode.minimal,
                    items: [
                      PaneItem(
                          icon: Icon(FluentIcons.home),
                          title: Text("Home"),
                          body: Column(
                            children: [
                              Text("Hello World")
                            ],
                          ))
                    ]),
              ));
        });
  }
}

I'm sure this is something I'm doing dumb, if I download and run the example app, it works just fine. I'm not sure if there is something additional I need to do, or if FluentApp.router causes different things to happen or what.

[bdlukaa]

You can use a Builder above your NavigationView. Its documentation explains it better than I can.

[ronnyek]

So that actually did resolve the problem... was easy to provide, I just don't understand exactly why creating another builder that then returns the NavigationView, resolves this problem.

[bdlukaa]

This video will explain it better than I can.

[ronnyek]

Thank you thank you... appreciate the pointer especially since this probably not at all a fluent_ui thing =) Thanks again