atabata site

Navigation in flutter

  • Navigator widgetのpushやpopを使って、各PFごとに適した画面遷移を行う
onPressed: () {
  Navigator.of(context).push( // ここ
    MaterialPageRoute(
      builder: (context) => const SongScreen(song: song),
    ),
  );
},
child: Text(song.name),
  • NavigatorはRoute objのstackを保持しているので、pushはRoute objを引数として受ける
  • MaterialPageRouteはMaterial Designでの画面遷移アニメーションを定義したobj

named routes

  • おすすめではないらしい
  • deeplinkを簡単に操作できるが以下の制限がある
    • 振る舞いがいつも同じで変更できない…新しいdeeplinkがきたら、ユーザがどのページにいようとNavigatorのstackにpushする
    • ブラウザの進むボタンに対応していない

Router

  • webアプリなどでroutingが必要な場合に使える(go_routerなど)

RouterとNavigatorの併用

  • go_routerを通してNavigatorを呼び出したりできる

実際にやってみる

  • ↑の内容がよくわからなかったので以下の要件で動作するようにNavigatorなど使って実装してみる
    • 初期ページはなんらかのリスト
    • タップするとそのitemの詳細画面に遷移
    • その詳細画面には編集画面をsheetで表示できるボタンがある
    • ↑でitemの内容を更新できるが、更新後ページが一覧に遷移しないこと

書いてみた

https://github.com/atsu0127/flutter_navigation_sample

書いてみたメモ

  • 全体的にStatefulWidgetになる
    • ProjectList…projectが更新されるため
    • ProjectDetail…projectが更新されるため
    • ProjectEdit…ユーザの入力を受付ないといけないため
  • 大事なのは以下
    • Navigator.pushで次の画面にいく、返り値はpopで渡された値
    • Navigator.popの第2引数で戻す値を指定できる
    • AppBarの戻るボタンの挙動上書きはWillPopScopeでやる
    • TextFieldの挙動はTextFieldControllerで定義(ちゃんとドキュメント読もう)
  • とはいえ、状態をバケツリレーするの怠いのでこの方法は無しだと思う
  • もうちょっと進んで、状態管理の話とかやったら他の方法で実装してみたい