Access Flutter provider from another provider?

[michaelgaultjr]

I'm very interested in this method of state management so far and I'd like to use it in my projects going forward but I can't seem to find the correct way to access a provider from within a provider using the Flutter version of this package. For example (using the Todo example structure as a base), let's say I have 2 providers:

1. The UserController provider which contains a signal of a User object, which contains the id, display name, profile picture url, token, etc...

2. And the PostsController provider which has a signal with a List<Post> for the currently logged in user, as well as methods to create/update/delete a post.

How would I access the current value (or even listen to) the User signal from existing UserController instance in the PostsController?

Would I have one controller that contains both the User signal, and the List<Post> signal, or would I create both instances in the main function, or is there another way?

[nank1ro]

Given the following controllers:

class UserController {
  final _user = createSignal<User?>(null);
  // Expose the read-only signal
  late final user = _user.toReadSignal();
}

class PostsController {
  PostsController({
    required this.user,
  });

  final ReadSignal<User?> user;
  final posts = createSignal<List<Post>>([]);
}

The PostsController depends on the user signal.
At the start of the tree we may have:

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

  @override
  Widget build(BuildContext context) {
    return Solid(
      providers: [
        SolidProvider<UserController>(create: () => UserController())
      ],
      child: MaterialApp(...),
    );
  }
}

And below we may have:

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

  @override
  Widget build(BuildContext context) {
    return Solid(
      providers: [
        SolidProvider<PostsController>(
          create: () => PostsController(
            user: context.get<UserController>().user,
          ),
        ),
      ],
      child: const Placeholder(),
    );
  }
}

Put in simple words, shared providers need to be at the top of the tree so children can access their values.

[michaelgaultjr]

Given the following controllers:

class UserController {
  final _user = createSignal<User?>(null);
  // Expose the read-only signal
  late final user = _user.toReadSignal();
}

class PostsController {
  PostsController({
    required this.user,
  });

  final ReadSignal<User?> user;
  final posts = createSignal<List<Post>>([]);
}

The PostsController depends on the user signal. At the start of the tree we may have:

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

  @override
  Widget build(BuildContext context) {
    return Solid(
      providers: [
        SolidProvider<UserController>(create: () => UserController())
      ],
      child: MaterialApp(...),
    );
  }
}

And below we may have:

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

  @override
  Widget build(BuildContext context) {
    return Solid(
      providers: [
        SolidProvider<PostsController>(
          create: () => PostsController(
            user: context.get<UserController>().user,
          ),
        ),
      ],
      child: const Placeholder(),
    );
  }
}

Put in simple words, shared providers need to be at the top of the tree so children can access their values.

Ah, I see, so the way to do this would be inject as the lowest possible point in the tree, or at least lower than the dependencies.

So if I were to make this a little more complex and add some additional providers I needed to access "globally" that are dependent on other providers, I would do the following, correct?

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

  @override
  Widget build(BuildContext context) {
    return Solid(
      providers: [
        SolidProvider<UserController>(create: () => UserController()),
        SolidProvider<OtherController>(create: () => OtherController()),
      ],
      child: Solid(
        providers: [
          SolidProvider<DependantController1>(create: () => DependantController1(
            user: context.get<UserController>().user,
          )),
          SolidProvider<DependantController2>(create: () => DependantController2(
            user: context.get<UserController>().user,
            otherController: context.get<OtherController>(),
          )),
        ],
        child: MaterialApp(...)
      );
    );
  }
}

[manuel-plavsic]

Yes, that is correct. Adding OtherController to the first Solid widget is the correct procedure in this case. It can be placed alongside UserController as neither depends on the other one.

However, if for example UserController depended on OtherController, then OtherController would have to be placed one layer above UserController.

[nank1ro]

The code in question is incorrect because the BuildContext is not a child of the first Solid widget.
You may have:

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

  @override
  Widget build(BuildContext context) {
    return Solid(
      providers: [
        SolidProvider<UserController>(create: () => UserController()),
        SolidProvider<OtherController>(create: () => OtherController()),
      ],
      child: Builder(
        builder: (context) {
          return Solid(
            providers: [
              SolidProvider<DependantController1>(create: () => DependantController1(
                user: context.get<UserController>().user,
              )),
              SolidProvider<DependantController2>(create: () => DependantController2(
                user: context.get<UserController>().user,
                otherController: context.get<OtherController>(),
              )),
            ],
            child: MaterialApp(...)
          );
        }
      );
    );
  }
}

or If you declare all the providers in the same (Stateless|Stateful)Widget, like for the shared providers that are on top of the MaterialApp, you can even do this:

class MyApp extends StatelessWidget {
  MyApp({super.key});

  final userController = UserController();
  final otherController = OtherController();
  late final DependantController1 dependantController1 = DependantController1(
    user: userController.user,
  );
  late final DependantController2 dependantController2 = DependantController2(
    user: userController.user,
    otherController: otherController,
  );

  @override
  Widget build(BuildContext context) {
    return Solid(
      providers: [
        SolidProvider<UserController>(create: () => userController),
        SolidProvider<OtherController>(create: () => otherController),
        SolidProvider<DependantController1>(create: () => dependantController1),
        SolidProvider<DependantController2>(create: () => dependantController2)
      ],
      child: MaterialApp(...),
    );
  }
}