【Flutter】AppBarの戻るボタンを非表示にする

2022年12月23日

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

今回は画面遷移する際にAppBarに自動生成される戻るボタンを非表示にする方法を紹介します。

AppBarの戻るボタンを非表示にする方法

戻るボタンを非表示にするにはautomaticallyImplyLeadingをfalseにするだけです。

これで画面遷移後の戻るボタンが生成されなくなります。

AppBar(
  title: Text('スクリーン2'),
  automaticallyImplyLeading: false,
),

前画面に戻るにはNavigator.popを使用し上記コードのように書きます。

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(home: FirstRoute()),
    );

class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('スクリーン1'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('スクリーン2'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => SecondRoute(),
              ),
            );
          },
        ),
      ),
    );
  }
}

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

以上です。