CODEWITHSUNDEEP
fluttergesture
Giulia Santoiemma
Giulia Santoiemma

Reputation: 312

How to prevent app from closing on swipe back

In a screen of my flutter app I have some buttons that allow me to open new pages, created with the following code:

@override
Widget build(BuildContext context) {
  return ElevatedButton.icon(
    onPressed: () {
      Navigator.of(context).push(
        MaterialPageRoute(
          builder: (BuildContext context) {
            return Scaffold(
              appBar: AppBar(title: const Text("Back Swipe")),
              body: const Center(
                child: SizedBox(),
              ),
            );
          },
        ),
      );
    },
    icon: const Icon(Icons.sunny),
    label: const Text("Hello"),
  );
}

The problem is that by doing so, once I enter the subpage, to go back I have to click on the back button.

If instead I use the back swipe (from left or right) the app closes.

Adding the rootNavigator: true parameter like this:

Navigator.of(context, rootNavigator: true).push(

the back swipe works and I go back, but using this parameter, the NavigationBar disappears, and I need it to stay.

How can I solve it? Thanks in advance

Upvotes: 0

Views: 287

Answers (4)

Giulia Santoiemma
Giulia Santoiemma

Reputation: 312

I finally figured out how to fix this problem!

It should be added:

pageTransitionsTheme: const PageTransitionsTheme(
  builders: <TargetPlatform, PageTransitionsBuilder>{
    // Set the predictive back transitions for Android.
    TargetPlatform.android: PredictiveBackPageTransitionsBuilder(),
  },
),

inside ThemeData, as explained on predictive-back page

Upvotes: 0

albert
albert

Reputation: 212

You can wrap the Scaffold with PopScope and make the canPop to false

return PopScope(
  canPop: false,
  child: Scaffold(
    // Your app's content
  ),
);

Upvotes: 0

Jayswal Viraj
Jayswal Viraj

Reputation: 114

You Can try this package:swipeable_page_route: ^0.4.4

Orelse

In Flutter, you can implement a swipe-to-change-page functionality using the PageView widget. Here's an example of how to achieve this:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SwipeToChangePage(),
    );
  }
}

class SwipeToChangePage extends StatelessWidget {
  final PageController _controller = PageController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Swipe to Change Page")),
      body: PageView(
        controller: _controller,
        children: <Widget>[
          Center(child: Text("Page 1", style: TextStyle(fontSize: 24))),
          Center(child: Text("Page 2", style: TextStyle(fontSize: 24))),
          Center(child: Text("Page 3", style: TextStyle(fontSize: 24))),
        ],
      ),
    );
  }
}

Explanation:

The PageView widget allows horizontal swiping between pages.

The PageController is used to manage and control the pages programmatically if needed.

Each page is represented as a widget inside the children property of the PageView.

You can customize the PageView further by adding indicators, animations, or custom gestures if needed.

Upvotes: 0

iko
iko

Reputation: 21

You can use leading and automaticallyImplyLeading properties of the AppBar:

Scaffold(
    appBar: AppBar(
      automaticallyImplyLeading: false,
      leading: BackButton(
          onPressed: () => doSomething()),
    ),
    body: Text('Hello')
  )

In this way you can choose what happens when you click back button.

Upvotes: 0

Related Questions