Nel post precedente abbiamo visto due modi diversi per gestire la navigazione tra pagine in Flutter. Oggi vedremo come realizzare una tipica barra di navigazione posta sulla parte inferire dello schermo.
Il widget BottomNavigationBar
Inizializziamo un nuovo progetto e sostituiamo il codice standard con questo.import 'package:flutter/material.dart';
import './pages/home.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Flutter Demo',
home: Home(),
);
}
}
Creiamo quindi una sottocartella pages (in cui potremmo mettere tutte le pagine del nostro progetto, anche se in questo esempio useremo un solo file) e dentro questa, il file home.dart con il seguente codice
import 'package:flutter/material.dart';
class Home extends StatefulWidget {
const Home({Key? key}) : super(key: key);
@override
State<Home> createState() => _HomeState();
}
class _HomeState extends State<Home> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter demo'),
),
body: const Center(
// in the middle of the parent.
child: Text('Home page'),
),
);
}
}
In questo modo abbiamo creato una semplice applicazione che mostra una sola pagina e un testo.
Ora modifichiamo home.dart e allo Scaffold della pagina, aggiungiamo il widget bottomNavigationBar:
return Scaffold(
appBar: AppBar(
title: const Text('Flutter demo'),
),
body: const Center(
// in the middle of the parent.
child: Text('Home page'),
),
bottomNavigationBar: BottomNavigationBar(
selectedItemColor: Colors.amber,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.people),
label: 'Pagina 1',
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: 'Pagina 2',
),
],
),
);
Questo widget permette di definire un titolo ed una icona per ognuno degli elementi e un colore con cui evidenziare l'elemento attivo. Per le icone , ho usato la classe Icons, scegliendo alcune icone a caso. Il risultato è una pagina come questa
int _currentIndex = 0;
una lista dei contenuti da visualizzare:
static List<Widget> pages = <Widget>[
const Center(
child: Text('Home page'),
),
const Center(
child: Text('Pagina 1'),
),
const Center(
child: Text('Pagina 2'),
),
];
void _onItemTapped(int index) {
setState(() {
_currentIndex = index;
});
}
Ora, sarà sufficiente sostituire il body della pagina con questo codice:
body: pages[_currentIndex],
e modificare il bottomNavigationBar per gestire il valore corrente e gli eventi per ottenere il risultato desiderato:
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,
onTap: _onItemTapped,
...
Se facciamo girare il nostro codice, potremo navigare sui contenuti, cliccando su ognuna delle icone delle barra inferiore:
Come per gli articoli precedenti potete trovare il codice completo tra le mie repo GitHub: https://github.com/luigimicco/flutter_bottomnavigationbar,
Buon lavoro !
Commenti
Posta un commento