Εργασία με WillPopScope Widget - FlutterAnt

Μπορούμε να παρατηρήσουμε ότι μερικές εφαρμογές έχουν μια λειτουργία όπου, εάν χρησιμοποιήσουμε το κουμπί πίσω για έξοδο από την εφαρμογή, εμφανίζεται ένα μήνυμα με το κείμενο „Παρακαλώ κάντε κλικ στο BACK ξανά για έξοδο“. Αυτή η δυνατότητα μπορεί να επιτευχθεί ελέγχοντας το κουμπί πίσω. Στο flutter, έχουμε ένα widget που ονομάζεται WillPopScope που μας επιτρέπει να ελέγχουμε την πλοήγηση με το κουμπί πίσω. Σε αυτό το άρθρο, θα εργαστούμε στο WillPopScope Widget.

Κατασκευαστής WillPopScope:

const WillPopScope({
    Key? key,
    required this.child,
    required this.onWillPop,
  })

Το WillPopScope περιέχει τρεις παραμέτρους: κλειδί, παιδί και onWillpop, όπως φαίνεται στον παραπάνω κώδικα.

Κλειδί: Ένα κλειδί Widget είναι ένα αναγνωριστικό του widget.

αυτό.παιδί: Αυτή είναι μια υποχρεωτική ιδιοκτησία. πρέπει να αναφέρουμε το παιδί που αντιπροσωπεύει το γραφικό στοιχείο οθόνης στο οποίο μπορεί να ελεγχθεί η συμπεριφορά του κουμπιού επιστροφής.

this.onWillPop: Το onWillPop είναι μια μέθοδος επανάκλησης που επιστρέφει μια τιμή Future. Εάν ισχύει, η οθόνη μπορεί να εμφανιστεί. Εάν είναι false, η οθόνη δεν θα εμφανιστεί. Ωστόσο, η οθόνη μπορεί ακόμα να εμφανιστεί καλώντας το Navigator.pop(context).

Απενεργοποίηση της Πίσω πλοήγησης

Όπως συζητήσαμε παραπάνω, μπορούμε να το απενεργοποιήσουμε δίνοντας την ψευδή τιμή ως επιστρεφόμενη τιμή στη μέθοδο onWillPop.

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

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      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("WillPopScope Demo"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context)
                .push(MaterialPageRoute(builder: (context) => SecondScreen()));
          },
          child: const Text("Go to Next screen"),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        return false;
      },
      child: Scaffold(
        appBar: AppBar(
          title: const Text("Second screen"),
        ),
        body: Container(
          child: const Center(
            child: Text("Second Screen"),
          ),
        ),
      ),
    );
  }
}

Έχουμε δύο οθόνες αν δούμε τον παραπάνω κώδικα. Το κουμπί „Μετάβαση στην επόμενη οθόνη“ μπορεί να χρησιμοποιηθεί για πλοήγηση στη δεύτερη οθόνη. Τύλιξα τη δεύτερη οθόνη σε ένα γραφικό στοιχείο WillPopScope και έβαλα την τιμή που επιστράφηκε στο WillPop σε false. Ως αποτέλεσμα, η δεύτερη οθόνη δεν μπορεί να αναδυθεί πατώντας το κουμπί πίσω.

Η οθόνη μπορεί ακόμα να εμφανιστεί καλώντας το Navigator.pop(context). Παρόλο που η τιμή επιστροφής της μεθόδου onWillPop είναι ψευδής

WillPopScope(
      onWillPop: () async {
        Navigator.pop(context);
        return false;
      },
      child: Scaffold(
        appBar: AppBar(
          title: const Text("Second screen"),
        ),
        body: Container(
          child: const Center(
            child: Text("Second Screen"),
          ),
        ),
      ),
    );

Εφαρμόστε μια λειτουργία που ζητά από τον χρήστη να „Πατήσει ξανά το κουμπί πίσω για να υπάρχει η εφαρμογή“

Μερικές φορές ο χρήστης κάνει απροσδόκητα κλικ στο κουμπί πίσω, όπου η εφαρμογή μπορεί να υπάρχει ως αποτέλεσμα, αλλά η πραγματική πρόθεση του χρήστη δεν είναι να κλείσει την εφαρμογή. Για να κλείσετε την εφαρμογή, θέλουμε να κάνουμε ένα δεύτερο κλικ για το κουμπί πίσω. Θα υπολογίσουμε το χρονικό διάστημα μεταξύ δύο κλικ και αν είναι λιγότερο από 2 δευτερόλεπτα, μπορούμε να υποθέσουμε ότι ο χρήστης θέλει να κλείσει την εφαρμογή, επομένως θα το κλείσουμε περνώντας το true ως την τιμή επιστροφής στη μέθοδο onWillPop και εάν είναι περισσότερο από 2 δευτερόλεπτα, θα διατηρήσουμε την τιμή επιστροφής ψευδούς. και στέλνει το μήνυμα στον χρήστη ως „Πατήστε ξανά το κουμπί επιστροφής για έξοδο από την εφαρμογή“ χρησιμοποιώντας το γραφικό στοιχείο Toast ή σνακ μπαρ.

Ο πλήρης πηγαίος κώδικας παρέχεται παρακάτω για να αποκτήσετε την απαιτούμενη λειτουργικότητα.

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

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    DateTime _lastExitTime = DateTime.now();
    return WillPopScope(
      onWillPop: () async {
        if (DateTime.now().difference(_lastExitTime) >= Duration(seconds: 2)) {
          //showing message to user
          final snack =  SnackBar(
            content:  Text("Press the back button again to exist the app"),
            duration: Duration(seconds: 2),
          );
          ScaffoldMessenger.of(context).showSnackBar(snack);
          _lastExitTime = DateTime.now();
          return false; // disable back press
        } else {
          return true; //  exit the app
        }
      },
      child: Scaffold(
        appBar: AppBar(
          title: const Text("WillPopScope Demo"),
        ),
        body: Center(
          child: Text("FlutterAnt.com"),
        ),
      ),
    );
  }
}

Θα λάβουμε την ακόλουθη έξοδο αφού εκτελέσουμε τον παραπάνω κώδικα.