[英]How to navigate to page based on condition in Flutter
我想根据条件导航到页面。 当我选择“许可证”并按下一步按钮时,它应该重定向到许可证页面。 当我选择“未经许可”并按下一步按钮时,应将我重定向到未经许可的页面。
从下拉列表中选择“许可证” /“未许可”值后,应使用该值来确定要重定向到的页面。
这是到目前为止我尝试过的一些代码:
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(),
],
),
),
),
],
),
),
),
);
}
}
您可以使用状态变量获取dropdown的值,
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(),
],
),
),
),
],
),
),
),
);
}
}
不幸的是,目前我无法访问Flutter来实际测试代码,但是想法如下。
保留一个状态变量,以跟踪应用程序应显示的页面类型。 例如, bool license = false
。 如果许可证为true
,请导航到一页。 如果为false
, false
其他。 您可以对下拉列表进行编码以更改该变量。
用户选择一个或另一个值后,可使用它导航到基于该值的页面。 用伪代码:
FlatButton(
...<styling>...
onPressed: () {
if (_formKey.currentState.validate()) {
if (license) {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => LicensePage()),
);
} else {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => UnlicensedPage()),
);
}
}
}
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.