2021/3/13 : Flutter : Send data to a new screenの訳

まとめ

Navigator.pushメソッドでページ遷移する場合、第2引数で指定するウィジェットのコンストラクタに渡したいものを渡せば、ページ遷移時の引数渡しができる。

↑でできるのだが、この方法だと遷移先クラス(DetailScreen)内で受け取ったオブジェクトを保持するフィールド(todo)を宣言する必要がある。

それをしたくない場合は、遷移元でNavigator.pushメソッド内で渡したいものを指定して、遷移先ではModalRoute.ofを使って受け取る方法もある。

named routeでの渡し方についてはこちら。

named routeの場合も全体的にはやり方は似ているが、微妙に違うので整理する必要がある。


Send data to a new screen

多くの場合、新しい画面に移動するだけでなく、データを画面に渡したい場合もあります。

たとえば、タップされたアイテムに関する情報を(遷移先ページへ)渡したい場合があります。

思い出してください。:画面は単なるウィジェットです。

この例では、ToDoのリストを作成します。ToDoリストのアイテムをタップすると、ToDoに関する情報を表示する新しい画面(ウィジェット)に移動します。このレシピでは、次の手順を使用します。

  1. todoクラスを定義します。
  2. ToDoのリストを表示します。
  3. ToDoに関する情報を表示できる詳細画面を作成します。
  4. ナビゲートして、詳細画面にデータを渡します。

1. Define a todo class

まず、ToDoを表す簡単な方法が必要です。この例では、タイトル(title)と説明(description)の2つのデータを含むクラスを作成します。

class Todo {
  final String title;
  final String

2021/3/14 : Flutter : Pass arguments to a named routeの訳

まとめ

(A)MaterialAppのroutesプロパティでルートテーブル指定+ModalRoute.ofで受け取る方法。

(B)MaterialAppのonGenerateRouteプロパティでルートテーブル指定+onGenerateRouteコールバック内で受け取り遷移先ウィジェットに渡す方法。

 

(1)遷移元からページ遷移するコード

=>(A)も(B)も全く同じ。

Navigator.pushNamed

メソッドを使う。

Navigator.pushNamed(
  context,
  ExtractArgumentsScreen.routeName,
  arguments: ScreenArguments(
    'Extract Arguments Screen',
    'This message is extracted in the build method.',
  ),
);

(2)ルートテーブルの指定方法

=>(A) : MaterialAppのroutesプロパティで指定する。(受け取るのは遷移先ウィジェット内)

return MaterialApp(
    //...
    routes: {
      ExtractArgumentsScreen.routeName: (context) =>
          ExtractArgumentsScreen(),
    });