Using PopScope Flutter Android doesn't work, instead goes back without any confirmation time - Stack Overflow

admin管理员组

文章数量:1323912

When using PopScope to handle any predictive back animation(as in the official documentation), I don't receive any confirmation time for going back and instead, the app just goes back without waiting for the user to again click back.

Here is my main screen(settings_screen.dart):

import 'package:flutter/material.dart';
import 'package:weatherfast/about_screen.dart';
import 'package:weatherfast/help_screen.dart';

class SettingsScreen extends StatelessWidget {
  const SettingsScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Icon(Icons.settings, size: 50, color: Colors.blue),
          const SizedBox(height: 10),
          const Text(
            'Settings',
            style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
          ),
          const SizedBox(height: 20),
          ListView(
            shrinkWrap: true,
            children: [
              ListTile(
                leading: const Icon(Icons.info_rounded),
                title: const Text('About App'),
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (_) => AboutScreen()),
                  );
                },
              ),
              ListTile(
                leading: const Icon(Icons.question_answer_rounded),
                title: const Text('Help and Feedback'),
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (_) => const HelpScreen()),
                  );
                },
              ),
            ],
          ),
        ],
      ),
    );
  }
}

And here is the screen I am trying to navigate to and back from(help_screen.dart):

import 'package:flutter/material.dart';
import 'webview_screen.dart'; // Import your WebViewScreen here

class HelpScreen extends StatelessWidget {
  const HelpScreen({super.key});

  @override
  Widget build(BuildContext context) {
    // Define URLs for Feature Request and Bug Report
    const featureRequestUrl = '/yWgLvBr2vMagmFbQ8';
    const bugReportUrl = '/vmdA2oyWtLtDu8jA8';

    // List items for the screen
    final List<Map<String, String>> items = [
      {'title': 'Feature Request', 'url': featureRequestUrl},
      {'title': 'Bug Report', 'url': bugReportUrl},
    ];

    return PopScope(
      canPop: true,
      child: Scaffold(
        appBar: AppBar(title: const Text('Help and Feedback')),
        body: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            final item = items[index];
            return ListTile(
              title: Text(item['title']!),
              trailing: const Icon(Icons.arrow_forward),
              onTap: () {
                // Navigate to WebViewScreen with the selected URL
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => WebViewScreen(url: item['url']!),
                  ),
                );
              },
            );
          },
        ),
      ),
    );
  }
}

Device I am testing on: Samsung S24 FE running Android 14.

Help would be greatly appreciated.

When using PopScope to handle any predictive back animation(as in the official documentation), I don't receive any confirmation time for going back and instead, the app just goes back without waiting for the user to again click back.

Here is my main screen(settings_screen.dart):

import 'package:flutter/material.dart';
import 'package:weatherfast/about_screen.dart';
import 'package:weatherfast/help_screen.dart';

class SettingsScreen extends StatelessWidget {
  const SettingsScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Icon(Icons.settings, size: 50, color: Colors.blue),
          const SizedBox(height: 10),
          const Text(
            'Settings',
            style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
          ),
          const SizedBox(height: 20),
          ListView(
            shrinkWrap: true,
            children: [
              ListTile(
                leading: const Icon(Icons.info_rounded),
                title: const Text('About App'),
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (_) => AboutScreen()),
                  );
                },
              ),
              ListTile(
                leading: const Icon(Icons.question_answer_rounded),
                title: const Text('Help and Feedback'),
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (_) => const HelpScreen()),
                  );
                },
              ),
            ],
          ),
        ],
      ),
    );
  }
}

And here is the screen I am trying to navigate to and back from(help_screen.dart):

import 'package:flutter/material.dart';
import 'webview_screen.dart'; // Import your WebViewScreen here

class HelpScreen extends StatelessWidget {
  const HelpScreen({super.key});

  @override
  Widget build(BuildContext context) {
    // Define URLs for Feature Request and Bug Report
    const featureRequestUrl = 'https://forms.gle/yWgLvBr2vMagmFbQ8';
    const bugReportUrl = 'https://forms.gle/vmdA2oyWtLtDu8jA8';

    // List items for the screen
    final List<Map<String, String>> items = [
      {'title': 'Feature Request', 'url': featureRequestUrl},
      {'title': 'Bug Report', 'url': bugReportUrl},
    ];

    return PopScope(
      canPop: true,
      child: Scaffold(
        appBar: AppBar(title: const Text('Help and Feedback')),
        body: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            final item = items[index];
            return ListTile(
              title: Text(item['title']!),
              trailing: const Icon(Icons.arrow_forward),
              onTap: () {
                // Navigate to WebViewScreen with the selected URL
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => WebViewScreen(url: item['url']!),
                  ),
                );
              },
            );
          },
        ),
      ),
    );
  }
}

Device I am testing on: Samsung S24 FE running Android 14.

Help would be greatly appreciated.

• android
• flutter

Share Improve this question Follow edited Mar 3 at 6:46 ChocordDaCoder asked Jan 13 at 8:16 ChocordDaCoderChocordDaCoder 6777 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

You should be having onPopInvokedWithResult handler function to handle the prediction logic and decide the value of canPop.

If "canPop" is set to true, it means that the page can be poped and will always be poped when pressed the back button. Set the value of canPop to a variable and set its value dynamically inside the onPopInvokedWithResult handler function. Something like below

@override
  Widget build(BuildContext context) {
    bool canPopNow = false;
    .
    .
    return PopScope(
      canPop: canPopNow,
      onPopInvokedWithResult: (bool didPop, dynamic) {
         if(<condition>){
            // add the condition to check if the page can be popped on the next back press
            setState((){
               canPopNow = true;
            });
            // Now on the next back press, the page will be poped
         }
         else{
            setState((){
               canPopNow = false;
            });
         }

         // If you want to give the user a time limit for the second back press, say 2 seconds, reset the value of canPopNow to false as below.

         Timer(const Duration(seconds: 2), () {
            setState((){
               canPopNow = false;
            });
         });
      }
      child: Scaffold(
        appBar: AppBar(title: const Text('Help and Feedback')),
        body: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            final item = items[index];
            return ListTile(
              title: Text(item['title']!),
              trailing: const Icon(Icons.arrow_forward),
              onTap: () {
                // Navigate to WebViewScreen with the selected URL
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => WebViewScreen(url: item['url']!),
                  ),
                );
              },
            );
          },
        ),
      ),
    );
  }

本文标签：