😥

Flutter Web でブラウザのバックボタンを押された時の処理

2021/10/18に公開

Flutter

Web

tech

はじめに

ご覧いただきありがとうございます。ganです。

今回はFlutter web でブラウザバックのボタンが押された時に画面遷移したいときの解決策を書きます。

今回の内容

ブラウザバックボタンが押された時に処理を実行したい。

解決法

build関数のreturnないのWidgetをWillPopWillPopScopeというWidgetで囲みます。

下に具体的な使用方法を書いておきます。

next_page.dart

class NextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: ()  => Navigator.push(context, MaterialPageRoute(builder: (context)  => FirstPage())),
      child: Scaffold(
        appBar: AppBar(),
        body: Container(),
      )
    );
  }
}

first_page.dart

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(),
    );
  }
}

この場合、NextPageでブラウザバックボタンが押されるとFirstPageに画面遷移します。

WillPopScope ウィジェット内のonWillpop を変更することで、バックブラウザボタンが押された時の処理を変えることができます。

まとめ

今回はWillPopScopeというWidgetを使って解決しました。

文章量は少ないですが、これからも少しずつ記事を書いていこうと思います。

参考

GitHubで編集を提案

はじめに

今回の内容

解決法

まとめ

参考

Discussion