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

Dart

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

WillPopScope the widget has two compulsory/required parameters:

• onWillPop: this parameter determines whether the page should be popped or not using a boolean; when it’s true, the page pops back, and if it’s false, it remains on the same page
• child widget: the widget for the view

Now let’s see how to implement WillPopScope Widget.

Implementation

Step 1:

• Inside the center widget, we created an elevated button that will use the property onpressed.
• Onpressed will navigate us to the next page
• Add child Text with name – NextPage

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.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:

• When we click the elevated button we go to the next page. Inside the next page class, we will use willpopscope widget.
• The child will be a scaffold widget, the background color will be blue, and we created Appbar with a title next page.
• The body will have a center widget.
• On will pop have a function and will return false.

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.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:

• Now above step, we saw that we cannot go back to the previous page.
• To go back to the previous page we need to add a leading icon button with onpressed which will navigate to pop out of this page.

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.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.