Showing different forms based on dropdown selection in flutter

Question

I'm creating a mobile application in which I want to use a dropdown to select a "note type" (to create a new note) and based on the selection from the dropdown I want to show a specific form for the selected note type (each note type should have their own mix of formfields, both dropdowns and text) in the section below the "note type dropdown menu".

Have yet not been able to find any example on how to achieve this and therefor giving this a try!:)

Update: The buildNoteTypeForm() functions are linked to each forms individual .dart file where each individual form will be built. This is giving me an error on onChanged: Printscreen of error

class _NoteState extends State<NoteWidget>
Map<String, Widget> noteTypeOptions = {
'First note type': buildFirstNoteTypeForm(),
'Second note type': buildSecondNoteTypeForm()
};
late String noteType;

@override
void InitState() {
noteType = noteTypeOptions.keys.first;
}

@override
Widget build(BuildContext context) {

Widget noteTypeMenu = buildNoteTypeMenu();

Widget noteTypeForm = buildNoteTypeForm();

return MaterialApp(
 theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
 home: Scaffold(
      body: ListView(children: [noteTypeMenu, noteTypeForm])),
  );
}

buildNoteTypeForm() {
//Get noteType from selected dropdown option and build selected form
}

buildNoteTypeMenu() {
 DropdownButton(
    items: noteTypeOptions
        .map((key, value) {
          return MapEntry(
              key,
              DropdownMenuItem(
                value: value,
                child: Text(key),
              ));
        })
        .values
        .toList(),
    value: noteType,
    onChanged: (noteType? selected) {
      if (selected != null) {
        setState(() {
          noteType = selected;
   });
  }
 });
}

score 0 · Accepted Answer · answered Oct 19 '22 at 16:10

0

If your forms has too much differences, then the most optimal way is to create different "FormPart" widgets. Note they are not specific widget types. You will create them yourself. I am just naming it like that.

For simplicity you can declare
Map<String, Widget> typeToForm = {'type1': Form1(), ...}
where you associate types with FormPart widgets

Dropdown items will be like

Then you can declare like that in State class of your stateful widget:
late String type;.

Inside initState method you will give value to it like type = typeToForm.keys.first;

Then inside build method you need to put that formPart widget in appropriate node of widget tree, like

Column(
   children: <Widget>[
      ...,
      ...,
      typeToForm[type],
      ...,
  ],

),

The last key element is inside onChanged like function of dropdown menu, which you are changing types. You will write here

setState((){type = value;});

answered Oct 19 '22 at 16:10

Jakhongir Anasov

1,207
7
16

Thank you for the reply! My initial thought is this: Each "Note Type" has it's own .dart file under "components/notetypeform.dart" which would contain their indivudal method for building their widget/form so I guess that could work like the "formParts" you suggest? And would you put the Map under the State class of "pages/newnote.dart" where the main code is? Will give this a go, thx! – J Moss Oct 20 '22 at 08:52
Yes exactly. The map’s appropriate place is in main code(where whole form changing logic is managed) dart file, obviously. If my answer helped you, please kindly mark it as accepted. Thx! – Jakhongir Anasov Oct 20 '22 at 10:52
Getting this error: "The element type 'Map' can't be assigned to the list type 'Widget'." This happens in the body section of Scaffold under MaterialApp where I am including each section as a variable/child inside a ListView. For now I am only using this as the method in each form/dart file to print a String: buildForm1() { Widget newForm = const SizedBox(child: Text('This is where the newForm will be built')); } And the map looks like this: Map noteTypeForm = { 'Form1': buildForm1(), 'Form2': buildForm2() }; – J Moss Oct 20 '22 at 13:13
According to error you are putting whole map, instead of it’s element. You must put like mapVariable[stringKeyOfForm] – Jakhongir Anasov Oct 21 '22 at 05:22
Please see update in my question with code. Not sure how to go about the type error I am getting here. Thx! (New to flutter/Dart so expecting me missing something very simple here.. :)) – J Moss Oct 28 '22 at 15:15
Provide full error message please. It would be good if you give a screenshot of that error message – Jakhongir Anasov Oct 29 '22 at 16:08
Sure updated with a printscreen (link in question). Although it doesn't give much more info, just that it throws a type error. But why can't I use String for "noteType"? – J Moss Nov 01 '22 at 10:34
Actually, it is simple thing, because onChanged: (value){} is a method declaration. And You can only put a type of value before it, like onChanged: (String value){}. I would also recommend to put key instead of value in DropDownMenuItem's value. Actually the idea is correct(to solve the problem you questioned). You just need to more practice with DropDown button. Simply try simple things with it, just to get how it works under the hood. – Jakhongir Anasov Nov 01 '22 at 20:13
Thank you for the help, I have now found a solution and got the function working as I want! – J Moss Nov 09 '22 at 13:33

Showing different forms based on dropdown selection in flutter

1 Answers1