Cupertino back gesture - Flutter package to set custom width of iOS back swipe gesture area

Overview

cupertino_back_gesture

pub package

A Flutter package to set custom width of iOS back swipe gesture area.

Usage

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

Example

To change width of area where the user can start back swipe for the whole app

  • Wrap your MaterialApp with BackGestureWidthTheme with desired backGestureWidth
  • set iOS builder of pageTransitionsTheme to CupertinoPageTransitionsBuilderCustomBackGestureWidth
import 'package:cupertino_back_gesture/cupertino_back_gesture.dart';

BackGestureWidthTheme(
  backGestureWidth: BackGestureWidth.fraction(1 / 2),
  child: MaterialApp(
    theme: ThemeData(
      pageTransitionsTheme: PageTransitionsTheme(
        builders: {
          TargetPlatform.android: FadeUpwardsPageTransitionsBuilder(),
          TargetPlatform.iOS: CupertinoPageTransitionsBuilderCustomBackGestureWidth(),
        },
      ),
    ),
    home: MainPage(),
  ),
)

Possible variants for backGestureWidth are

  • BackGestureWidth.fixed(w) where w is width in logical pixels
  • BackGestureWidth.fraction(f) where f is fraction of screen width from 0.0 to 1.0

Screenshots

Areas where back swipe gesture can be started are shaded with hatching

Default Flutter BackGestureWidth.fraction(1 / 2)
before after

Example app

Complete example can be found in example folder

