首页 > 解决方案 > Flutter 提供者身份验证和主题更改

问题描述

目标

我正在做一个项目,我希望我的应用能够登录到 API 并更改其主题。

所以我决定使用Provider它作为我的状态管理系统。

预期和实际结果

我写的现在有效。我的应用程序的每个页面都有一个按钮,用于更改主题。

IconButton(
    onPressed: () => {widget.theme!.toggleMode()},
)

onpress 联系了我写过的ThemeChanger扩展类的类:ChangeNotifier


class ThemeChanger with ChangeNotifier {
  ThemeMode? _mode;
  ThemeMode? get mode => _mode;

  ThemeChanger() {
      _mode = ThemeMode.light;
      notifyListeners();
    });
  }

  void toggleMode() {
    _mode = (_mode == ThemeMode.light) ? ThemeMode.dark : ThemeMode.light;
    AppTheme.setStatusBarAndNavigationBarColors(_mode);
    notifyListeners();
  }
}

当按下按钮时,它会调用toggleMode()通知消费者的方法,MaterialApp即更改其themeMode属性。

return Consumer<ThemeChanger>(builder: (themeContext, theme, child) {
    return MaterialApp(
        themeMode: theme.mode,
    )
}

然后每个元素的颜色属性都会引用Theme.of(context).SOMECOLOR并在更改时自动themeMode更改

但问题是,每次我更改主题时,所有小部件树都必须重新构建,并且不会很顺利。

我认为问题是因为应用程序必须在我每次更改 themeMode 时重建所有 UI,但它还必须重建我正在使用的另一个提供程序:AuthProvider

我的应用程序如下所示:

void main() => runApp(
      MultiProvider(
        providers: [
          ChangeNotifierProvider<AuthProvider>(create: (_) => AuthProvider()),
          ChangeNotifierProvider<UserProvider>(create: (_) => UserProvider()),
          ChangeNotifierProvider<ThemeChanger>(create: (_) => ThemeChanger()),
        ],
        child: App(),
      ),
    );

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Future<User> getUserData() => UserPreferences().getUser();

    return Consumer<ThemeChanger>(builder: (themeContext, theme, child) {
      return MaterialApp(
        themeMode: theme.mode,
        home: FutureBuilder<User>(
          future: getUserData(),
          builder: (BuildContext context, AsyncSnapshot<User> snapshot) {
                return Login();
            }
        ),
      );
    });
  }

我想当我按下按钮时会发生什么:

  1. 它调用 getUserData()
  2. 等待它
  3. 使用更改的主题构建登录

如果用户登录,我只想更改主题,而不是如果打开应用程序,它应该登录并设置主题。

如何使用多个提供商正确设置我的项目,并且不会让它闪烁且流畅?

希望很清楚:)

标签: flutterperformanceauthenticationproviderstate-management

解决方案


推荐阅读