[Bug] Back button not working when Navigating to a Page with PlutoGrid on Android

[KaushikGupta007]

Description:

I am experiencing an issue with the PlutoGrid widget in my Flutter application. When I navigate to a page containing PlutoGrid from the home page, phone navigation(back button or swipe back) on Android devices does not work. Only AppBar back arrow works. I would like to request assistance in resolving this issue or understanding if there is a workaround.

Steps to Reproduce:

1) Create a new Flutter Project. 2) Add the pluto_grid package to pubspec.yaml. 3) Create a home page with a text form field and button to navigate to another page containing PlutoGrid. 4) Run the app on an Android device. 5) Click on Text Form Field 6) Navigate from the home page to the page with PlutoGrid by pressing button. 6) Try to swipe back to the home page using the Android system gesture or use Android back button.

Expected Behavior:

The swipe back gesture or back button should navigate back to the home page.

Actual Behavior:

The swipe back gesture is disabled and does not navigate back to the home page

Code Sample:

import 'package:flutter/material.dart';
import 'package:pluto_grid/pluto_grid.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Enable Back with PlutoGrid',
      initialRoute: '/',
      routes: {
        '/': (context) => const HomePage(),
        '/plutoGridPage': (context) => PlutoGridPage(),
      },
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home Page'),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          TextFormField(
            decoration: const InputDecoration(labelText: "Back Not Working", hintText: "Back Not Working"),
            onChanged: (val){},
          ),
          const SizedBox(height: 20,),
          ElevatedButton(onPressed: (){
            Navigator.pushNamed(context, "/plutoGridPage");
          }, child: const Text("Pluto Grid Page"))
        ],
      ),
    );
  }
}

class PlutoGridPage extends StatelessWidget {

  PlutoGridPage({super.key});

  // Define columns for PlutoGrid
  final List<PlutoColumn> columns = [
    PlutoColumn(
      title: 'Column 1',
      field: 'column1',
      type: PlutoColumnType.text(),
    ),
    PlutoColumn(
      title: 'Column 2',
      field: 'column2',
      type: PlutoColumnType.text(),
    ),
  ];

  // Define rows for PlutoGrid
  final List<PlutoRow> rows = [
    PlutoRow(
      cells: {
        'column1': PlutoCell(value: 'Row 1 Column 1'),
        'column2': PlutoCell(value: 'Row 1 Column 2'),
      },
    ),
    PlutoRow(
      cells: {
        'column1': PlutoCell(value: 'Row 2 Column 1'),
        'column2': PlutoCell(value: 'Row 2 Column 2'),
      },
    ),
  ];

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: const Text('PlutoGrid Page'),
      ),
      body: PlutoGrid(
        mode: PlutoGridMode.selectWithOneTap,
        columns: columns,
        rows: rows,
      ),
    );
  }
}

Explanation 1) Define Routes: In the MaterialApp widget, the routes parameter is used to define the named routes. The initial route (/) is set to the HomePage.

2) Navigation: In the HomePage widget, the button's onPressed callback uses Navigator.pushNamed(context, '/plutoGridPage') to navigate to the PlutoGridPage.

3) PlutoGridPage: This page contains the PlutoGrid.

Video

https://github.com/bosskmk/pluto_grid/assets/129219828/ce31e08c-bc1e-4d06-bb6e-9a6afaa0cf53

Additional Context:

Please let me know if there is any additional information required or if there is a known workaround for this issue. Thank you for your assistance!