Flutter で一つ前の画面に戻る機能を作成します。

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

MyThirdPage で戻るボタンを作成し、MySecondPage へ遷移します。

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: () {
                Navigator.push(context, CupertinoPageRoute(builder: (context) {
                  return const MyThirdPage();
                }));
              },
              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: () {},
              child: const Text("to Back"),
            ),
          ),
        ));
  }
}

MyThirdPage のElevatedButton内にあるonPressNavigatorを設定します。

Navigator に、pop を指定します。

child: ElevatedButton(
  onPressed: () {
    Navigator.of(context).pop();
  },
  child: const Text("to Back"),
),

では、動作確認してみます。

image2

『to Third Page』ボタンをタップすると、

image3

Third Page へ遷移しました。

『to Back』をタップしてみましょう。

image4

前のページ遷移しました。

試しに左上の『<』をタップすると、

image5

一つ前の Third Page ではなく、Second Page の前のページである First Page へ遷移しました。

ブログ一覧