Flutterでコンテキストなしでナビゲーションする方法

Flutterでは、通常、ナビゲーション操作にコンテキストが必要です。しかし、コンテキストなしでナビゲーションを行う方法もあります。以下に、コンテキストなしでナビゲーションを行うためのシンプルで簡単な方法といくつかのコード例を紹介します。

ナビゲーターキーを使用する方法: ナビゲーションを行う際に、Navigatorキーを使用することで、コンテキストを取得せずにナビゲーションを実行できます。以下は、Navigatorキーを使用して新しいページに遷移する例です。

final navigatorKey = GlobalKey<NavigatorState>();
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: navigatorKey,
      home: HomePage(),
    );
  }
}
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Details'),
          onPressed: () {
            navigatorKey.currentState!.push(
              MaterialPageRoute(
                builder: (context) => DetailsPage(),
              ),
            );
          },
        ),
      ),
    );
  }
}
class DetailsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Details'),
      ),
      body: Center(
        child: Text('This is the details page.'),
      ),
    );
  }
}

上記の例では、navigatorKeyを使用してDetailsPageに遷移しています。

名前付きルートを使用する方法: 名前付きルートを使用することで、コンテキストなしでページ間のナビゲーションを行うことができます。以下は、名前付きルートを使用して新しいページに遷移する例です。

void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (context) => HomePage(),
        '/details': (context) => DetailsPage(),
      },
    );
  }
}
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Details'),
          onPressed: () {
            Navigator.pushNamed(context, '/details');
          },
        ),
      ),
    );
  }
}
class DetailsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Details'),
      ),
      body: Center(
        child: Text('This is the details page.'),
      ),
    );
  }
}

上記の例では、initialRouteで初期ルートを指定し、routesで名前付きルートを定義しています。HomePageからDetailsPageに遷移する際には、Navigator.pushNamedメソッドを使用します。

これらの方法を使用することで、コンテキストなしでFlutterアプリ内でのナビゲーションを実現することができます。この記事では、コンテキストなしでのナビゲーションの手法といくつかの具体的なコード例を紹介しました。