【Flutter】Navigatorで画面遷移|名前付きルート(Named Routes)

今回はNavigatorを使って2つ以上のスクリーン間を画面遷移する方法を紹介します。

手順としてはMaterialAppでアプリで使用するスクリーンとイニシャルルートを指定し、Navigator.pushNamedメソッドを使って画面遷移します。

\ 世界最大級のオンライン学習サービス /

目次

事前準備|画面遷移するスクリーンを作成

今回はmain.dartScreen1Screen2の2つのWidgetを作り画面遷移していきます。

下コードのonPressedで画面遷移を実装します。

//スクリーン1
class Screen1 extends StatelessWidget {
  const Screen1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Screen1'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Screen2'),
          onPressed: () {},
        ),
      ),
    );
  }
}

//スクリーン2
class Screen2 extends StatelessWidget {
  const Screen2({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Screen2'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {},
          child: const Text('Screen1'),
        ),
      ),
    );
  }
}

別ファイルでスクリーンを作成しインポートしてもOKです。

MaterialAppでスクリーンのルートを指定

MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => const Screen1(),
    '/second': (context) => const Screen2(),
  },
),

routesでアプリで使用するスクリーンのルートを決め、initialRouteでアプリを起動した時に表示される最初のスクリーン画面を指定します。

Navigator.pushNamedで画面遷移

//Screen1からScreen2に画面遷移
onPressed: () {
  Navigator.pushNamed(context, '/second');
},

//Screen2からScreen1に画面遷移
onPressed: () {
  Navigator.pushNamed(context, '/');
},

上記コードのようにNavigator.pushNamedの第二引数で、先ほど決めた画面遷移するスクリーンのルートを渡します。

3つ以上のスクリーンでも同様

スクリーンの数が増えても同様です。

サンプルコード

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (context) => const Screen1(),
        '/second': (context) => const Screen2(),
      },
    ),
  );
}

//スクリーン1
class Screen1 extends StatelessWidget {
  const Screen1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Screen1'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Screen2'),
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
        ),
      ),
    );
  }
}

//スクリーン2
class Screen2 extends StatelessWidget {
  const Screen2({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Screen2'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/');
          },
          child: const Text('Screen1'),
        ),
      ),
    );
  }
}

一緒に読みたい

参考

  • URLをコピーしました!
目次