FlutterでWebアプリを作ってみたときに調べたときの備忘録。
画面遷移まわりをまとめてみた。
ルーティングは、こんな感じででAppに設定する。
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(primarySwatch: Colors.blue),
// デフォルトのルーティング
initialRoute: '/',
// ルーティングの一覧を設定
routes: {
'/': (context) => TopPage(title: "TopPage"),
'/second': (context) => SecondPage(title: "SecondPage"),
},
);
}
}
Navigator.pushNamedを使うと、パスで遷移できる
// Within the `FirstScreen` widget
onPressed: () {
// Navigate to the second screen using a named route.
Navigator.pushNamed(context, '/second');
}
戻るときは、popでできる。
// Within the SecondScreen widget
onPressed: () {
// Navigate back to the first screen by popping the current route off the stack.
Navigator.pop(context);
}
オブジェクトで渡すことができるよう。
まずは、引数のクラスを作成。
class ScreenArguments {
final String title;
final String message;
ScreenArguments(this.title, this.message);
}
引数を受け取るクラスはこんな感じ。
ModalRoute.of(context).settings.arguments;
で取得する。
class ExtractArgumentsScreen extends StatelessWidget {
static const routeName = '/extractArguments';
@override
Widget build(BuildContext context) {
// 引数の受け取り
final ScreenArguments args = ModalRoute.of(context).settings.arguments;
return Scaffold(/* 略 */);
}
}
引数ありで画面を呼び出すのはこんな感じ。
onPressed: () {
// argumentsに渡したい引数オブジェクトを設定する
Navigator.pushNamed(
context,
ExtractArgumentsScreen.routeName,
arguments: ScreenArguments(
'Extract Arguments Screen',
'This message is extracted in the build method.',
),
);
},
画面遷移のヒストリを操作する処理はいろいろある。
一気に戻ったり、置き換えたりするときに使うことがある。
画面遷移するときは、こんな感じだけど、
Navigator.pushNamed(
context,
'/second',
arguments=ScreenArguments("title", "message"),
);
MaterialApp
を使ってる場合はMaterialPageRoute
を使ってこんな感じになってる。
Navigator.push(
context,
MaterialPageRoute(
settings: RouteSettings(
name: '/second',
arguments: ScreenArguments("title", "message"),
),
builder: (context) => SecondPage(),
),
);
画面遷移だけ、iOSっぽくしたい場合は、CupertinoPageRoute
に変えればOK
Navigator.push(
context,
CupertinoPageRoute(
settings: RouteSettings(
name: '/second',
arguments: ScreenArguments("title", "message"),
),
builder: (context) => SecondPage(),
),
);
このPageRouteをカスタマイズすれば、画面遷移のアニメーションを変えられる。
PageRouteBuilder
を継承すると作成できるらしい。
この記事で紹介されているスライドで遷移する例はこんな感じ。
class SlidePageRoute extends PageRouteBuilder {
final Widget page;
final RouteSettings settings;
SlidePageRoute({this.page, this.settings})
: super(
pageBuilder: (
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
) {
return page;
},
transitionsBuilder: (
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
Widget page,
) {
return SlideTransition(
position: Tween<Offset>(
begin: const Offset(1, 0),
end: Offset.zero,
).animate(animation),
child: page,
);
},
);
}
呼び出すときはこんな感じに。builder
からpage
に変わるので注意。
Navigator.push(
context,
SlidePageRoute(
page: SecondPage()
settings: RouteSettings(
name: '/second',
arguments: ScreenArguments("title", "message"),
),
),
);
以下のサイトにいろんなアニメーション/トランジションの例があるので、
参考にPageRouteBuilderを作っていけば、いろいろできる。
以上!!
積読用の読書管理アプリ 『積読ハウマッチ』をリリースしました!
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!
もしよかったら、遊んでみてくださいヽ(=´▽`=)ノ
要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで♪
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント