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(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Route'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Open route'),
          onPressed: () {
            // Navigate to second route when tapped.
          },
        ),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Navigate back to first route when tapped.
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

 

---

2. Navigate to the second route using Navigator.push()

新しいルートに切り替えるには、このNavigator.push() メソッドを使用します。

このpush()メソッドは、Navigatorによって管理されるルートのスタックにRouteを追加します。

Routeはどうやって作るのですか?

独自に作成することも、MaterialPageRouteを使用することもできます。

これは、プラットフォーム固有のアニメーションを使用して新しいルートに移行するため便利です。

FirstRouteウィジェットのbuild()メソッドの、onPressedコールバックに以下のコードを追加します。

// Within the `FirstRoute` widget
onPressed: () {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondRoute()),
  );
}

 

---

3. Return to the first route using Navigator.pop()

2番目のルート(SecondRoute)を閉じて、最初のルート(FirstRoute)に戻るにはどうすればよいですか？

Navigator.pop()メソッドを使用します。

pop()メソッドは現在のRouteを、Navigatorで管理されているスタックから削除します。

FirstRouteに戻る実装のために、SecondRouteのonPressed()コールバックに以下のコードを追加します。

// Within the SecondRoute widget
onPressed: () {
  Navigator.pop(context);
}

 

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Navigation Basics',
    home: FirstRoute(),
  ));
}

class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Route'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Open route'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondRoute()),
            );
          },
        ),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

参考

https://flutter.dev/docs/cookbook/navigation/navigation-basics