Flutter create form based on multiple pages

Question

I need to create form based on multiple pages, validate and submit on finish. How I can realise something like this form using provider and flutter bloc packages? I tried create like this form using storage but I think it's bad practice. Anybody have any idea? Thanks before!

Solution

I would suggest you to use the flow_builder (Link) plugin which will handle the flow for you based on a state. The example in the repository is quite what you want. First you will build a model which will be used as the state

class Profile {
  const Profile({this.name, this.age, this.weight});

  final String name;
  final int age;
  final int weight;

  Profile copyWith({String name, int age, int weight}) {
    return Profile(
      name: name ?? this.name,
      age: age ?? this.age,
      weight: weight ?? this.weight,
    );
  }
}

Then you can use the FlowBuilder widget like this:

FlowBuilder<Profile>(
  state: const Profile(),
  onGeneratePages: (profile, pages) {
    return [
      MaterialPage(child: NameForm()),
      if (profile.name != null) MaterialPage(child: AgeForm()),
    ];
  },
);

Then you can update widget in your form pages using:

context.flow<Profile>().update((profile) => profile.copyWith(name: _name));

Comments

[AFetter]

hey mate, one thing is no clear to me. Where I must load the data? In this case, I have a form with multiple pages. Do I load the data on ProfileFlow or in the ProfileNameForm?

[Amir_P]

It’s not clear for me what and why you’re loading. You can ask a question with full detail and comment the link here. I will check it later. @AFetter

[tinoper]

@Amir_p by chance, Do you know how to check if age have a value before?