skip to Main Content

Which method is preferable in Flutter: using a Provider or directly passing values to the next page?

I’m wondering which approach is better suited for transferring data between Flutter pages. I’m debating whether to use a Provider to centrally manage data and make it accessible across the app, or simply pass the values directly to the next page. What are the pros and cons of these approaches? Are there specific scenarios where using a Provider is preferred, and others where directly passing values is more practical?

I’d appreciate advice and insights from the Flutter community. Thanks in advance!

Edit: Are there impacts in terms of performance?

2

Answers


  1. It depends. For simple data in a limited scope, directly passing values between pages is sufficient. If your app grows in complexity or if you need to manage data across multiple screens, using a Provider would be a more structured and efficient way to handle state.

    Login or Signup to reply.
  2. data management is very important. you have to understand the data flow between screen and modules.

    my preference is like this:

    • if i have 3 modules that access user profile data. so i have to put user profile data to state management. since 3 modules could possibly change the user profile data
    • then when i have search screen which contain date time filter (from date and to date), then i have to show the result on new screen then also showing the date filter on result screen like "filtering date x to date y". the data update happened one sided (the result screen don’t have the right to update the data). in this case, you need to pass the arguments

    bonus: when passing arguments, i make class to make things easier

    class InvoiceResultViewArgs {
      const InvoiceResultViewArgs({
        required this.viewEnum,
        required this.from,
        required this.to,
      });
    
      final InvoiceViewEnum? viewEnum;
      final DateTime? from;
      final DateTime? to;
    }
    
    class InvoiceResultView extends StatefulHookConsumerWidget {
      const InvoiceResultView({
        required this.args,
        super.key,
      });
    
      static const String routeName = '/invoice_result_view';
      final InvoiceResultViewArgs args;
    
      @override
      ConsumerState<ConsumerStatefulWidget> createState() =>
          _InvoiceResultViewState();
    }
    

    somewhere on routes file:

      if (settings.name == InvoiceResultView.routeName) {
        if (settings.arguments is InvoiceResultViewArgs) {
          InvoiceResultViewArgs args =
              settings.arguments as InvoiceResultViewArgs;
    
          return InvoiceResultView(args: args);
        }
    
        return const MissingArgumentView();
      }
    

    this will makes things a lot easier and clean
    also i use riverpod, makes it even cleaner

    just makesure that you separate business logic and data..

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search