0

我将库添加到 pubspec.yaml。在当前项目中，我没有使用钩子，而是使用了包，因为我想用它来构建一个骨架启动项目。

pubspec.yaml：

  flutter_hooks: ^0.18.2+1
  hooks_riverpod: ^1.0.3

然后我将代码修改为最新的 RiverPod 语法。这涉及将事物更改为 Consumer 小部件并使用 ref 参数。该应用程序现在运行，但只是没有从暗模式切换到亮模式，反之亦然！

主要飞镖：

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

class AppThemeState extends StateNotifier<bool> {
  AppThemeState(): super(false);

  void setLightTheme() => state = false;
  void setDarkTheme() => state = true;
}

// Theme
final appThemeStateNotifier = StateNotifierProvider((ref) => AppThemeState());

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends HookConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final darkModeEnabled = ref.watch(appThemeStateNotifier);
    return MaterialApp(
      title: 'Flutter Demo',
      theme: AppTheme.lightTheme,
      darkTheme: AppTheme.darkTheme,
      themeMode: darkModeEnabled != null ? ThemeMode.dark : ThemeMode.light,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 2.0,
        title: Text("Flutter Theme Riverpod Demo"),
      ),
      body: Column(
        children: [
          Expanded(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text("Light Mode"),
                DarkModeSwitch(),
                Text("Dark Mode"),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class DarkModeSwitch extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final darkModeEnabled = ref.read(appThemeStateNotifier) == true;

    return //Text('$darkModeEnabled');
    Switch(
      value: darkModeEnabled,
      onChanged: (enabled) {
        if (enabled) {
          ref.read(appThemeStateNotifier.notifier).setDarkTheme();
        } else {
          ref.read(appThemeStateNotifier.notifier).setLightTheme();
        }
      },
    );
  }
}

class AppTheme {
  // Private Constructor
  AppTheme._();

  static final lightTheme = ThemeData(
    scaffoldBackgroundColor: Colors.white,
    appBarTheme: AppBarTheme(
      color: Colors.teal,
      iconTheme: IconThemeData(
        color: Colors.white,
      ),
    ),
    textTheme: TextTheme(
      bodyText2: TextStyle(
        color: Colors.black,
      ),
    ),
  );

  static final darkTheme = ThemeData(
    scaffoldBackgroundColor: Colors.black,
    appBarTheme: AppBarTheme(
      color: Colors.black,
      iconTheme: IconThemeData(
        color: Colors.white,
      ),
    ),
    textTheme: TextTheme(
      bodyText2: TextStyle(
        color: Colors.white,
      ),
    ),
  );
}
4

1 回答 1

0

问题出在这一行：

themeMode: darkModeEnabled != null ? ThemeMode.dark : ThemeMode.light,

darkModeEnabled不能为空。

改用这个：

themeMode: darkModeEnabled ? ThemeMode.dark : ThemeMode.light,
于 2022-02-23T07:31:01.397 回答