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(