如何从 Flutter 中的下拉按钮导航到另一个屏幕？

Question

一旦通过下拉按钮按下列表中的一个项目，我正在尝试获取一个下拉列表以导航到另一个屏幕。我曾尝试使用 Navigator.push 直接进入 onChanged 但这不起作用。我已经尝试在 onChanged 中创建一个处于设置状态的新按钮。我不知道该怎么做？

import 'package:flutter/material.dart';

void main() => runApp(new HomeNavigator());

class HomeNavigator extends StatefulWidget {
@override
_HomeNavigator createState() => _HomeNavigator();
}

class _HomeNavigator extends State<HomeNavigator> {
List<DropdownMenuItem<String>> listMunicipalities = [];
String selected = null;
void loadData() {
listMunicipalities = [];
listMunicipalities.add(new DropdownMenuItem(
  child: new Text('Port Moody'),
  value: 'Port Moody',
));
listMunicipalities.add(new DropdownMenuItem(
  child: new Text('Vancouver Downtown'),
  value: 'Vancouver Downtown',
));
listMunicipalities.add(new DropdownMenuItem(
  child: new Text('Coquitlam'),
  value: 'Coquitlam',
));
}

@override
Widget build(BuildContext context) {
loadData();
Color gradientStart = Colors.deepOrange[700];
Color gradientEnd = Colors.purple[500];

return new MaterialApp(
    home: new Scaffold(
        body: new Container(
            decoration: new BoxDecoration(
              gradient: new LinearGradient(
                  colors: [gradientEnd, gradientStart],
                  begin: new FractionalOffset(0.0, 0.5),
                  end: new FractionalOffset(0.5, 0.0),
                  stops: [0.0, 1.0]),
            ),
            child: Stack(children: [
              Container(
                  child: Text('',
                      textAlign: TextAlign.center,
                      style: TextStyle(
                          fontSize: 30.0,
                          fontFamily: 'College-Block',
                          color: Colors.white.withOpacity(0.7))),
                  alignment: Alignment(0.0, -0.5)),
              Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: new Center(
                      child: new Container(
                    alignment: Alignment(0.0, 0.05),
                    child: Container(
                        width: 350.0,
                        child: DropdownButtonHideUnderline(
                          child: new DropdownButton(
                            value: selected,
                              items: listMunicipalities,
                              hint: Text(
                                'Select City',
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    fontWeight: FontWeight.bold,
                                    color: Colors.white.withOpacity(0.5)),
                              ),
                              onChanged: (value){

                              }),
                        )),
                  )))
            ]))));
}
}


class HomePage extends StatefulWidget{
@override
_HomePage createState() => _HomePage();
}

class _HomePage extends State<HomePage> {


Widget build(BuildContext context){
return Scaffold(
  appBar: AppBar(
    title: Text('')
  ),
 );  
}
}

Answer 1

你可以在那里使用简单的开关盒。参考下面的例子来清晰思路。

  import 'package:flutter/material.dart';

  void main() {
    runApp(MaterialApp(
      title: 'Navigation Basics',
      home: FirstScreen(),
    ));
  }

  class FirstScreen extends StatelessWidget {

    String _selectedGender=null;


    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('First Screen'),
        ),
        body: Column(
          children: <Widget>[
            DropdownButton(
              value: _selectedGender,
              items: _dropDownItem(),
              onChanged: (value){
                _selectedGender=value;
                switch(value){
                  case "Male" :
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => SecondScreen()),
                    );
                    break;
                  case "Others" :
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => SecondScreen()),
                    );
                    break;
                  case "Female" :
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => third()),
                    );
                    break;
                }
              },
              hint: Text('Select Gender'),
            ),
          ],
        ),
      );
    }


    List<DropdownMenuItem<String>> _dropDownItem() {
      List<String> ddl = ["Male", "Female", "Others"];
      return ddl.map(
              (value) =>
              DropdownMenuItem(
                value: value,
                child: Text(value),
              )
      ).toList();
    }
  }


  class SecondScreen extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text("Second Screen"),
        ),
        body: Center(
          child: RaisedButton(
            onPressed: () {
              Navigator.pop(context);
            },
            child: Text('Go back!'),
          ),
        ),
      );
    }
  }

  class third extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text("tgird Screen"),
        ),
        body: Center(
          child: RaisedButton(
            onPressed: () {
              Navigator.pop(context);
            },
            child: Text('Go back!'),
          ),
        ),
      );
    }
  }

Answer 2

详情见文档https://flutter.io/cookbook/navigation/navigation-basics/

在导航代码中添加以下行

onChanged: (value){
     Navigator.push(context,MaterialPageRoute(builder: (context) => 
     YourScreenInstance()),);
}

Answer 3

Navigator.popAndPushNamed(context, "/YourScreenInstance");
Navigator.of(context).pushNamed('/NewPage');