1

I have 3 pages:

> A page where the user enters their desired display name
  > A page where the user enters their desired username
    > A page where the user enters their desired password

I need to be able to pass the data (display name, username, password) down to the password page, where there is a final "Submit" button that will actually create the user's account.

What I've done so far is created the 3 individual widgets and I call Navigator.push to go between them.

However, with the provider library, it looks like it doesn't really handle navigation pushing all that well according to this answer.

So I'm wondering how else I should lay out my widgets so that it works as it's supposed to with provider?

user023425
  • 169
  • 8
  • Why do you need 3 pages for this? Do you really want the user to navigate through so many pages only to create an account? Where is the User Experience? I would do that on one page. – Celt K. B. Dec 14 '22 at 22:53

1 Answers1

0

Your nested pages looks perfectly fine, there are 2 possible methods here which one of it you have mentioned using provider. Instead you can use the in-build arguments with Navigator.push to pass your data down the widget tree.

It may be a little "dirty" but it should work well in your case since there isn't much data and nested pages to be passed down.

First you need to define the arguments you need to pass in for example:

// You can pass any object to the arguments parameter.
// In this example, create a class that contains both
// a customizable title and message.
class ScreenArguments {
  final String displayName;
  final String username;

  ScreenArguments({this.displayName, this.username});
}

Next, pass the required data you want like this:

Navigator.pushNamed(
  context,
  ExtractArgumentsScreen.routeName,
  arguments: ScreenArguments(
    displayName: 'Your Display Name',
  ),

Then on your next screen you need to extract the argument inside the widget tree build context:

final args = ModalRoute.of(context)!.settings.arguments as ScreenArguments;

Access your data through this method and store it in a new variable on the nested page:

String displayName = args.displayName

Repeat this step once more until your final nested page and include your username argument. Extract those arguments and you can now submit your form to your database on your final nested page

Example flow:

> A page where the user enters their desired display name
  - Pass this argument through Nagivator.push
  > A page where the user enters their desired username
    - Store the displayName argument as variable
    - Pass both displayName and username argument through Navigator.push
    > A page where the user enters their desired password
      - Store both displayName and username argument as variable
      - Retrieve all input variables and pass into submit form

You may refer to this dart documentation for more details in how to properly pass arguments through Navigator

Zechst
  • 1
  • 3