記事の内容
この記事では、アプリで複数の画面を移動する方法を紹介します。
具体的には、「routes」「Navigator」を使います。
画面遷移をする方法
Routeを定義する時には、「initialRoute」「routes」を設定します。
遷移する時には、「Navigator.push」や「Navigator.pushNamed」を使います。
戻る時には、「Navigator.pop」を使います。
指定した先まで戻る時には、「Navigator.popUntil」を使います。
複雑なRoutes設定とpushNamed
Routeが複雑な時は、このように整理してRouteを定義することができます。
その時は、遷移する時に「pushNamed」を使います。
シンプルな画面遷移に使うMaterialPageRoute
シンプルな画面遷移の場合は、直接、クラス名を指定して遷移してもOKです。
「MaterialPageRoute」を使います
元の画面に戻る時はpop
元の画面に戻る時は、「pop」や「popUntil」を使います。
元の画面に戻る時にpopを使いながら、値を渡す
popの第２引数に値を渡します。
遷移元
var weatherData =
await weather.getCityWeather(typedName);
await weather.getCityWeather(typedName);
遷移先から戻る時に押すボタン。
このcityNameが、上のweatherDataに入ってきます。
FlatButton(
onPressed: () {
Navigator.pop(context, cityName);
},
child: Text(
'Get Weather',
style: kButtonTextStyle,
),
),
onPressed: () {
Navigator.pop(context, cityName);
},
child: Text(
'Get Weather',
style: kButtonTextStyle,
),
),
画面遷移時に値を渡す方法（StatelessWidget）
画面遷移時に値を渡したいことがあると思います。
その時は、遷移先のクラスのコンストラクタに値をセットしましょう。
遷移先のページ
遷移元のページ
BottomButtonの中で、「ResultsPage」に渡したい値をセットしています。
画面遷移時に値を渡す方法（StatefulWidget）
画面遷移時に値を渡したいことがあると思います。
その時は、遷移先のクラスのコンストラクタに値をセットしましょう。
遷移元では、MaterialPageRouteを使ってこのように指定します。
Navigator.push(context, MaterialPageRoute(builder: (context) {
return LocationScreen(
locationWeather: weatherData,
);
}));
return LocationScreen(
locationWeather: weatherData,
);
}));
遷移先では、コンストラクタに値を指定した上で、widgetから値を取得します。
class LocationScreen extends StatefulWidget {
LocationScreen({this.locationWeather});
final locationWeather;
@override
_LocationScreenState createState() => _LocationScreenState();
}
LocationScreen({this.locationWeather});
final locationWeather;
@override
_LocationScreenState createState() => _LocationScreenState();
}
@override
void initState() {
super.initState();
_updateUI(widget.locationWeather);
}
void initState() {
super.initState();
_updateUI(widget.locationWeather);
}
