如何从 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');