riverpod_theme_app: creating widgets in the presentation layer.

theming_view_1.dart

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'theming_controller.dart';

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

  static const String themingRoute = '/theming';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Theming'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            ...ThemeMode.values
                .map((themeMode) => ThemeSelector(themeMode: themeMode))
                .toList(),
            const SizedBox(height: 100),
            const ThemeMessage()
          ],
        ),
      ),
    );
  }
}

theming_view_2.dart

/// Custom RadioListTiles for selecting theming options.
class ThemeSelector extends ConsumerWidget {  
  const ThemeSelector({super.key, required this.themeMode});
  final ThemeMode themeMode;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final theme = ref.watch(themingControllerProvider);
    return RadioListTile<ThemeMode>(
      title: Text('${themeMode.name} theme'),
      groupValue: theme,
      value: themeMode,
      onChanged: ref.watch(themingControllerProvider.notifier).updateThemeMode,
      controlAffinity: ListTileControlAffinity.trailing,
      contentPadding: const EdgeInsets.symmetric(horizontal: 8),
      activeColor: Theme.of(context).colorScheme.primary,
    );
  }
}

theming_view_3.dart

class ThemeMessage extends ConsumerWidget {
  const ThemeMessage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final theme = ref.watch(themingControllerProvider);
    return switch (theme) {
      ThemeMode.system => const Text('We are who the master say we are'),
      ThemeMode.dark => const Text('Welcome to the dark side'),
      ThemeMode.light => const Text('The light is blinding')
    };
  }
}