How to return a registration layout based on a selected Dropdownmenuitem Flutter option

Question

Good afternoon, everyone!

I’m a beginner in development flutter and I’m having a hard time returning a specific registration layout based on the option selected by the user in Dropdownmenuitem.

Basically, if the user selects To I need you to return just a few Textfields for registration, while if it selects B return other Textfiels.

I’ll share my code with you...

I created Menudropdown, but I’m having a hard time pinpointing where I would put the analysis conditions. I searched some question boards but could not find anything related to my doubt.

Thanks in advance for the help!

      import 'package:firebase_auth/firebase_auth.dart';
      import 'package:flutter/material.dart';

 class CadastroVacinas extends StatefulWidget {
 @override
 _CadastroVacinasState createState() => _CadastroVacinasState();
}

class _CadastroVacinasState extends State<CadastroVacinas> {



List _vacinas = ["A", "B"];

List<DropdownMenuItem<String>> _dropDownMenuItens;

String _vacinaAtual;

@override
void initState() {
_dropDownMenuItens = getDropDownMenuItems();
_vacinaAtual = _dropDownMenuItens[0].value;
super.initState();
}

List<DropdownMenuItem<String>> getDropDownMenuItems(){
List<DropdownMenuItem<String>> itens = new List();
for (String vacinas in _vacinas){
  itens.add(new DropdownMenuItem(
      value: vacinas,
      child: new Text(vacinas)
  ));
}
return itens;
}

void changedDropDownItem(String vacinaSelecionada){
print("Vacina selecionada $vacinaSelecionada");
setState(() {
  _vacinaAtual = vacinaSelecionada;
});

}

_deslogarUsuario() {
 FirebaseAuth auth = FirebaseAuth.instance;
auth.signOut();

Navigator.pushNamedAndRemoveUntil(context, "/login", (_) => false);
}

@override
Widget build(BuildContext context) {
  return Scaffold(
  appBar: AppBar(
    automaticallyImplyLeading: false,
    iconTheme: IconThemeData(
      color: Color(0xff4f4138),
    ),
    backgroundColor: Color(0xffffcc00),
    title: Image.asset(
      "imagens/logo_menu.png",
      width: 90,
      height: 80,
    ),
    actions: <Widget>[
      IconButton(
        icon: Icon(Icons.exit_to_app),
        onPressed: () {
          _deslogarUsuario();
        },
      )
    ],
  ),
  body: Container(
    padding: EdgeInsets.all(20),
    child: SingleChildScrollView(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            "Cadastrar",
            style: (TextStyle(
              color: Color(0xff4f4138),
              fontSize: 30,
            )),
            textAlign: TextAlign.center,
          ),
          Padding(
            padding: EdgeInsets.only(left: 20, right: 20, bottom: 10, top: 50),
            child: Text(
              "Selecione uma vacina:",
              style: TextStyle(
                  color: Color(0xff4f4138),
                  fontSize: 16
              ),
            ),
          ),
          Padding(
            padding: EdgeInsets.only(left: 20, right: 20, bottom: 30),
            child: new DropdownButton(
                value: _vacinaAtual,
                items: _dropDownMenuItens,
                onChanged: changedDropDownItem
            ),
          )
        ],
      ),
    ),
  ),
 );
 }
}

Answer 1

I’ll give you an example of implementation and you try to follow the thought.

There are other ways to change a widget, but I’ll show you one that I think is cool.

Create a variable in your class, called PageController _controller = PageController();

In your method changedDropDownItem, make the following change:

void changedDropDownItem(String vacinaSelecionada){
  print("Vacina selecionada $vacinaSelecionada");
  setState(() {
    _vacinaAtual = vacinaSelecionada;
    _controller.jumpToPage(_vacinas.indexOf(vacinaSelecionada));
  });

}

And then implement below your DropDownButton a widget called PageView:

[...]
Padding(
  padding: EdgeInsets.only(left: 20, right: 20, bottom: 30),
  child: new DropdownButton(
    value: _vacinaAtual,
    items: _dropDownMenuItens,
    onChanged: changedDropDownItem
  ),
Container(
  height: 500, // O tamanho que quizer
  widget: 500, // O tamanho que quiser
    child: PageView(
    controller: _controller,
    physics: NeverScrollableScrollPhysics(),
    children:[
      FieldsVacina1,
      FieldsVacina2
    ]   
  )
)

Examples of creating classes with fields

class FieldsVacina1 extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(),
        TextField(),
        TextField(),
        TextField(),
      ]
    )
  }
}

class FieldsVacina2 extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(),
        TextField(),
      ]
    )
  }
}

Explanation

Whenever you select an option of your combo, will also be updated the current page of your pageView thus changing to the fields you want.
The class NeverScrollableScrollPhysics() serves so that the user can not scroll between pages.