flutter - 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();
}
),
);
});
}
我想当我按下按钮时会发生什么:
- 它调用 getUserData()
- 等待它
- 使用更改的主题构建登录
如果用户登录,我只想更改主题,而不是如果打开应用程序,它应该登录并设置主题。
如何使用多个提供商正确设置我的项目,并且不会让它闪烁且流畅?
希望很清楚:)
解决方案
推荐阅读
- java - 用于 pom 和 jar 文件的构建工具的 Gradle 错误
- sql - 在 PostgreSQL 中使用 COPY TO
- typescript - TypeScript 使用本地声明扩展 discord.js
- azure-language-understanding - 与实体无关的 LUIS 意图
- excel - 获取变量中包含的数字的最后一位
- python-3.x - Windows10 ubuntu bash:chromedriver无法启动Chrome?
- deterministic - Jetson TX2 上的 TensorRT“浮点 16”精度模式是否不确定?
- python - 在密度图上覆盖 Shapefile 数据点
- javascript - 包与其内部 node_modules 包依赖项无关,而是使用外部范围
- python-3.x - 连接到 docker 容器 (aiohttp) 内的 PostreSQL 时连接调用失败