CODEWITHSUNDEEP
flutterdesign-patternsriverpod
Similar pictures
Similar pictures

Reputation: 245

What is your sequence when developing with Riverpod for Flutter

This is a beginner question, where I would like to build a project as fast as possible, but hopefully without having to refactor Flutter tree structure later, for lack of experience now and not very clear picture of how the UI might change later.

Will it be correct to approach a new Flutter project in the following manner:

  1. Create a Flutter stateless widget tree (in analogy to HTML tree).
  2. Replace state-related widgets in places where it is necessary with Riverpod widgets.

Is Riverpod that flexible? My hope is that this is somehow similar to JavaScript with HTML.

Upvotes: 0

Views: 161

Answers (1)

triple7
triple7

Reputation: 883

Welcome to Flutter! In general, your approach is valid. Start with a static tree and build up functionality as you move along.

As far as Riverpod goes, it's really only a state management solution, so it's not directly related to what you're asking about. That said, it is extremely flexible and makes it really easy to convert stateless widgets into stateful ones. It offers two main ways of doing that:

  1. Creating a widget that extends ConsumerWidget:
class WelcomeMessage extends ConsumerWidget{
  ...
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final String message = ref.watch(welcomeMessageProvider);

    return Text(message);
  }
}
  1. Wrapping a specific widget in the tree with a Consumer widget:
class WelcomePrompt extends StatelessWidget {
  ...
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Consumer(
          builder: (BuildContext context, WidgetRef ref, Widget? child) {
            final String name = ref.watch(usernameProvider);

            return Text('Hello $username!'),
          },
        ),
        Text('We are very happy to see you again.'),
      ],
    );
  }
}

It's usually better to use ConsumerWidget and break out any widget that needs a state into a separate class, as opposed to using a Consumer widget within your tree.

Upvotes: 1

Related Questions