Using different widgets on the basis of value of spinner in flutter - flutter

Question

I want the user on Register and Login screen to first choose their role from a drop down button and on the basis of its value I want to show further widgets on the very same page....
For this should i create a normal class containing all the respective widgets or a stateful widget?
and how to call that widget just after selecting the role from the DropDown List?

Answer 1

You can create different Stateful or stateless widget base on requirement for different role and you can change screen base on drop down value.
Following code will help you more.
class Delet2 extends StatefulWidget {
#override
_Delet2State createState() => _Delet2State();
}
class _Delet2State extends State<Delet2> {
Widget _currentScreen;
int role;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
_currentScreen ?? Container(),
DropdownButton(
value: role,
items: [1, 2]
.map(
(item) => DropdownMenuItem(
value: item,
child: Text(
item.toString(),
),
),
)
.toList(),
onChanged: (value) {
setState(() {
role = value;
if (role == 1) {
_currentScreen = Screen1();
} else {
_currentScreen = Screen2();
}
});
},
),
],
),
),
);
}
}
class Screen1 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
child: Text("screen1"),
);
}
}
class Screen2 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
child: Text("screen2"),
);
}
}

Answer 2

You have to create Stateful widget and then based on the value selected in spinner you can draw widget, please follow below code snippet:
class MySpinnerWidget extends StatefulWidget {
#override
_MySpinnerWidgetWidgetState createState() => _MySpinnerWidgetWidgetState();
}
class _MySpinnerWidgetWidgetState extends State<MySpinnerWidget> {
String dropdownValue = 'One';
List<String> spinnerItems = ['One', 'Two', 'Three'];
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(children: <Widget>[
DropdownButton<String>(
value: dropdownValue,
icon: Icon(Icons.arrow_drop_down),
onChanged: (String data) {
setState(() {
dropdownValue = data;
});
},
items: spinnerItems.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
if(dropdownValue == 'One')
Text('Value One selected from spinner'),
if(dropdownValue == 'Two')
Text('Value Two selected from spinner'),
if(dropdownValue == 'Three')
Text('Value Three selected from spinner'),
]),
),
);
}
}