Trouver l’index d’un TabController dans Flutter
Connaître l’index du TabController sur lequel a cliqué un utilisateur peut parfois être utile. Par exemple, vous pourriez en avoir besoin pour changer la couleur ou la forme de l’icon actif.
Pour cela, on va ajouter un listener à notre TabController, pour detecter un changement d’onglet et dans le même temps garder l’index de celui-ci dans une variable de type int.
Voici un exemple très simple que vous pouvez réutiliser pour votre propre application :
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(home: TabControllerExample()));
class TabControllerExample extends StatefulWidget {
@override
_TabControllerExampleState createState() => _TabControllerExampleState();
}
class _TabControllerExampleState extends State<TabControllerExample>
with SingleTickerProviderStateMixin {
TabController? _tabController;
int _activeIndex = 0;
@override
void initState() {
super.initState();
// Initialiser le TabController
_tabController = TabController(vsync: this, length: 3);
_tabController!.addListener(() {
setState(() {
_activeIndex = _tabController!.index;
print("L'index est actuellement $_activeIndex");
});
});
}
@override
void dispose() {
_tabController?.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Exemple TabController'),
bottom: TabBar(
controller: _tabController,
tabs: [
Tab(
icon:
Icon(_activeIndex == 0 ? Icons.home : Icons.home_outlined)),
Tab(
icon: Icon(
_activeIndex == 1 ? Icons.search : Icons.search_outlined)),
Tab(
icon: Icon(_activeIndex == 2
? Icons.settings
: Icons.settings_outlined)),
],
),
),
body: TabBarView(
controller: _tabController,
children: [
Center(child: Text('Page Accueil')),
Center(child: Text('Page Recherche')),
Center(child: Text('Page Paramètres')),
],
),
);
}
}
