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

时间:2019-09-13 09:27:20

标签: flutter drop-down-menu navigation flutter-layout flutter-dependencies

我想根据条件导航到页面。当我选择“许可证”并按下一步按钮时,它应该重定向到许可证页面。当我选择“未经许可”并按下一步按钮时,应将我重定向到未经许可的页面。

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

这是到目前为止我尝试过的一些代码:

componentDidUpdate(_prevProps, prevState) {
   if (this.state.currentCategory !== prevState.currentCategory) {
      this.getFilms();
   }
}

2 个答案:

答案 0 :(得分:2)

您可以使用状态变量获取下拉列表的值

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(),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

答案 1 :(得分:0)

不幸的是,目前我无法访问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()),
                );
            }
        }
    }
)