[Flutter] Navigatorって何？

Flutterは、iOS、Android、Web、デスクトップなどのプラットフォームで動作するクロスプラットフォーム開発ツールキットです。Flutterには、多くのウィジェットとAPIがあり、それらを使用してアプリケーションを作成することができます。その中でも、Navigatorは、Flutterで画面遷移を実現するための強力なAPIの一つです。この記事では、FlutterのNavigatorの使い方について解説します。

Navigatorとは

FlutterのNavigatorは、画面遷移を管理するためのAPIです。Navigatorは、スタックのような仕組みで、異なるページを管理します。Navigatorは、アプリケーション内で異なるページ間の移動を可能にし、Flutterアプリケーションの基本的なナビゲーションフレームワークを提供します。

Navigatorは、スタックにプッシュすることにより、新しいページを表示します。また、スタックからポップすることにより、古いページに戻ることができます。Navigatorは、複数のルートをサポートし、ルートの間でのスムーズな遷移を提供します。

Navigatorの使い方

Navigatorを使用するためには、次の手順が必要です。

1. MaterialAppウィジェット内で、初期ルートとなるウィジェットを指定します。
2. 遷移先のウィジェットを定義します。
3. ナビゲーションを実行するためのトリガー（例：ボタン）を設定します。
4. Navigatorを使用して、遷移先のウィジェットに移動します。

以下に、上記手順を実行するサンプルコードを示します。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Navigator',
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/detail': (context) => DetailScreen(),
      },
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/detail');
          },
          child: Text('Go to Detail Screen'),
        ),
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Detail Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back to Home Screen'),
        ),
      ),
    );
  }
}

このサンプルコードでは、Navigatorを使用してホーム画面と詳細画面を作成しています。ホーム画面には、”Go to Detail Screen”というテキストが書かれたボタンがあります。このボタンを押すと、Navigator.pushNamed()メソッドが呼び出され、詳細画面に遷移します。同様に、詳細画面には、”Go back to Home Screen”というテキストが書かれたボタンがあります。このボタンを押すと、Navigator.pop()メソッドが呼び出され、ホーム画面に戻ります。

上記のコードでは、initialRouteを使用して、最初に表示されるページを指定しています。routesプロパティを使用して、アプリケーションで使用するページのリストを定義します。この例では、’/’と’/detail’の2つのルートが定義されています。

また、Navigator.pushNamed()メソッドを使用して、名前付きルートを使用して詳細画面に遷移しています。Navigator.pop()メソッドを使用して、ユーザーが詳細画面から戻ることができます。

まとめ

以上のように、FlutterのNavigatorは、アプリケーション内で異なるページ間の移動を容易にするAPIです。Navigatorを使用することにより、アプリケーションのナビゲーションフレームワークを簡単に実装できます。是非、FlutterのNavigatorを活用して、使いやすいアプリケーションを作成してみてください。