Open In App

Flutter – WillPopScope Widget

The WillPopScope widget is used to control the back button of our smartphone which is at the bottom of the screen. With the help of this widget, we can allow the back button to navigate to the previous page or give the callback False so it can’t navigate us to the previous page. As we can see in the below demo by pressing the back button we aren’t able to go back to the previous screen. So in this article, we will see how to implement WillPopScope Widget.

Constructor




WillPopScope(
  {
   Key? key, 
   required Widget child, 
   required WillPopCallback? onWillPop
    }
)

WillPopScope the widget has two compulsory/required parameters:



Now let’s see how to implement WillPopScope Widget.

Implementation

Step 1:






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.green,
      ),
      home: const MyHomePage(),
    );
  }
}
  
class MyHomePage extends StatefulWidget {
  const MyHomePage({ Key? key }) : super(key: key);
  
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}
  
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: (){
          Navigator.of(context).push(MaterialPageRoute(builder: (context){
            return const NextPage();
          }));
        },
        child: const Text('Next Page'),
        ),
    );
  }
}

Step 2:




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.green,
      ),
      home: const MyHomePage(),
    );
  }
}
  
class MyHomePage extends StatefulWidget {
  const MyHomePage({ Key? key }) : super(key: key);
  
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}
  
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: (){
          Navigator.of(context).push(MaterialPageRoute(builder: (context){
            return const NextPage();
          }));
        },
        child: const Text('Next Page'),
        ),
    );
  }
}
  
class NextPage extends StatelessWidget {
  const NextPage({ Key? key }) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
  
    // WillPopScope Widget class used 
    return WillPopScope(
      child: Scaffold(
        backgroundColor: Colors.blue,
        appBar: AppBar(
           
          title: const Text('Next Page'),
          ),
          body: const Center(),
      ), 
  
      // function callback that 
      // controls back button usage
      onWillPop: () async {
        return false;
      }
      );
  }
}

Output:

Explanation:

In the above video, we can see that by pressing the bottom back button we can’t go back. So if we need to go back to the previous page we need to add a leading icon button in Appbar. Let’s see how to do it in the next step.

Step 3:




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.green,
      ),
      home: const MyHomePage(),
    );
  }
}
  
class MyHomePage extends StatefulWidget {
  const MyHomePage({ Key? key }) : super(key: key);
  
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}
  
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: (){
          Navigator.of(context).push(MaterialPageRoute(builder: (context){
            return const NextPage();
          }));
        },
        child: const Text('Next Page'),
        ),
    );
  }
}
  
class NextPage extends StatelessWidget {
  const NextPage({ Key? key }) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
  
    // WillPopScope Widget class used 
    return WillPopScope(
      child: Scaffold(
        backgroundColor: Colors.blue,
  
        // adding leading icon button to 
        // navigate to previous page
        appBar: AppBar(
           leading: IconButton(onPressed: () {
            Navigator.of(context).pop();
          },
          icon: const Icon(Icons.arrow_back_ios_new),
          ),
           
          title: const Text('Next Page'),
          ),
          body: const Center(),
      ), 
  
      // function callback that 
      // controls back button usage
      onWillPop: () async {
        return false;
      }
      );
  }
}

Output:

Explanation: Here we can see that by adding onpressed property to the leading action button we can go back to the previous page easily.


Article Tags :