There may be instances when you want to deactivate the Android or iOS system back button programmatically on particular screens within a Flutter application. This will be accomplished mostly via the use of WillPopScope and the AppBar Widget. Before learning how to disable swipe to navigate back, let’s examine both of these in further detail.
AppBar Widget for Flutter
The AppBar is often the app’s most visible component; it comprises the toolbar, and a few other commonly used action buttons. A flutter app includes a single or several widgets, which means that all the program parts are widgets. Thus, AppBar is also a built-in class or component in a flutter that provides AppBar’s capabilities out of the box.
The AppBar widget is built on Material Design, and most of the information about where the AppBar’s content should be displayed is already given by other classes such as MediaQuery and Scaffold.
Though the AppBar class is quite versatile and customizable, we can also utilize the SilverAppBar widget to add the app bar scrollable capability. Alternatively, we may start from scratch and develop our app bar.
Constructor of AppBar Class:
AppBar(
{Key key,
Widget leading,
bool automatically
ImplyLeading: true,
Widget title,
List<Widget> actions,
double elevation,
Color shadowColor,
ShapeBorder shape,
Color backgroundColor,
Brightness brightness,
IconThemeData iconTheme,
IconThemeData actionsIconTheme,
TextTheme textTheme,
…}
AppBar Widget’s Critical Properties:
● Actions: If the AppBar is a row, this property accepts a list of widgets as an argument that will be shown after the title.
● Title: Typically, this property accepts the main widget as an argument to show in the AppBar.
● BackgroundColor: This parameter is used to customize the Appbar’s background color.
● Elevation: This parameter specifies the z-coordinate at which this app bar should be placed with relation to its parent.
● Shape: This property is used to form and control the AppBar’s shadow.
Example:
import “package:flutter/material.dart”;
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text(“AppBar Example”),
title Spacing: 00.0,
center Title: true,
toolbar Height: 60.2,
shape: Rounded Rectangle Border(borderRadius: BorderRadius.circular(360)),
elevation: 0.00,
background Color: Colors.greenAccent[400],
), //AppBar
body: const Center(
child: Text(
‘AppBar Widget’,
style: TextStyle(fontSize: 24),
), //Text
), //Center
), //Scaffold
debugShowCheckedModeBanner: false, //Removing Debug Banner
)); //MaterialApp
}
The AppBar widget makes use of a total of seven attributes in this case. It begins with the title ‘AppBar Example’. The second is titlespacing, which accepts a double value and is set to 00.0 in this example to keep text close together. The third property, centerTitle, accepts a boolean argument and is set to true in this case.
The fourth property, toolbarHeight, accepts a double input as well. This attribute casts a shadow beneath the AppBar, giving it the appearance of being raised. The fifth attribute, shape, is used to customize the AppBar’s appearance by altering the AppBar’s border.
Elevation is the sixth attribute; it specifies the z-coordinates at which the AppBar should be positioned with relation to its parent. Additionally, it accepts a parameter named double. Finally, there is the backgroundColor property, which specifies the color of the AppBar’s background.
WillPopScope
It’s up to WillPopScope to decide whether or not to navigate away from the current page. The return button on the AppBar and the Cupertino NavigationBar are just two of the many options available in Flutter for leaving the current page.
The previous page will be displayed if you click. The Android phone’s entity return button may also be used to return to the previous page by pressing the button. The Slightly function may be particularly simple for iOS developers to overlook.
Ask users if they wish to leave:
WillPopScope(
onWillPop: () async => showDialog(
context: context,
builder: (context) =>
AlertDialog(title: Text(‘Are you sure you want to quit?’), actions: <Widget> [
RaisedButton(
child: Text(‘sign out’),
onPressed: () => Navigator.of(context). pop(true)),
RaisedButton(
child: Text(‘cancel’),
onPressed: () => Navigator.of(context).pop(false)),
])),
child: Container(
alignment: Alignment.center,
child: Text(‘Click the back button to ask if you want to exit.’),
))
We can also provide the option to the user of making two-click exit:
DateTime _lastQuitTime;
WillPopScope(
onWillPop: () async {
if (_lastQuitTime == null ||
DateTime.now(). difference(_lastQuitTime).inSeconds > 1) {
print(‘Press again Back Button exit’);
Scaffold.of(context)
. showSnackBar(SnackBar(content: Text(‘Press again Back Button exit’)));
_lastQuitTime = DateTime.now();
return false;
} else {
print(‘sign out’);
Navigator.of(context). pop(true);
return true;
}
},
child: Container(
alignment: Alignment.center,
child: Text(‘Click the back button to ask if you want to exit.’),
))
iOS Flutter: How to Turn Off Swipe to Return Navigation?
onWillPop: () async {
if (Navigator.of(context).userGestureInProgress)
return false;
else
return true;
},
This should be done using WillPopScope:
WillPopScope
(
onWillPop: () async => false,
child: <children here>
)
Adding a configuration file would complicate matters further by making it more difficult to understand and maintain. Everything in flutter is a widget, not just half of them.
Find AppDelegate.swift in your project and add the following code:
let controller: FlutterViewController
= window?.rootViewController as! FlutterViewController;
controller.navigationController?
.interactivePopGestureRecognizer?.isEnabled = false;
The default value of the fullscreenDialog argument in MaterialPageRoute is false. Swipe to go back on iOS is disallowed if this is true since the page will animate differently. Here’s an example of how to use it:
Navigator.of(context).
push(
MaterialPageRoute(builder: (_) => HomePage(), fullscreenDialog: true));
Flutter: Disabling the Back Button on the Android System
import ‘package:flutter/material.dart’;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
// Remove the debug banner
debugShowCheckedModeBanner: false,
title: ‘Kindacode.com’,
theme: ThemeData(
primarySwatch: Colors.amber,
),
home: HomePage());
}
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text(‘Kindacode.com’),
),
body: Center(
child: ElevatedButton(
child: Text(‘Go to OtherPage’),
onPressed: () {
Navigator.of(context)
.push(MaterialPageRoute(builder: (context) => OtherPage()));
},
),
),
);
}
}
Conclusion
Thanks for reading, and we hope you’ve found this helpful information. Flutter Agency is a well-known online resource for those interested in Flutter Technology, with tens of thousands of unique visitors every day. Businesses can consult senior Flutter developers at flutteragency.com. Flutter Widget Tutorial, Flutter Applications, Code libs, and more can all be found at our portal.