• Justin McCandless's avatar
    Predictive back support for root routes (#120385) · dedd100e
    Justin McCandless authored
    This PR aims to support Android's predictive back gesture when popping the entire Flutter app.  Predictive route transitions between routes inside of a Flutter app will come later.
    
    <img width="200" src="https://user-images.githubusercontent.com/389558/217918109-945febaa-9086-41cc-a476-1a189c7831d8.gif" />
    
    ### Trying it out
    
    If you want to try this feature yourself, here are the necessary steps:
    
      1. Run Android 33 or above.
      1. Enable the feature flag for predictive back on the device under "Developer
         options".
      1. Create a Flutter project, or clone [my example project](https://github.com/justinmc/flutter_predictive_back_examples).
      1. Set `android:enableOnBackInvokedCallback="true"` in
         android/app/src/main/AndroidManifest.xml (already done in the example project).
      1. Check out this branch.
      1. Run the app. Perform a back gesture (swipe from the left side of the
         screen).
    
    You should see the predictive back animation like in the animation above and be able to commit or cancel it.
    
    ### go_router support
    
    go_router works with predictive back out of the box because it uses a Navigator internally that dispatches NavigationNotifications!
    
    ~~go_router can be supported by adding a listener to the router and updating SystemNavigator.setFrameworkHandlesBack.~~
    
    Similar to with nested Navigators, nested go_routers is supported by using a PopScope widget.
    
    <details>
    
    <summary>Full example of nested go_routers</summary>
    
    ```dart
    // Copyright 2014 The Flutter Authors. All rights reserved.
    // Use of this source code is governed by a BSD-style license that can be
    // found in the LICENSE file.
    
    import 'package:go_router/go_router.dart';
    
    import 'package:flutter/material.dart';
    import 'package:flutter/scheduler.dart';
    
    void main() => runApp(_MyApp());
    
    class _MyApp extends StatelessWidget {
      final GoRouter router = GoRouter(
        routes: <RouteBase>[
          GoRoute(
            path: '/',
            builder: (BuildContext context, GoRouterState state) => _HomePage(),
          ),
          GoRoute(
            path: '/nested_navigators',
            builder: (BuildContext context, GoRouterState state) => _NestedGoRoutersPage(),
          ),
        ],
      );
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp.router(
          routerConfig: router,
        );
      }
    }
    
    class _HomePage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: const Text('Nested Navigators Example'),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                const Text('Home Page'),
                const Text('A system back gesture here will exit the app.'),
                const SizedBox(height: 20.0),
                ListTile(
                  title: const Text('Nested go_router route'),
                  subtitle: const Text('This route has another go_router in addition to the one used with MaterialApp above.'),
                  onTap: () {
                    context.push('/nested_navigators');
                  },
                ),
              ],
            ),
          ),
        );
      }
    }
    
    class _NestedGoRoutersPage extends StatefulWidget {
      @override
      State<_NestedGoRoutersPage> createState() => _NestedGoRoutersPageState();
    }
    
    class _NestedGoRoutersPageState extends State<_NestedGoRoutersPage> {
      late final GoRouter _router;
      final GlobalKey<NavigatorState> _nestedNavigatorKey = GlobalKey<NavigatorState>();
    
      // If the nested navigator has routes that can be popped, then we want to
      // block the root navigator from handling the pop so that the nested navigator
      // can handle it instead.
      bool get _popEnabled {
        // canPop will throw an error if called before build. Is this the best way
        // to avoid that?
        return _nestedNavigatorKey.currentState == null ? true : !_router.canPop();
      }
    
      void _onRouterChanged() {
        // Here the _router reports the location correctly, but canPop is still out
        // of date.  Hence the post frame callback.
        SchedulerBinding.instance.addPostFrameCallback((Duration duration) {
          setState(() {});
        });
      }
    
      @override
      void initState() {
        super.initState();
    
        final BuildContext rootContext = context;
        _router = GoRouter(
          navigatorKey: _nestedNavigatorKey,
          routes: [
            GoRoute(
              path: '/',
              builder: (BuildContext context, GoRouterState state) => _LinksPage(
                title: 'Nested once - home route',
                backgroundColor: Colors.indigo,
                onBack: () {
                  rootContext.pop();
                },
                buttons: <Widget>[
                  TextButton(
                    onPressed: () {
                      context.push('/two');
                    },
                    child: const Text('Go to another route in this nested Navigator'),
                  ),
                ],
              ),
            ),
            GoRoute(
              path: '/two',
              builder: (BuildContext context, GoRouterState state) => _LinksPage(
                backgroundColor: Colors.indigo.withBlue(255),
                title: 'Nested once - page two',
              ),
            ),
          ],
        );
    
        _router.addListener(_onRouterChanged);
      }
    
      @override
      void dispose() {
        _router.removeListener(_onRouterChanged);
        super.dispose();
      }
    
      @override
      Widget build(BuildContext context) {
        return PopScope(
          popEnabled: _popEnabled,
          onPopped: (bool success) {
            if (success) {
              return;
            }
            _router.pop();
          },
          child: Router<Object>.withConfig(
            restorationScopeId: 'router-2',
            config: _router,
          ),
        );
      }
    }
    
    class _LinksPage extends StatelessWidget {
      const _LinksPage ({
        required this.backgroundColor,
        this.buttons = const <Widget>[],
        this.onBack,
        required this.title,
      });
    
      final Color backgroundColor;
      final List<Widget> buttons;
      final VoidCallback? onBack;
      final String title;
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          backgroundColor: backgroundColor,
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(title),
                //const Text('A system back here will go back to Nested Navigators Page One'),
                ...buttons,
                TextButton(
                  onPressed: onBack ?? () {
                    context.pop();
                  },
                  child: const Text('Go back'),
                ),
              ],
            ),
          ),
        );
      }
    }
    ```
    
    </details>
    
    ### Resources
    
    Fixes https://github.com/flutter/flutter/issues/109513
    Depends on engine PR https://github.com/flutter/engine/pull/39208  
    Design doc: https://docs.google.com/document/d/1BGCWy1_LRrXEB6qeqTAKlk-U2CZlKJ5xI97g45U7azk/edit#
    Migration guide: https://github.com/flutter/website/pull/8952
    dedd100e
Name
Last commit
Last update
..
absorb_pointer_test.dart Loading commit data...
actions_test.dart Loading commit data...
align_test.dart Loading commit data...
animated_align_test.dart Loading commit data...
animated_container_test.dart Loading commit data...
animated_cross_fade_test.dart Loading commit data...
animated_grid_test.dart Loading commit data...
animated_image_filtered_repaint_test.dart Loading commit data...
animated_list_test.dart Loading commit data...
animated_opacity_repaint_test.dart Loading commit data...
animated_padding_test.dart Loading commit data...
animated_positioned_test.dart Loading commit data...
animated_size_test.dart Loading commit data...
animated_switcher_test.dart Loading commit data...
annotated_region_test.dart Loading commit data...
app_lifecycle_listener_test.dart Loading commit data...
app_navigator_key_test.dart Loading commit data...
app_overrides_test.dart Loading commit data...
app_test.dart Loading commit data...
app_title_test.dart Loading commit data...
aspect_ratio_test.dart Loading commit data...
async_lifecycle_test.dart Loading commit data...
async_test.dart Loading commit data...
autocomplete_test.dart Loading commit data...
autofill_group_test.dart Loading commit data...
automatic_keep_alive_test.dart Loading commit data...
backdrop_filter_test.dart Loading commit data...
banner_test.dart Loading commit data...
baseline_test.dart Loading commit data...
basic_test.dart Loading commit data...
binding_attach_root_widget_test.dart Loading commit data...
binding_cannot_schedule_frame_test.dart Loading commit data...
binding_deferred_first_frame_test.dart Loading commit data...
binding_first_frame_developer_test.dart Loading commit data...
binding_first_frame_rasterized_test.dart Loading commit data...
binding_frame_scheduling_test.dart Loading commit data...
binding_test.dart Loading commit data...
box_decoration_test.dart Loading commit data...
box_sliver_mismatch_test.dart Loading commit data...
build_context_test.dart Loading commit data...
build_fail_test.dart Loading commit data...
build_scope_test.dart Loading commit data...
center_test.dart Loading commit data...
clamp_overscrolls_test.dart Loading commit data...
clip_test.dart Loading commit data...
clipboard_utils.dart Loading commit data...
color_filter_test.dart Loading commit data...
column_test.dart Loading commit data...
composited_transform_test.dart Loading commit data...
constrained_box_test.dart Loading commit data...
container_test.dart Loading commit data...
context_menu_controller_test.dart Loading commit data...
coordinates_test.dart Loading commit data...
custom_multi_child_layout_test.dart Loading commit data...
custom_paint_test.dart Loading commit data...
custom_painter_test.dart Loading commit data...
custom_scroll_view_test.dart Loading commit data...
custom_single_child_layout_test.dart Loading commit data...
debug_test.dart Loading commit data...
decorated_sliver_test.dart Loading commit data...
default_colors_test.dart Loading commit data...
default_text_editing_shortcuts_test.dart Loading commit data...
default_text_height_behavior_test.dart Loading commit data...
default_text_style_test.dart Loading commit data...
did_update_widget_test.dart Loading commit data...
directionality_test.dart Loading commit data...
dismissible_test.dart Loading commit data...
display_feature_sub_screen_test.dart Loading commit data...
disposable_build_context_test.dart Loading commit data...
dispose_ancestor_lookup_test.dart Loading commit data...
draggable_scrollable_sheet_test.dart Loading commit data...
draggable_test.dart Loading commit data...
drawer_test.dart Loading commit data...
dual_transition_builder_test.dart Loading commit data...
editable_text_cursor_test.dart Loading commit data...
editable_text_shortcuts_test.dart Loading commit data...
editable_text_show_on_screen_test.dart Loading commit data...
editable_text_test.dart Loading commit data...
editable_text_utils.dart Loading commit data...
ensure_visible_test.dart Loading commit data...
error_widget_builder_test.dart Loading commit data...
error_widget_test.dart Loading commit data...
fade_in_image_test.dart Loading commit data...
fade_transition_test.dart Loading commit data...
fast_reassemble_test.dart Loading commit data...
fitted_box_test.dart Loading commit data...
flex_test.dart Loading commit data...
flow_test.dart Loading commit data...
focus_manager_test.dart Loading commit data...
focus_scope_test.dart Loading commit data...
focus_traversal_test.dart Loading commit data...
form_test.dart Loading commit data...
fractionally_sized_box_test.dart Loading commit data...
framework_test.dart Loading commit data...
gesture_detector_semantics_test.dart Loading commit data...
gesture_detector_test.dart Loading commit data...
gesture_disambiguation_test.dart Loading commit data...
gesture_utils.dart Loading commit data...
global_keys_duplicated_test.dart Loading commit data...
global_keys_moving_test.dart Loading commit data...
grid_paper_test.dart Loading commit data...
grid_view_layout_test.dart Loading commit data...
grid_view_test.dart Loading commit data...
heroes_test.dart Loading commit data...
hit_testing_test.dart Loading commit data...
html_element_view_test.dart Loading commit data...
hyperlink_test.dart Loading commit data...
icon_data_test.dart Loading commit data...
icon_test.dart Loading commit data...
icon_theme_data_test.dart Loading commit data...
image_filter_quality_test.dart Loading commit data...
image_filter_test.dart Loading commit data...
image_headers_test.dart Loading commit data...
image_icon_test.dart Loading commit data...
image_package_asset_test.dart Loading commit data...
image_resolution_test.dart Loading commit data...
image_rtl_test.dart Loading commit data...
image_test.dart Loading commit data...
implicit_animations_test.dart Loading commit data...
implicit_semantics_test.dart Loading commit data...
independent_widget_layout_test.dart Loading commit data...
inherited_dependencies_test.dart Loading commit data...
inherited_model_test.dart Loading commit data...
inherited_test.dart Loading commit data...
inherited_theme_test.dart Loading commit data...
init_state_test.dart Loading commit data...
interactive_viewer_test.dart Loading commit data...
intrinsic_width_test.dart Loading commit data...
invert_colors_test.dart Loading commit data...
keep_alive_test.dart Loading commit data...
key_test.dart Loading commit data...
keyboard_listener_test.dart Loading commit data...
keyboard_utils.dart Loading commit data...
layout_builder_and_global_keys_test.dart Loading commit data...
layout_builder_and_parent_data_test.dart Loading commit data...
layout_builder_and_state_test.dart Loading commit data...
layout_builder_mutations_test.dart Loading commit data...
layout_builder_test.dart Loading commit data...
linked_scroll_view_test.dart Loading commit data...
list_body_test.dart Loading commit data...
list_view_builder_test.dart Loading commit data...
list_view_correction_test.dart Loading commit data...
list_view_fling_test.dart Loading commit data...
list_view_horizontal_test.dart Loading commit data...
list_view_misc_test.dart Loading commit data...
list_view_relayout_test.dart Loading commit data...
list_view_semantics_test.dart Loading commit data...
list_view_test.dart Loading commit data...
list_view_vertical_test.dart Loading commit data...
list_view_viewporting_test.dart Loading commit data...
list_view_with_inherited_test.dart Loading commit data...
list_wheel_scroll_view_test.dart Loading commit data...
listener_test.dart Loading commit data...
listview_end_append_test.dart Loading commit data...
live_text_utils.dart Loading commit data...
localizations_test.dart Loading commit data...
lookup_boundary_test.dart Loading commit data...
magnifier_test.dart Loading commit data...
mark_needs_build_test.dart Loading commit data...
media_query_test.dart Loading commit data...
memory_allocations_test.dart Loading commit data...
modal_barrier_test.dart Loading commit data...
mouse_region_test.dart Loading commit data...
multi_view_binding_test.dart Loading commit data...
multi_view_tree_updates_test.dart Loading commit data...
multichild_test.dart Loading commit data...
multichildobject_with_keys_test.dart Loading commit data...
navigator_and_layers_test.dart Loading commit data...
navigator_replacement_test.dart Loading commit data...
navigator_restoration_test.dart Loading commit data...
navigator_test.dart Loading commit data...
navigator_utils.dart Loading commit data...
nested_scroll_view_test.dart Loading commit data...
notification_test.dart Loading commit data...
obscured_animated_image_test.dart Loading commit data...
observer_tester.dart Loading commit data...
opacity_repaint_test.dart Loading commit data...
opacity_test.dart Loading commit data...
overflow_bar_test.dart Loading commit data...
overflow_box_test.dart Loading commit data...
overlay_portal_test.dart Loading commit data...
overlay_test.dart Loading commit data...
overscroll_indicator_test.dart Loading commit data...
overscroll_stretch_indicator_test.dart Loading commit data...
page_forward_transitions_test.dart Loading commit data...
page_route_builder_test.dart Loading commit data...
page_storage_test.dart Loading commit data...
page_transitions_test.dart Loading commit data...
page_view_test.dart Loading commit data...
pageable_list_test.dart Loading commit data...
parent_data_test.dart Loading commit data...
performance_overlay_test.dart Loading commit data...
physical_model_test.dart Loading commit data...
placeholder_test.dart Loading commit data...
platform_menu_bar_test.dart Loading commit data...
platform_view_test.dart Loading commit data...
pop_scope_test.dart Loading commit data...
positioned_test.dart Loading commit data...
range_maintaining_scroll_physics_test.dart Loading commit data...
raw_keyboard_listener_test.dart Loading commit data...
reassemble_test.dart Loading commit data...
render_object_element_test.dart Loading commit data...
render_object_widget_test.dart Loading commit data...
reorderable_list_test.dart Loading commit data...
reparent_state_harder_test.dart Loading commit data...
reparent_state_test.dart Loading commit data...
reparent_state_with_layout_builder_test.dart Loading commit data...
restorable_property_test.dart Loading commit data...
restoration.dart Loading commit data...
restoration_mixin_test.dart Loading commit data...
restoration_scope_test.dart Loading commit data...
restoration_scopes_moving_test.dart Loading commit data...
rich_text_test.dart Loading commit data...
root_restoration_scope_test.dart Loading commit data...
rotated_box_test.dart Loading commit data...
route_notification_messages_test.dart Loading commit data...
router_restoration_test.dart Loading commit data...
router_test.dart Loading commit data...
routes_test.dart Loading commit data...
row_test.dart Loading commit data...
rtl_test.dart Loading commit data...
run_app_async_test.dart Loading commit data...
run_app_test.dart Loading commit data...
safe_area_test.dart Loading commit data...
scroll_activity_test.dart Loading commit data...
scroll_aware_image_provider_test.dart Loading commit data...
scroll_behavior_test.dart Loading commit data...
scroll_controller_test.dart Loading commit data...
scroll_events_test.dart Loading commit data...
scroll_interaction_test.dart Loading commit data...
scroll_notification_test.dart Loading commit data...
scroll_physics_test.dart Loading commit data...
scroll_position_test.dart Loading commit data...
scroll_simulation_test.dart Loading commit data...
scroll_view_test.dart Loading commit data...
scrollable_animations_test.dart Loading commit data...
scrollable_dispose_test.dart Loading commit data...
scrollable_fling_test.dart Loading commit data...
scrollable_grid_test.dart Loading commit data...
scrollable_helpers_test.dart Loading commit data...
scrollable_in_overlay_test.dart Loading commit data...
scrollable_list_hit_testing_test.dart Loading commit data...
scrollable_of_test.dart Loading commit data...
scrollable_restoration_test.dart Loading commit data...
scrollable_selection_test.dart Loading commit data...
scrollable_semantics_test.dart Loading commit data...
scrollable_semantics_traversal_order_test.dart Loading commit data...
scrollable_test.dart Loading commit data...
scrollbar_test.dart Loading commit data...
selectable_region_context_menu_test.dart Loading commit data...
selectable_region_test.dart Loading commit data...
selectable_text_test.dart Loading commit data...
selection_container_test.dart Loading commit data...
semantics_10_test.dart Loading commit data...
semantics_11_test.dart Loading commit data...
semantics_1_test.dart Loading commit data...
semantics_2_test.dart Loading commit data...
semantics_3_test.dart Loading commit data...
semantics_4_test.dart Loading commit data...
semantics_5_test.dart Loading commit data...
semantics_6_test.dart Loading commit data...
semantics_7_test.dart Loading commit data...
semantics_8_test.dart Loading commit data...
semantics_9_test.dart Loading commit data...
semantics_child_configs_delegate_test.dart Loading commit data...
semantics_clipping_test.dart Loading commit data...
semantics_debugger_test.dart Loading commit data...
semantics_event_test.dart Loading commit data...
semantics_keep_alive_offstage_test.dart Loading commit data...
semantics_merge_test.dart Loading commit data...
semantics_test.dart Loading commit data...
semantics_tester.dart Loading commit data...
semantics_tester_generate_test_semantics_expression_for_current_semantics_tree_test.dart Loading commit data...
semantics_tester_test.dart Loading commit data...
semantics_traversal_test.dart Loading commit data...
semantics_zero_surface_size_test.dart Loading commit data...
set_state_1_test.dart Loading commit data...
set_state_2_test.dart Loading commit data...
set_state_3_test.dart Loading commit data...
set_state_4_test.dart Loading commit data...
set_state_5_test.dart Loading commit data...
shader_mask_test.dart Loading commit data...
shadow_test.dart Loading commit data...
shape_decoration_test.dart Loading commit data...
shared_app_data_test.dart Loading commit data...
shortcuts_test.dart Loading commit data...
shrink_wrapping_viewport_test.dart Loading commit data...
simple_semantics_test.dart Loading commit data...
single_child_scroll_view_test.dart Loading commit data...
size_changed_layout_notification_test.dart Loading commit data...
sized_box_test.dart Loading commit data...
sliver_appbar_opacity_test.dart Loading commit data...
sliver_constrained_cross_axis_test.dart Loading commit data...
sliver_constraints_test.dart Loading commit data...
sliver_cross_axis_group_test.dart Loading commit data...
sliver_fill_remaining_test.dart Loading commit data...
sliver_fill_viewport_test.dart Loading commit data...
sliver_list_test.dart Loading commit data...
sliver_main_axis_group_test.dart Loading commit data...
sliver_persistent_header_test.dart Loading commit data...
sliver_prototype_item_extent_test.dart Loading commit data...
sliver_semantics_test.dart Loading commit data...
sliver_visibility_test.dart Loading commit data...
slivers_appbar_floating_pinned_test.dart Loading commit data...
slivers_appbar_floating_test.dart Loading commit data...
slivers_appbar_pinned_test.dart Loading commit data...
slivers_appbar_scrolling_test.dart Loading commit data...
slivers_appbar_stretch_test.dart Loading commit data...
slivers_block_global_key_test.dart Loading commit data...
slivers_block_test.dart Loading commit data...
slivers_evil_test.dart Loading commit data...
slivers_keepalive_test.dart Loading commit data...
slivers_padding_test.dart Loading commit data...
slivers_protocol_test.dart Loading commit data...
slivers_test.dart Loading commit data...
slotted_render_object_widget_test.dart Loading commit data...
snapshot_widget_test.dart Loading commit data...
spacer_test.dart Loading commit data...
spell_check_test.dart Loading commit data...
stack_test.dart Loading commit data...
state_setting_in_scrollables_test.dart Loading commit data...
stateful_component_test.dart Loading commit data...
stateful_components_test.dart Loading commit data...
states.dart Loading commit data...
status_transitions_test.dart Loading commit data...
syncing_test.dart Loading commit data...
table_test.dart Loading commit data...
tap_region_test.dart Loading commit data...
test_border.dart Loading commit data...
test_widgets.dart Loading commit data...
text_golden_test.dart Loading commit data...
text_scaler_backward_compatibility_test.dart Loading commit data...
text_selection_test.dart Loading commit data...
text_selection_toolbar_layout_delegate_test.dart Loading commit data...
text_semantics_test.dart Loading commit data...
text_test.dart Loading commit data...
texture_test.dart Loading commit data...
ticker_mode_test.dart Loading commit data...
ticker_provider_test.dart Loading commit data...
title_test.dart Loading commit data...
tracking_scroll_controller_test.dart Loading commit data...
transform_test.dart Loading commit data...
transformed_scrollable_test.dart Loading commit data...
transitions_test.dart Loading commit data...
tree_shape_test.dart Loading commit data...
tween_animation_builder_test.dart Loading commit data...
two_dimensional_scroll_view_test.dart Loading commit data...
two_dimensional_utils.dart Loading commit data...
two_dimensional_viewport_test.dart Loading commit data...
undo_history_test.dart Loading commit data...
unique_widget_test.dart Loading commit data...
value_listenable_builder_test.dart Loading commit data...
view_test.dart Loading commit data...
visibility_test.dart Loading commit data...
widget_inspector_structure_error_test.dart Loading commit data...
widget_inspector_test.dart Loading commit data...
widget_inspector_test_utils.dart Loading commit data...
widget_span_test.dart Loading commit data...
wrap_test.dart Loading commit data...