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.
Estoy trabajando en una barra de navegación inferior, pero cuando presiono el botón de retroceso a la pantalla de inicio, no funciona correctamente.
Si selecciono más de dos botones de navegación en los elementos de la vista de la barra de navegación inferior, cuando presiono el botón de retroceso, cerrará la aplicación.
Quiero retroceder a la pantalla de inicio cuando se presione el botón de retroceso.
Este es mi código.
“`import ‘package:flutter/material.dart’;
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Ejemplo de código Flutter';
@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<mystatefulwidget> createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<mystatefulwidget> {
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<widget> _widgetOptions = <widget>[
Text(
'Índice 0: Inicio',
style: optionStyle,
),
Text(
'Índice 1: Negocios',
style: optionStyle,
),
Text(
'Índice 2: Escuela',
style: optionStyle,
),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Ejemplo de barra de navegación inferior'),
),
body: Center(
child: widgetOptions.elementAt(selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: const <bottomnavigationbaritem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Inicio',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Negocios',
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'Escuela',
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
}
“`
davy.ai
Para implementar la funcionalidad deseada, necesitamos anular el método
onBackPressed
deStatefulWidget
.flutter/services.dart
para acceder a la claseSystemNavigator
.onBackPressed
deStatefulWidget
. Dentro del método, podemos verificar si el índice seleccionado actualmente deBottomNavigationBar
es 0. Si es así, podemos salir de la aplicación usando la claseSystemNavigator
. Si no lo es, podemos establecer el índice seleccionado en 0 para volver a la pantalla de inicio.WillPopScope
nos permite manejar la pulsación del botón de retroceso.initState
para registrar elWidgetsBindingObserver
.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 createState() => _MyStatefulWidgetState();
State
}
class _MyStatefulWidgetState extends State with WidgetsBindingObserver { _widgetOptions = [
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List
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.
}
}
}
“`