จะปิดใช้งานหรือแทนที่ปุ่ม "ย้อนกลับ" ของ Android ใน Flutter ได้อย่างไร

มีวิธีปิดใช้งานปุ่มย้อนกลับของ Android เมื่ออยู่ในหน้าใดหน้าหนึ่งหรือไม่?

class WakeUpApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "Time To Wake Up ?",
      home: new WakeUpHome(),
      routes: <String, WidgetBuilder>{
        '/pageOne': (BuildContext context) => new pageOne(),
        '/pageTwo': (BuildContext context) => new pageTwo(),
      },
    );
  }
}

ในหน้าหนึ่งฉันมีปุ่มเพื่อไปที่ pageTwo:

new FloatingActionButton(
  onPressed: () {    
    Navigator.of(context).pushNamed('/pageTwo');
  },
)

ปัญหาของฉันคือถ้าฉันกดลูกศรย้อนกลับที่ด้านล่างของหน้าจอ Android ฉันจะกลับไปที่ pageOne ฉันต้องการให้ปุ่มนี้ไม่ปรากฏขึ้นเลย ตามหลักการแล้วฉันไม่ต้องการให้ออกจากหน้าจอนี้เว้นแต่ผู้ใช้จะกดนิ้วค้างไว้บนหน้าจอเป็นเวลา 5 วินาที (ฉันกำลังพยายามเขียนแอพสำหรับเด็กเล็กและต้องการให้เฉพาะผู้ปกครองเท่านั้นที่สามารถออกจากหน้าจอนั้นได้)

คำตอบคือWillPopScope. มันจะป้องกันไม่ให้เพจถูกระบบ คุณจะยังใช้งานได้Navigator.of(context).pop()

@override
Widget build(BuildContext context) {
  return new WillPopScope(
    onWillPop: () async => false,
    child: new Scaffold(
      appBar: new AppBar(
        title: new Text("data"),
        leading: new IconButton(
          icon: new Icon(Icons.ac_unit),
          onPressed: () => Navigator.of(context).pop(),
        ),
      ),
    ),
  );
}

ตามที่Rémi Rousselet ชี้ให้เห็นWillPopScopeมักจะเป็นหนทางที่จะไป อย่างไรก็ตามหากคุณกำลังพัฒนาวิดเจ็ตที่มีสถานะซึ่งควรตอบสนองต่อปุ่มย้อนกลับโดยตรงคุณสามารถใช้สิ่งนี้:

https://pub.dartlang.org/packages/back_button_interceptor

หมายเหตุ: ฉันเป็นผู้เขียนแพ็คเกจนี้

แม้ว่าคำตอบของ Remi จะถูกต้อง แต่โดยปกติแล้วคุณไม่ต้องการเพียงแค่ปิดกั้นปุ่มย้อนกลับ แต่ต้องการให้ผู้ใช้ยืนยันการออก

คุณสามารถทำได้ในลักษณะเดียวกันโดยรับคำตอบจากกล่องโต้ตอบการยืนยันเพราะonWillPopเป็นอนาคต

@override
Widget build(BuildContext context) {
  return WillPopScope(
    child: Scaffold(...),
    onWillPop: () => showDialog<bool>(
      context: context,
      builder: (c) => AlertDialog(
        title: Text('Warning'),
        content: Text('Do you really want to exit'),
        actions: [
          FlatButton(
            child: Text('Yes'),
            onPressed: () => Navigator.pop(c, true),
          ),
          FlatButton(
            child: Text('No'),
            onPressed: () => Navigator.pop(c, false),
          ),
        ],
      ),
    ),
  );
}

ฉันโพสต์สิ่งนี้ไว้ที่นี่เผื่อมีใครพบสิ่งนี้และหวังว่าพวกเขาจะพบตัวอย่างง่ายๆ https://gist.github.com/b-cancel/0ca372017a25f0c120b14dfca3591aa5

import 'package:flutter/material.dart';

import 'dart:async';

void main() => runApp(new BackButtonOverrideDemoWidget());

class BackButtonOverrideDemoWidget extends StatefulWidget{
  @override
  _BackButtonOverrideDemoWidgetState createState() => new _BackButtonOverrideDemoWidgetState();
}

class _BackButtonOverrideDemoWidgetState extends State<BackButtonOverrideDemoWidget> with WidgetsBindingObserver{

  //-------------------------Test Variable

  bool isBackButtonActivated = false;

  //-------------------------Required For WidgetsBindingObserver

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  //-------------------------Function That Triggers when you hit the back key

  @override
  didPopRoute(){
    bool override;
    if(isBackButtonActivated)
      override = false;
    else
      override = true;
    return new Future<bool>.value(override);
  }

  //-------------------------Build Method

  @override
  Widget build(BuildContext context) {
    return new Directionality(
      textDirection: TextDirection.ltr,
      child: new Container(
          color: (isBackButtonActivated) ? Colors.green : Colors.red,
          child: new Center(
              child: new FlatButton(
                color: Colors.white,
                onPressed: () {
                  isBackButtonActivated = !isBackButtonActivated;
                  setState(() {});
                },
                child: (isBackButtonActivated) ?
                new Text("DeActive the Back Button") : new Text("Activate the Back Button"),
              )
          )
      ),
    );
  }
}

คุณสามารถใช้Future.value(bool)เพื่อจัดการปุ่มย้อนกลับ

bool _allow = true;

@override
Widget build(BuildContext context) {
  return WillPopScope(
    child: Scaffold(appBar: AppBar(title: Text("Back"))),
    onWillPop: () {
      return Future.value(_allow); // if true allow back else block it
    },
  );
}

ฉันใช้วิดเจ็ต mixin และ WillPopScope ไม่สามารถทำงานให้ฉันได้ นี่เป็นแนวทางที่ดีที่สุดที่ฉันพบดีกว่า WillPopScope ในความคิดของฉัน
final bool canPop = ModalRoute.of(context)?.canPop ?? false;
ใช้มันเช่นนี้ภายใน appbar:

leading: ModalRoute.of(context)?.canPop ?? false
    ? IconButton(
        onPressed: () {
          Navigator.pop(context);
        },
        icon: (Platform.isAndroid)
            ? const Icon(Icons.arrow_back)
            : const Icon(Icons.arrow_back_ios),
      )
    : Container(),

คำตอบบางทีคุณอาจรู้ว่าใช้WillPopScopeแต่น่าเสียดายที่บนIOSคุณไม่สามารถปัดเพื่อย้อนกลับไปยังหน้าก่อนหน้าได้ดังนั้นเรามากำหนด MaterialPageRoute ของคุณเอง:

class CustomMaterialPageRoute<T> extends MaterialPageRoute<T> {
  @protected
  bool get hasScopedWillPopCallback {
    return false;
  }
  CustomMaterialPageRoute({
    @required WidgetBuilder builder,
    RouteSettings settings,
    bool maintainState = true,
    bool fullscreenDialog = false,
  }) : super( 
          builder: builder,
          settings: settings,
          maintainState: maintainState,
          fullscreenDialog: fullscreenDialog,
        );
}

ตอนนี้คุณสามารถใช้ WillPopScope แล้วปัดไปด้านหลังจะทำงานบน IOS คำตอบรายละเอียดอยู่ที่นี่: https://github.com/flutter/flutter/issues/14203#issuecomment-540663717

เพียงเพิ่มคอนเทนเนอร์ที่ด้านบนของ Appbar ซึ่งซ่อนปุ่มย้อนกลับ

AppBar(
        title: new Text('Page Title'),
        leading: new Container(),
      ),