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'))
            ])));
  }
}