Flutter

【Flutter】Navigatorを使い、ページ遷移の履歴を削除する

作成日：2022年03月15日

更新日：2022年03月15日

Flutter でページ遷移すると、左上に『＜』が表示され、前のページに戻れるようになっています。

これは、他ページに移動しているというより、ページの上にページが積み重なっているからです。

ページによっては、ページ遷移の履歴を無くしたい場合があります。

その場合は、NavigatorのpushNamedAndRemoveUntilを使用します。

MyHomePage、MySecondPage、MyThirdPage を作成します。

dart
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Page Route',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      routes: {
        "/home": (context) => const MyHomePage(),
        "/second": (context) => const MySecondPage(),
        "/third": (context) => const MyThirdPage(),
      },
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("First Page"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(context, CupertinoPageRoute(builder: (context) {
              return const MySecondPage();
            }));
          },
          child: const Text("to Second Page"),
        ),
      ),
    );
  }
}

class MySecondPage extends StatelessWidget {
  const MySecondPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("Second Page"),
        ),
        body: Container(
          color: Colors.lightGreenAccent,
          child: Center(
            child: ElevatedButton(
              onPressed: () {}
              child: const Text("to Third Page"),
            ),
          ),
        ));
  }
}

class MyThirdPage extends StatelessWidget {
  const MyThirdPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("Third Page"),
        ),
        body: Container(
          color: Colors.red,
          child: Center(
            child: ElevatedButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: const Text("to Back"),
            ),
          ),
        ));
  }
}

MyThirdPage へ遷移する時、ページ遷移の履歴を削除し、左上の『＜』を表示させなくします。

MySecondPageクラスのElevatedButtonにあるonPressedにNavigatorのpushNamedAndRemoveUntilを設定しましょう。

pushNamedAndRemoveUntilの第一引数は、遷移先である『/third』、第二引数をModalRoute.withNameで最初の画面である『/home』を指定します。

dart
onPressed: () {
  Navigator.of(context).pushNamedAndRemoveUntil(
      "/third", ModalRoute.withName("/home"));
},

では、確認してみましょう。

『to Third Page』をクリックすると、

『Third Page』へ遷移し、左上の『＜』を削除することができました。

試しに、『to Back』をクリックすると、

画面が真っ暗になりました。

これは、MaterialAppにinitialRouteを設定していないためです。

MaterialAppにinitialRouteを設定しましょう。

dart
return MaterialApp(
  title: 'Page Route',
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  initialRoute: "/home",
  routes: {
    "/home": (context) => const MyHomePage(),
    "/second": (context) => const MySecondPage(),
    "/third": (context) => const MyThirdPage(),
  },
  home: const MyHomePage(),
);