Pestañas en Flutter

Introducción

Flutter nos proporciona en su API una forma muy simple de presentar pestañas en nuestra aplicación que reaccionan a su pulsación presentando un contenido u otro. Empezamos!!!

En primer lugar vamos a describir teóricamente los elementos necesarios y finalizaremos con un ejemplo muy simple para verlo en la práctica. Este ejemplo consistirá en dos pestañas etiquetadas con un icono que mostrarán un texto u otro.

Elementos

Los elementos necesarios son:

1. TabController
2. TabBar
3. TabBarView

TabBarView contiene los contenidos a mostrar por las pestañas. Es el parámetro del tipo List children.

TabBar contiene las etiquetas de las pestañas (tipicamente textos o iconos) en el parámetro del tipo List tabs. Generalmente su contenedor es un tipo AppBar.bottom.

TabController coordina el manejo de las pestañas y coordinación de elementos TabBar y TabBarView descritos. Generalmente no usaremos la clase TabController directamente sino que usaremos la subclase DefaultTabController.. Los parámetros de construcción relevantes son length con el número de pestañas a mostrar y child con el widget contenedor de los elementos TabBar y TabBarView.

Ejemplo

import 'package:flutter/material.dart'; void main() => runApp(TabApp()); class TabApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp(home: Tab()); } } class Tab extends StatefulWidget { @override State<StatefulWidget> createState() { return TabState(); } } class TabState extends State<Tab> { @override Widget build(BuildContext context) { return DefaultTabController( length: 2, child: Scaffold( appBar: AppBar( title: Text('Tabs, Tabs, Tabs...'), bottom: TabBar( tabs: [ Icon(Icons.call), Icon(Icons.call_end), ], ), ), body: TabBarView(children: [ Center(child: Text('Llamar')), Center(child: Text('Colgar')) ]))); } }