FLUTTER ECOSYSTEM

benPesso/flutter_cupertino_will_pop_scope

An enhanced version of Flutter's CupertinoPageRoute

flutter_cupertino_will_pop_scope project cover
Stars
18
Forks
13
Last push (UTC)
Jul 31, 2022
Project status
Active
benPesso GitHub avatar
GITHUB User

benPesso ↗

LanguagesDartSwiftKotlinObjective-C

Technical topics

Packages published by this repository

Dependencies used

Dependency list 2 items
  • flutter{"sdk":"flutter"}
  • flutter_testDevelopment{"sdk":"flutter"}

Original README

English project snapshot. Visit GitHub for the latest content.

Expand / collapse project README

CupertinoWillPopScope

pub package

Note: This package can be used on any platform, and is not specific to iOS. ConditionalWillPopScope and CupertinoWillPopScopePageTransionsBuilder can each be used seprately.


CupertinoWillPopScopePageTransionsBuilder

The key to this package is a modified version of Flutter's CupertinoPageRoute, which has been enhanced with the following:

  • Visual feedback when users attempt to "swipe to go back" - the screen is allowed to be dragged a bit before it is snapped back to place.
  • If an enclosing route has willPop callbacks, they are triggered once the screen is snapped back to place.
ConditionalWillPopScope

When using this widget, be sure to update shouldAddCallbacks based on the state of your screen, and only set it to true when the screen should not be allowed to pop. Additionally, the onWillPop property should not be changed once set.


A working app using this package can be found in the example folder.

Usage

To use this package, add cupertino_will_pop_scope as a dependency in your pubspec.yaml file.

Example

Import the library
// main.dart
import 'package:decorated_icon/cupertino_will_pop_scope.dart';
Configure page transitions

Set the transition builder of the desired platform to CupertinoWillPopScopePageTransionsBuilder in your theme configuration.

// main.dart
theme = ThemeData(
  ...
  pageTransitionsTheme: PageTransitionsTheme(
    builders: {
      TargetPlatform.android: ZoomPageTransitionsBuilder(),
      TargetPlatform.iOS: CupertinoWillPopScopePageTransionsBuilder(),
    },
  ),
);
Make sure the theme is applied to the app.
// main.dart
MaterialApp(
  ...
  theme: theme,
  home: HomeScreen(),
);
Wrap your screen

Using the included ConditionalWillPopScope widget, or Flutter's WillPopScope widget, wrap your screen and define an onWillPop callback for it.

Note that onWillPop should always return a bool. See the Flutter Docs for more.
Using ConditionalWillPopScope:
// my_screen.dart
@override
Widget build(BuildContext context) {
  return ConditionalWillPopScope(
    child: _MyScreenContent(),
    onWillPop: _onWillPop,
    shouldAddCallbacks: _hasChanges,
  );
}
Using WillPopScope:
// my_screen.dart
@override
Widget build(BuildContext context) {
  return WillPopScope(
    child: _MyScreenContent(),
    onWillPop: _hasChanges ? _onWillPop : null,
  );
}

:warning: When using Flutter's WillPopScope widget, the onWillPop must be set conditionally. Otherwise, the "swipe to go back" gesture will be cancelled. In the example above, this is achieved by using _hasChanges as the condition.