如何根据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()),
                );
            }
        }
    }
)