Comments
  • extends MaterialPageRoute does not work

    extends MaterialPageRoute does not work

    class AnimationPageRoute<T> extends MaterialPageRoute<T> {
      AnimationPageRoute({
        WidgetBuilder builder,
        RouteSettings settings,
        this.isExitPageAffectedOrNot = true,
        this.animationType = AnimationType.SlideRL,
        this.maintainState = true,
      }) : super(builder: builder, settings: settings);
    
      // AnimationPageRoute({
      //   @required this.builder,
      //   this.isExitPageAffectedOrNot = true,
      //   this.animationType = AnimationType.SlideRL,
      //   RouteSettings settings,
      //   this.maintainState = true,
      //   bool fullscreenDialog = false,
      // })  : assert(builder != null),
      //       assert(isExitPageAffectedOrNot != null),
      //       assert(animationType != null),
      //       assert(maintainState != null),
      //       assert(fullscreenDialog != null);
    
      // final WidgetBuilder builder;
    
      /// 该参数只针对当[AnimationType]为[SlideLR]或[SlideRL]新页面及当前页面动画均有效
      final bool isExitPageAffectedOrNot;
    
      final AnimationType animationType;
    
      @override
      final bool maintainState;
    
      @override
      Duration get transitionDuration => const Duration(milliseconds: 1000);
    
      @override
      Color get barrierColor => null;
    
      @override
      String get barrierLabel => null;
    
      @override
      bool canTransitionTo(TransitionRoute<dynamic> nextRoute) =>
          nextRoute is AnimationPageRoute && !nextRoute.fullscreenDialog;
    
      @override
      Widget buildPage(BuildContext context, Animation<double> animation,
          Animation<double> secondaryAnimation) {
        final Widget result = builder(context);
        assert(() {
          if (result == null) {
            throw FlutterError.fromParts(<DiagnosticsNode>[
              ErrorSummary(
                  'The builder for route "${settings.name}" returned null.'),
              ErrorDescription('Route builders must never return null.')
            ]);
          }
          return true;
        }());
        return Semantics(
            scopesRoute: true, explicitChildNodes: true, child: result);
      }
    
      @override
      Widget buildTransitions(BuildContext context, Animation<double> animation,
          Animation<double> secondaryAnimation, Widget child) {
        if (animationType == AnimationType.Fade)
          FadeTransition(
              opacity: CurvedAnimation(
                parent: animation,
                curve: Curves.linearToEaseOut,
                reverseCurve: Curves.easeInToLinear,
              ).drive(_tweenFade),
              child: child);
        final TextDirection textDirection = Directionality.of(context);
        Tween<Offset> primaryTween = _primaryTweenSlideFromRightToLeft,
            secondTween = _secondaryTweenSlideFromRightToLeft;
        Cubic curve = Curves.linearToEaseOut, reverseCurve = Curves.easeInToLinear;
        if (animationType == AnimationType.SlideBT) {
          primaryTween = _primaryTweenSlideFromBottomToTop;
        } else if (animationType == AnimationType.SlideTB) {
          primaryTween = _primaryTweenSlideFromTopToBottom;
        } else if (animationType == AnimationType.SlideLR) {
          primaryTween = _primaryTweenSlideFromLeftToRight;
          secondTween = _secondaryTweenSlideFromLeftToRight;
          curve = Curves.fastOutSlowIn;
          reverseCurve = Curves.easeOutCubic;
        }
        Widget enterAnimWidget = SlideTransition(
            position: CurvedAnimation(
              parent: animation,
              curve: curve,
              reverseCurve: reverseCurve,
            ).drive(primaryTween),
            textDirection: textDirection,
            child: child);
        if (isExitPageAffectedOrNot != true ||
            ([AnimationType.SlideTB, AnimationType.SlideBT]
                .contains(animationType))) return enterAnimWidget;
        return SlideTransition(
            position: CurvedAnimation(
              parent: secondaryAnimation,
              curve: curve,
              reverseCurve: reverseCurve,
            ).drive(secondTween),
            textDirection: textDirection,
            child: enterAnimWidget);
      }
    
      @override
      String get debugLabel => '${super.debugLabel}(${settings.name})';
    }
    
    opened by yaooort 2
  • Is there a way to change the dismiss/pop animation

    Is there a way to change the dismiss/pop animation

    I want to pop the current route by dragging down. So the current route should move along with the finger towards the bottom of the page while fading out and shrinking.

    Basically I would like to know if there is an easy way, without forking the package, to customize the dismiss animation and gesture.

    My objective is to have a similar UX to a Instagram Story route pop.

    Thank you very much.

    opened by aytunch 1
  • Error

    Error

    I got this issue

    `../../../../documents/flutter/.pub-cache/hosted/pub.dartlang.org/cupertino_back_gesture-0.0.3/lib/src/cupertino_page_route.dart:120:15: Error: Getter not found: 'opaque'. assert(opaque),
    ^^^^^^

    FAILURE: Build failed with an exception.

    • Where:
      Script '/Users/uogforceone/documents/flutter/packages/flutter_tools/gradle/flutter.gradle' line: 900

    • What went wrong:
      Execution failed for task ':app:compileFlutterBuildDebug'.

    Process 'command '/Users/uogforceone/documents/flutter/bin/flutter'' finished with non-zero exit value 1

    • Try:
      Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

    • Get more help at https://help.gradle.org
      `

    opened by leszekkrol 1
  • This library cannot use with WillPopScope

    This library cannot use with WillPopScope

    Hi Author. With TargetPlatform.android: CupertinoPageTransitionsBuilderCustomBackGestureWidth() In OtherPage, I use WillPopScope to catch back event of Android then this library is not working.

    Thank you.

    opened by vannam22081988 2
  • Is it only for material app?

    Is it only for material app?

    Thanks for your plugin. I tried to add it, but looks like it's only for MaterialApp, because I can't set pageTransitionsTheme in CupertinoApp.

    Is there a way to use it with CupertinoApp?

    opened by vizakenjack 0
Owner
Flutter developer
null
Cupertino app codelab - Building a Cupertino App with Flutter

