Cómo manejar la barra de navegación inferior de Flutter cuando se presiona el botón de retroceso para volver a la pantalla de inicio.

Answer

1. 

   davy.ai

   June 10, 2023 at 6:17 pm

   Para implementar la funcionalidad deseada, necesitamos anular el método onBackPressed de StatefulWidget.

   1. Primero, debemos agregar una referencia a flutter/services.dart para acceder a la clase SystemNavigator.

   import 'package:flutter/services.dart';
   

   1. Luego, debemos anular el método onBackPressed de StatefulWidget. Dentro del método, podemos verificar si el índice seleccionado actualmente de BottomNavigationBar es 0. Si es así, podemos salir de la aplicación usando la clase SystemNavigator. Si no lo es, podemos establecer el índice seleccionado en 0 para volver a la pantalla de inicio.

   @override
     Future<bool> onBackPressed() async {
       if (_selectedIndex == 0) {
         return await SystemNavigator.pop();
       } else {
         setState(() {
           _selectedIndex = 0;
         });
         return false;
       }
     }
   

   1. Finalmente, debemos agregar un nuevo mixin a nuestra clase de widget. WillPopScope nos permite manejar la pulsación del botón de retroceso.

   class _MyStatefulWidgetState extends State<mystatefulwidget> with WidgetsBindingObserver {
   

   1. También debemos agregar un observador en nuestro método initState para registrar el WidgetsBindingObserver.

   @override
   void initState() {
     super.initState();
     WidgetsBinding.instance!.addObserver(this);
   }
   

   Ahora, cuando ejecutamos la aplicación y seleccionamos varios elementos de navegación en BottomNavigationBar, al presionar el botón de retroceso volveremos a la pantalla de inicio en lugar de salir de la aplicación.

   Aquí está el código actualizado con la solución implementada:

   “`dart
   import ‘package:flutter/material.dart’;
   import ‘package:flutter/services.dart’;

   void main() => runApp(const MyApp());

   class MyApp extends StatelessWidget {
   const MyApp({Key? key}) : super(key: key);

   static const String _title = ‘Flutter Code Sample’;

   @override
   Widget build(BuildContext context) {
   return const MaterialApp(
   title: _title,
   home: MyStatefulWidget(),
   );
   }
   }

   class MyStatefulWidget extends StatefulWidget {
   const MyStatefulWidget({Key? key}) : super(key: key);

   @override
   State createState() => _MyStatefulWidgetState();
   }

   class _MyStatefulWidgetState extends State with WidgetsBindingObserver {
   int _selectedIndex = 0;
   static const TextStyle optionStyle =
   TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
   static const List _widgetOptions = [
   Text(
   ‘Index 0: Home’,
   style: optionStyle,
   ),
   Text(
   ‘Index 1: Business’,
   style: optionStyle,
   ),
   Text(
   ‘Index 2: School’,
   style: optionStyle,
   ),
   ];

   void _onItemTapped(int index) {
   setState(() {
   _selectedIndex = index;
   });
   }

   @override
   Widget build(BuildContext context) {
   return WillPopScope(
   onWillPop: onBackPressed,
   child: Scaffold(
   appBar: AppBar(
   title: const Text(‘BottomNavigationBar Sample’),
   ),
   body: Center(
   child: _widgetOptions.elementAt(_selectedIndex),
   ),
   bottomNavigationBar: BottomNavigationBar(
   items: const [
   BottomNavigationBarItem(
   icon: Icon(Icons.home),
   label: ‘Home’,
   ),
   BottomNavigationBarItem(
   icon: Icon(Icons.business),
   label: ‘Business’,
   ),
   BottomNavigationBarItem(
   icon: Icon(Icons.school),
   label: ‘School’,
   ),
   ],
   currentIndex: _selectedIndex,
   selectedItemColor: Colors.amber[800],
   onTap: _onItemTapped,
   ),
   ),
   );
   }

   Future onBackPressed() async {
   if (_selectedIndex == 0) {
   return await SystemNavigator.pop();
   } else {
   setState(() {
   _selectedIndex = 0;
   });
   return false;
   }
   }

   @override
   void initState() {
   super.initState();
   WidgetsBinding.instance!.addObserver(this);
   }

   @override
   void dispose() {
   WidgetsBinding.instance!.removeObserver(this);
   super.dispose();
   }

   @override
   void didChangeAppLifecycleState(AppLifecycleState state) {
   if (state == AppLifecycleState.resumed) {
   // La aplicación ha vuelto al primer plano.
   } else {
   // La aplicación ha pasado al segundo plano.
   }
   }
   }
   “`

Comments are closed.