How to navigate to page based on condition in Flutter - flutter

Question

I want to navigate to a page based on a condition. When I select 'license' and press the next button it should redirect to license page. When I select 'unlicensed' and press next button it should redirect me to unlicensed page.
After selecting the 'licence'/'unlicensed' value from drop-down it should use that value to determine which page to redirect to.
Here is some code I've tried so far:
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
class BspSignupPage extends StatefulWidget {
#override
_BspSignupPageState createState() => _BspSignupPageState();
}
class _BspSignupPageState extends State<BspSignupPage> {
bool bspcheck = false;
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
String _dropdownError;
File _image;
List<String> _colors = <String>[
'',
'Licensed / Register',
'Unregistered',
];
List<DropdownMenuItem<String>> _dropDownItem() {
List<String> ddl = ["License/Registered", "UN-Registered"];
return ddl
.map((value) => DropdownMenuItem(
value: value,
child: Text(value),
))
.toList();
}
Widget _buildbusinesstype() {
String _selectedGender;
return new FormBuilder(
autovalidate: true,
child: FormBuilderCustomField(
attribute: "Business Type",
validators: [
FormBuilderValidators.required(),
],
formField: FormField(
builder: (FormFieldState<dynamic> field) {
return InputDecorator(
decoration: InputDecoration(
prefixIcon: Icon(Icons.merge_type),
errorText: field.errorText),
//isEmpty: _color == '',
child: new DropdownButtonHideUnderline(
child: new DropdownButton(
value: _selectedGender,
items: _dropDownItem(),
onChanged: (value) {
_selectedGender = value;
},
hint: Text('Select Business Type'),
),
),
);
},
),
));
}
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text("BSP Signup"),
leading: IconButton(
icon: Icon(Icons.arrow_back_ios),
onPressed: () {
Navigator.pop(context);
},
),
centerTitle: true,
),
bottomNavigationBar: Container(
color: Colors.transparent,
height: 56,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new FlatButton.icon(
icon: Icon(Icons.close),
label: Text('Clear'),
// color: Colors.redAccent,
textColor: Colors.black,
// padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(7),
),
onPressed: () {},
),
new FlatButton.icon(
icon: Icon(Icons.ac_unit),
label: Text('Next'),
color: Colors.amber,
textColor: Colors.white,
//padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(7),
),
onPressed: () async {
if (_formKey.currentState.validate()) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => BspSignupPage()));
}
}),
],
),
),
body: Container(
height: double.infinity,
width: double.infinity,
child: Form(
autovalidate: true,
key: _formKey,
child: Stack(
children: <Widget>[
SingleChildScrollView(
padding: const EdgeInsets.all(30.0),
child: new Container(
child: new Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildbusinesstype(),
],
),
),
),
],
),
),
),
);
}
}

Answer 1

You can get the value of dropdown using a state variable,
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
class BspSignupPage extends StatefulWidget {
#override
_BspSignupPageState createState() => _BspSignupPageState();
}
class _BspSignupPageState extends State<BspSignupPage> {
bool bspcheck = false;
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
String _dropdownError;
String _dropDownValue = '';
File _image;
List<String> _colors = <String>[
'',
'Licensed / Register',
'Unregistered',
];
List<DropdownMenuItem<String>> _dropDownItem() {
List<String> ddl = ["License/Registered", "UN-Registered"];
return ddl
.map((value) => DropdownMenuItem(
value: value,
child: Text(value),
))
.toList();
}
Widget _buildbusinesstype() {
String _selectedGender;
return new FormBuilder(
autovalidate: true,
child: FormBuilderCustomField(
attribute: "Business Type",
validators: [
FormBuilderValidators.required(),
],
formField: FormField(
builder: (FormFieldState<dynamic> field) {
return InputDecorator(
decoration: InputDecoration(
prefixIcon: Icon(Icons.merge_type),
errorText: field.errorText),
//isEmpty: _color == '',
child: new DropdownButtonHideUnderline(
child: new DropdownButton(
value: _selectedGender,
items: _dropDownItem(),
onChanged: (value) {
_dropDownValue = value;
},
hint: Text('Select Business Type'),
),
),
);
},
),
));
}
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text("BSP Signup"),
leading: IconButton(
icon: Icon(Icons.arrow_back_ios),
onPressed: () {
Navigator.pop(context);
},
),
centerTitle: true,
),
bottomNavigationBar: Container(
color: Colors.transparent,
height: 56,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new FlatButton.icon(
icon: Icon(Icons.close),
label: Text('Clear'),
// color: Colors.redAccent,
textColor: Colors.black,
// padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(7),
),
onPressed: () {},
),
new FlatButton.icon(
icon: Icon(Icons.ac_unit),
label: Text('Next'),
color: Colors.amber,
textColor: Colors.white,
//padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(7),
),
onPressed: () async {
if (_formKey.currentState.validate()) {
// Now use if statement here to decide which route you want to go
if(_dropdDown == "SOME_VALUE"){
// Go to this route
}
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => BspSignupPage()));
}
}),
],
),
),
body: Container(
height: double.infinity,
width: double.infinity,
child: Form(
autovalidate: true,
key: _formKey,
child: Stack(
children: <Widget>[
SingleChildScrollView(
padding: const EdgeInsets.all(30.0),
child: new Container(
child: new Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildbusinesstype(),
],
),
),
),
],
),
),
),
);
}
}

Answer 2

Unfortunately, I do not have access to Flutter to actually test the code at the moment, but the idea would be as follows.
Keep a state variable that tracks which type of page the app should show. For example, bool license = false. If license is true, navigate to one page. If false, the other. You can code the dropdown list to change that variable.
Once a user has selected one or the other value, use it to navigate to a page based on it. In pseudo code:
FlatButton(
...<styling>...
onPressed: () {
if (_formKey.currentState.validate()) {
if (license) {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => LicensePage()),
);
} else {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => UnlicensedPage()),
);
}
}
}
)