Building a Cupertino App with Flutter Flutter allows us creating Cupertino (iOS-

Abdulaziz Malikov 5 Nov 30, 2022
Target the specific design of Material for Android and Cupertino for iOS widgets through a common set of Platform aware widgets

Flutter Platform Widgets This project is an attempt to see if it is possible to create widgets that are platform aware. Currently in order to render t

null 1.3k Jan 4, 2023
Target the specific design of Material for Android and Cupertino for iOS widgets through a common set of Platform aware widgets

Flutter Platform Widgets This project is an attempt to see if it is possible to create widgets that are platform aware. Currently in order to render t

null 1.3k Jan 4, 2023
Speed Share is a highly available file sharing terminal on LAN(local area network) developed by flutter framework.

速享 Language: 中文简体 | English 这是一款完全基于局域网的文件互传终端,速享不使用任何服务器,不使用您的移动流量,不收集任何用户数据,完全的点对点传输。 可以快速共享文本消息,图片或其他文件,文件夹。 适用于局域网中的文件互传,解决 QQ,微信等上传文件会经过服务器的问题,或者

null 477 Dec 31, 2022
Mobile App for posting and reporting incidents around your area.

newsecurus A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if th

John Philip Dela Vega 1 Dec 8, 2021
Swipe Book | E-book Mobile Application For Android and IoS Using Flutter

is a collection of a wide variety of educational resources consisting pdfs, images, question papers, a collection of important questions, programs, useful videos that will help in the effective learning process.

Sajan Poudel 8 Nov 9, 2022
A flutter UI package provides a cell widget that has leading and trailing swipe action menu.

Language: English |中文简体 flutter_swipe_action_cell A package that can give you a cell that can be swiped ,effect is like iOS native If you like this pa

WenJingRui 261 Jan 7, 2023
A Flutter package which provides 360 view of the images with rotation and gesture customisations.

imageview360 A Flutter package which provides 360 view of the images with rotation and gesture customisations. Supported Dart Versions Dart SDK versio

hd-motion 104 Dec 1, 2022
Flutter package that provides you custom clippers to help you achieve various custom shapes.

flutter_custom_clippers Flutter package that provides you custom clippers to help you achieve various custom shapes. Usage To use this plugin, add flu

Damodar Lohani 291 Dec 23, 2022
A flutter date time picker inspired by flutter-cupertino-date-picker

Flutter Datetime Picker (Pub) flutter_datetime_picker A flutter date time picker inspired by flutter-cupertino-date-picker you can choose date / time

null 0 Nov 30, 2021
Flutter cupertino style date picker.

Flutter Cupertino Date Picker [pub packages] | 中文说明 Flutter cupertino date picker. Usage 1. Depend Add this to you package's pubspec.yaml file: depend

Dylan Wu 333 Dec 26, 2022
Flutter cupertino style date picker.

Flutter Cupertino Date Picker [pub packages] | 中文说明 Flutter cupertino date picker. Usage 1. Depend Add this to you package's pubspec.yaml file: depend

Dylan Wu 333 Dec 26, 2022
Cupertino version of the Material Stepper in Flutter

Cupertino Stepper for Flutter Cupertino version of the stock Material Stepper in Flutter. NOTE: This is not the same as the UIStepper control on iOS.

J-P Nurmi 18 Oct 13, 2022
Material & Cupertino SpinBox for Flutter

SpinBox for Flutter SpinBox for Flutter is a numeric input widget with an input field for entering a specific value, and spin buttons for quick, conve

J-P Nurmi 26 Nov 30, 2022
Flutter Cupertino text box which can be used to select a date with CupertinoDatePicker

Flutter Cupertino Date Text Box A text box with an attached CupertinoDatePicker which opens when the text box is tapped. With this library the followi

Christoph Rothermel 5 Feb 13, 2022
Beautiful flutter analog clocks. Swipe to change the clock design

analog_clock_for_flutter Beautiful flutter analog clocks. Swipe to change the clock design Screenshots Usage To use plugin, just import package import

Ouzani Abd Raouf 4 Nov 3, 2021
A Beautiful Swipe for flutter

solarsysteme You can get a lot inforamation about plants UI Use this source code

Amirziya 5 Mar 12, 2022
Flutter page widget that is dismissed by swipe gestures, with Hero style animations, Inspired by Facebook and Instagram stories.

dismissible_page ?? ?? Creates page that is dismissed by swipe gestures, with Hero style animations, Inspired by FB, IG stories. Live Demo Contents Su

Tornike 76 Dec 22, 2022
A swipe to confirm button for flutter

Sliding Button A sliding Flutter widget, based on the slide to unlock function from multiple devices. Heavily customizable and flexible. Installing Ad

null 39 Nov 29, 2022