【Flutter】Navigator.pushNamed｜2つ以上のスクリーンで画面遷移

2022年12月23日

こんにちは、フラメルです。

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

下準備

今回は下記コードのFirstScreenとSecondScreenで画面遷移させるコードを書いていきます。

import 'package:flutter/material.dart';

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('スクリーン1'),
        automaticallyImplyLeading: false,
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('スクリーン2'),
          onPressed: () {},
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('スクリーン2'),
        automaticallyImplyLeading: false,
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('スクリーン1'),
          onPressed: () {},
        ),
      ),
    );
  }
}

ステップ１：ルートを定める

MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => FirstScreen(),
    '/second': (context) => SecondScreen(),
  },
),

MaterialAppのroutesで上記コードのように画面遷移させるスクリーンのルートを定めます。

routesで定めたスクリーンで初めに表示させたいスクリーンのキーをinitialRouteに渡します。今回の場合FirstScreenが初期画面になります。

ステップ２：画面遷移させる

ElevatedButton(
  child: Text('スクリーン2'),
  onPressed: () {
    Navigator.pushNamed(context, '/second');
  },
),

任意のスクリーンに画面遷移させるにはNavigator.pushNamedを使用します。

上記コードでは先ほどroutesで定めたルート/secondに画面遷移します。

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(
        initialRoute: '/',
        routes: {
          '/': (context) => FirstScreen(),
          '/second': (context) => SecondScreen(),
        },
      ),
    );

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('スクリーン1'),
        automaticallyImplyLeading: false,
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('スクリーン2'),
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('スクリーン2'),
        automaticallyImplyLeading: false,
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('スクリーン1'),
          onPressed: () {
            Navigator.pushNamed(context, '/');
          },
        ),
      ),
    );
  }
}

以上です。

参考リンク

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