タグ: Navigator

投稿日:

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(),
    });
…
投稿日:

2021/3/14 : Flutter : Navigate with named routesの訳

Navigate with named routes

 

前回のレシピでは、新しいルートを作成してNavigatorにプッシュすることで、新しい画面に移動する方法を学習しました

ただし、アプリの多くの部分で同じ画面に移動する必要がある場合、このアプローチではコードが重複する可能性があります。

解決策は、名前付きルートを定義し、ナビゲーションに名前付きルートを使用することです。

名前付きルートを操作するには、Navigator.pushNamed()メソッドを使用します。

この例では、元のレシピの機能を複製し、次の手順を使用して名前付きルートを使用する方法を示します。

  1. 2つの画面を作成します。
  2. ルートを定義します。
  3. Navigator.pushNamed()を使用してSecondScreenに移動します。
  4. Navigator.pop()を使用してFirstScreenに戻ります。

1. Create two screens

まず、操作する2つの画面を作成します。

最初の画面(FirstScreen)には、2番目の画面に移動するボタンが含まれています。

2番目の画面(ScondScreen)には、最初の画面に戻るためのボタンが含まれています。

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext
…
投稿日:

2021/3/14 : Flutter : Navigate to a new screen and backの訳

Navigate to a new screen and back

 

ほとんどのアプリには、さまざまな種類の情報を表示するためのいくつかの画面が含まれています。たとえば、アプリに商品を表示する画面があるとします。ユーザーが商品の画像をタップすると、新しい画面に商品の詳細が表示されます。

用語:Flutterではスクリーンとページはroutesと呼ばれます。このレシピの残りの部分ではroutesと呼びます。

Androidでは、routeはアクティビティと同等です。iOSでは、routeはViewControllerと同等です。

Flutterでは、ルートは単なるウィジェットです。

このレシピでは、Navigatorを使用して新しいルートに移動します。

次のいくつかのセクションでは、次の手順を使用して2つのルート間を移動する方法を示します。

  1. 2つのルートを作成します。
  2. Navigator.push（）を使用して2番目のルートに移動します。
  3. Navigator.pop（）を使用して最初のルートに戻ります。

1.Create two routes

まず、使用する2つのルートを作成します。

これは基本的な例であるため、各ルートには1つのボタンしか含まれていません。

最初のルートのボタンをタップすると、2番目のルートに移動します。2番目のルートのボタンをタップすると、最初のルートに戻ります。

まずビジュアルの構成をセットアップしましょう。

class FirstRoute extends StatelessWidget {
  @override
  Widget build(
…