如何根据 Flutter 中的条件导航到页面

Question

我想根据条件导航到页面。当我选择“许可证”并按 next 按钮时，它应该重定向到许可证页面。当我选择“未授权”并按 next 按钮时，它应该将我重定向到未授权页面。

从下拉列表中选择“许可”/“未许可”值后，它应该使用该值来确定要重定向到哪个页面。

这是我目前尝试过的一些代码：

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

您可以使用状态变量获取下拉菜单的值，

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

很遗憾，我目前无法访问 Flutter 来实际测试代码，但想法如下。

保留一个状态变量，用于跟踪应用应显示哪种类型的页面。例如，bool license = false。如果许可证是true，导航到一页。如果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()),
                );
            }
        }
    }
)