Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Form with multiple steps (wizard style) in Flutter - Best approach

I need to prepare a screen to create a new record for a table with several fields. Some fields are conditional on previous fields. My initial attempt includes a TabController/TabBarView/Tabs set where every tab is a part of the form.

My two problems there are:

  • I cannot seem to be able to hide the "tab" (icon/text) itself in a TabBarView ( I want to use a button for "Next Step")

  • Even if I live with that, if I build a widget for each tab, I'd need a GlobalKey for every Form (one for each tab) as they cannot be shared.

Is there another way to do this, with another widget or approach so as to have a Form divided in several steps/screens and then submit the whole data as a whole?

like image 414
cdsaenz Avatar asked Jul 24 '19 21:07

cdsaenz


1 Answers

You can use the Stepper Widget. it can enable you from making vertical or horizontal wizard from multiple steps.

Stepper({
  Key key,
  @required this.steps,
  this.physics,
  this.type = StepperType.vertical,
  this.currentStep = 0,
  this.onStepTapped,
  this.onStepContinue,
  this.onStepCancel,
  this.controlsBuilder,
})

You can follow this example by Paul Halliday https://developer.school/flutter-how-to-use-the-stepper-widget/

like image 138
Anas Naguib Avatar answered Sep 23 '22 22:09

Anas Naguib