标签: flutter-provider

我正在制作一个在线商店，其中在 mvvm 架构上有折扣部分和产品类别，目标是更改添加到购物车的产品数量，除了所有产品的数量发生变化外，一切正常，但所有内容都会显示在数据库中正确，我确信在某个地方我错过了一些重要的东西，我将不胜感激的答案，我将在下面附上屏幕截图

根页

return MultiProvider(\n    providers: [\n      ChangeNotifierProvider(\n        create: (context) => MainPageListViewModel(),\n      ),\n      ChangeNotifierProvider(\n          create: (context) => CartViewModel(),\n          child: CartPage()\n      ),\n      ChangeNotifierProvider(\n        create: (context) => AllGoodsViewModel(),\n      ),\n    ],\n  child: MaterialApp(\n      initialRoute: \'/\',\n      routes: {\n        \'/ProfilePage\': (context) => ProfilePage(),\n        \'/MainPage\': (context) => MainPage(),\n        \'/CartPage\': (context) =>   CartPage(),\n      },\n      builder: (context, widget) {\n        return ScreenUtilInitService(\n            builder: (context) => widget!\n        );\n      },\n      title: \'Flutter Demo\',\n      theme: ThemeData(\n        primarySwatch: Colors.blue,\n      ),\n      home: present != null ? present : MainPage()\n  ),\n);\n

也许我不明白 BloC 或 Provider 的目的，但我很困惑为什么我们想要使用它们而不是使用 Flutter 的内置状态管理（使用 widget）Stateful。我刚刚完成了一个应用程序，但不记得我希望我需要比默认值更多的东西。有人可以帮我解决问题吗？

我构建了一个工作倒计时时钟，以小时：分钟：秒的格式显示剩余时间。在有状态的小部件内。使用全屏墨水池来启动和停止它。我想要做的就是将此代码传输到更改通知程序。（我已经准备好更改通知程序设置，称为 CountdownTimers），因此我可以看到从我的应用程序上的多个页面运行的倒计时。

以下是有状态小部件中工作倒计时时钟的代码：

class ChessClock2 extends StatefulWidget {
  const ChessClock2({Key? key}) : super(key: key);

  @override
  State<ChessClock2> createState() => _ChessClock2State();
}

class _ChessClock2State extends State<ChessClock2> {
  static const countdownDuration = Duration(hours: 5, minutes: 10, seconds: 10);
  Duration duration = Duration();
  Timer? timer;

  bool beenPressed = false;

  @override
  void initState() {
    super.initState();
    Reset();
  }

  void Reset() {
    setState(() => duration = countdownDuration);
  }

  void AddTime() {
    final minusSeconds = -1;
    setState(() {
      final seconds = duration.inSeconds + minusSeconds;
      if (seconds < 0) …

我有以下服务：

1. SecuredStorageService()
2. ApiService({this.authService})
3. AuthService({this.securedStorageService, this.apiService})
4. RegisterService({this.apiService, this.securedStorageService})

这导致我写：

providers: [
  Provider<SecuredStorageService>.value(value: SecuredStorageService()),
  ProxyProvider<AuthService, ApiService>(
    builder: (_, auth, __) => ApiService(authService: auth),
  ),
  ProxyProvider2<ApiService, SecuredStorageService, RegisterService>(
    builder: (_, api, storage, __) => RegisterService(apiService: api, securedStorageService: storage),
  ),
  ProxyProvider2<ApiService, SecuredStorageService, AuthService>(
    builder: (_, api, storage, __) => AuthService(apiService: api, securedStorageService: storage),
  ),
],

到目前为止，我可以说它看起来已经很凌乱了。但事实并非如此。当我运行该应用程序时，出现以下错误：

那我怎么办？我在所有ProxyProvidersa之前添加Provider<AuthService>。但是，AuthService 被构造了两次！这失去了作为单一实例的全部意义（或者不是？）。

我的主要目标是进行某种依赖注入，就像在 Angular 或 Laravel 中一样。

我正在构建一个简单的 Flutter 应用程序。它的启动屏幕确定用户是否登录，然后根据它重定向到登录或主/主屏幕。

我的启动屏幕是一个StatefulWidget，其状态如下所示。它使用了一个扩展的 ViewModel 类ChangeNotifier（它的代码无关紧要，所以我没有包含它）。

class _LaunchPageState extends State<LaunchPage> {
          LaunchViewModel _viewModel = LaunchViewModel();

          @override
          void initState() {
            super.initState();
            _viewModel.checkSessionStatus();
          }

          @override
          Widget build(BuildContext context) {
            return ChangeNotifierProvider<LaunchViewModel>(
              builder: (_) => _viewModel,
              child: Scaffold(
                body: Consumer<LaunchViewModel>(
                  builder: (context, viewModel, _) {
                    if (viewModel.state is LaunchInitial) {
                      return CircularProgressIndicator();
                    }
                    if (viewModel.state is LaunchLoginPage) {
                      Navigator.pushNamed(context, "login");
                    }
                    if (viewModel.state is LaunchMainPage) {
                      Navigator.pushNamed(context, "main");
                    }
                    return Container();
                  },
                ),
              ),
            );
          }
        }

ViewModel 发出 …

我想知道FutureProvider该类存在什么用例？

我特别感兴趣的如何加载像一个异步函数Future<Contact> getAllContacts() async { ... }，当用户界面是一个内置FutureProvider，ChangeNotifierProvider或任何类似。

此外，每次notifyListeners()调用时，我希望该提供程序通过异步调用重建用户界面。提供者有什么可能的方式还是我错过了什么？

我是 flutter 的新手，我正在尝试使用提供程序创建一个应用程序。我用 ChangeNotifierProvider 包装了 MaterialApp 小部件，应用程序可以正常工作，我可以按预期使用提供程序。我需要知道这样做是否可以，我会遇到任何问题吗？

Widget build(BuildContext context) {
    return ChangeNotifierProvider<BaseModel>(
        builder: (context) =>
            BaseModel(loading: false, title: "Title", isLoggedIn: false),
        child: MaterialApp(
            routes: <String, WidgetBuilder>{
                "/home": (BuildContext context) => Home(),
                "/signIn": (BuildContext context) => SignIn()
            },
            initialRoute: "/signIn",
            title: 'Flutter Demo',
            theme: ThemeData(
                // is not restarted.
                primarySwatch: Colors.blue,
            ),
            home: SignIn()),
    );

在所有示例代码中，他们在 MaterialApp 小部件的“home”下使用 Provider。我在提供程序中使用了 MaterialApp。

我使用 ChangeNotifier 从 Stateful Widget 中提取一些逻辑到 Provider： class Model extends ChangeNotifier {...}

在我的有状态小部件中，我有：

  if (mounted) {
setState(() {});
}

如何检查 Widget 是否安装在模型中？

例如，我如何调用：

 if (mounted) {
notifyListeners();
}

每当我将提供程序添加到 MultipleProvider 时，它都会显示这个奇怪的错误，在花费 4 小时后无法解决它。

主程序.dart

MultiProvider(
      providers: [
        Provider<HandleImageSelectionModel>(
            create: (_) => HandleImageSelectionModel()),
      ],
      child: MaterialApp(
        title: 'Flutter Demo',
        initialRoute: '/',
        onGenerateRoute: RouteGenerator.generateRoute,
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
      ),
    );

提供者类别

import 'package:flutter/foundation.dart';

class HandleImageSelectionModel extends ChangeNotifier {
  bool isSelectionModeEnabled = false;
  HandleImageSelectionModel();
  toggleSelectionMode() {
    isSelectionModeEnabled = !isSelectionModeEnabled;
    notifyListeners();
  }
}

改变状态

Provider.of<HandleImageSelectionModel>(context)
                  .toggleSelectionMode();

尝试在这里消费

Consumer<HandleImageSelectionModel>(
                    builder: (context, isEnabled, child) {
                      print(isEnabled);

                      return Positioned(
                        child: Align(
                          alignment: Alignment.topRight,
                          child: CircularCheckBox(
                              value: true,
                              materialTapTargetSize:
                                  MaterialTapTargetSize.padded,
                              onChanged: (bool x) {}),
                        ), …

我有一个带有 PageView 的自定义 BottomAppBar 页面。我试图在用户单击 BottomAppBar 中的项目时更改页面。我正在使用 Provider 来管理全局状态。单击项目会触发提供程序中的值更改，但 PageView 中没有方法可以在值更改时触发页面更改。我怎样才能实现这个目标？下面是我的代码。

我的提供商：

class CurrentPage extends ChangeNotifier {
  int _currentPage = 0;
  int get currentPage => _currentPage;

  setCurrentPage(int val) {
    _currentPage = val;
    notifyListeners();
  }
}

BottomAppBar 项目：

 InkWell(
                onTap: () {
                  context.read<CurrentPage>().setCurrentPage(0);
                },
                child: Padding(
                  padding: const EdgeInsets.symmetric(
                      horizontal: 26.5, vertical: 17.0),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      Icon(
                        CustomIcons.home,
                        size: 18.0,
                        color: context.watch<CurrentPage>().currentPage == 0
                            ? Color(0xFF2C1DEB)
                            : Color(0xFFCCCCD5),
                      ),
                      SizedBox(height: 9.0),
                      Text(
                        'HOME',
                        style: TextStyle(
                          color: context.watch<CurrentPage>().currentPage == …