Flutter – Widget TabView

Hay muchas aplicaciones en las que a menudo te has encontrado con pestañas. Las pestañas son un patrón común en las aplicaciones. Están situados en la parte superior de la aplicación, debajo de la barra de la aplicación. Así que hoy vamos a crear nuestra propia aplicación con pestañas.

Tabla de contenido:

• Configuración del proyecto
• Código
• Conclusión

Configuración del proyecto:

Puede crear un nuevo proyecto o un nuevo archivo en su proyecto existente. 

No necesitamos ninguna otra dependencia.

Código:

Necesitamos un TabController para controlar las pestañas de nuestra aplicación. Aquí, en este tutorial, usaremos DefaultTabController porque es el más simple y accesible para todos los descendientes. 

DefaultTabController se utiliza como el hogar de MaterialApp. 

Así que en el archivo main.dart:

import 'package:flutter/material.dart';
  
void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
    
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TabView Tutorial GFG',
      theme: ThemeData(
          
        primarySwatch: Colors.green,
      ),
      home: HomePage(),
    );
  }
}
class HomePage extends StatelessWidget {
  const HomePage({ Key? key }) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: length, 
      child: child,      
    );
  }
}

Entonces, como puede ver, debemos proporcionar dos campos, uno es la longitud y el otro es un niño . Estos son campos obligatorios.

1. longitud: Número de pestañas
2. niño: el widget que desea mostrar

Ahora quiero 3 pestañas, así que estoy proporcionando longitud con 3. Además, el niño obviamente será Scaffold porque es necesario.

DefaultTabController(
  length: 3,
  child: Scaffold(
    appBar: AppBar(
      title: Text("GeeksForGeeks"),
      bottom: TabBar(
        tabs: [],
      ),
    ),
    body: TabBarView(
      children: [],
    ),
  ),
);

Aquí puede ver dos nuevos widgets, TabBar y TabBarView.

• TabBar: se utiliza para mostrar la vista superior de las pestañas o, más específicamente, muestra el contenido de la pestaña.
• TabBarView: Se utiliza para mostrar el contenido cuando se presiona una pestaña.

Así que mostraremos iconos en la barra de pestañas. 

Nota: Aquí debe mostrar 3 pestañas o de lo contrario obtendrá un error.

TabBar(
  tabs: [
    Tab(
      icon: Icon(Icons.home_filled),
      text: "Home",
    ),
    Tab(
      icon: Icon(Icons.account_box_outlined),
      text: "Account",
    ),
    Tab(
      icon: Icon(Icons.alarm),
      text: "Alarm",
    ),
  ],
),

Dentro del widget TabBarView, necesitamos tres widgets secundarios, y pueden ser cualquier cosa.

Así que mostraré solo íconos por la simplicidad del tutorial.

TabBarView(
  children: [
    Center(
      child: Icon(Icons.home),
    ),
    Center(
      child: Icon(Icons.account_circle),
    ),
    Center(
      child: Icon(Icons.alarm),
    )
  ],
),

Ahora ejecuta la aplicación.

Aplicación TabBarView

Ahora, si tiene muchas pestañas, como 5 o 6, podemos usar el campo isScrollable en TabView. Si es falso , reduce todas las pestañas dentro de la pantalla y si es verdadero , hace pestañas desplazables.

Puede cambiar la longitud a 6 y duplicar todas las pestañas en TabBar y TabBarView.

DefaultTabController(
  length: 6,
  child: Scaffold(
    appBar: AppBar(
      title: Text("GeeksForGeeks"),
      bottom: TabBar(
        isScrollable: true,
        tabs: [
          Tab(
            icon: Icon(Icons.home_filled),
            text: "Home",
          ),
          Tab(
            icon: Icon(Icons.account_box_outlined),
            text: "Account",
          ),
          Tab(
            icon: Icon(Icons.alarm),
            text: "Alarm",
          ),
          Tab(
            icon: Icon(Icons.home_filled),
            text: "Home",
          ),
          Tab(
            icon: Icon(Icons.account_box_outlined),
            text: "Account",
          ),
          Tab(
            icon: Icon(Icons.alarm),
            text: "Alarm",
          ),
        ],
      ),
    ),
    body: TabBarView(
      children: [
        Center(
          child: Icon(Icons.home),
        ),
        Center(
          child: Icon(Icons.account_circle),
        ),
        Center(
          child: Icon(Icons.alarm),
        ),
        Center(
          child: Icon(Icons.home),
        ),
        Center(
          child: Icon(Icons.account_circle),
        ),
        Center(
          child: Icon(Icons.alarm),
        )
      ],
    ),
  ),
);

Ahora ejecuta la aplicación de nuevo.

Más pestañas Aplicación TabView

Ahora borre el código duplicado. Aquí está el código completo.

import 'package:flutter/material.dart';
  
void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
    
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TabView Tutorial GFG',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: HomePage(),
    );
  }
}
  
class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: Text("GeeksForGeeks"),
          bottom: TabBar(
            tabs: [
              Tab(
                icon: Icon(Icons.home_filled),
                text: "Home",
              ),
              Tab(
                icon: Icon(Icons.account_box_outlined),
                text: "Account",
              ),
              Tab(
                icon: Icon(Icons.alarm),
                text: "Alarm",
              ),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            Center(
              child: Icon(Icons.home),
            ),
            Center(
              child: Icon(Icons.account_circle),
            ),
            Center(
              child: Icon(Icons.alarm),
            )
          ],
        ),
      ),
    );
  }
}

Conclusión

Así que aprendimos un nuevo widget TabView y creamos una aplicación muy básica. Pero podemos crear hermosas aplicaciones con este widget muy simple y fácil. Viene con todas las animaciones y ajustes necesarios, lo que facilita la configuración de una aplicación con pestañas. Si tienes alguna duda comenta abajo.