Existem muitos aplicativos nos quais você costuma encontrar guias. As guias são um padrão comum nos aplicativos. Eles estão situados na parte superior do aplicativo, abaixo da barra de aplicativos. Então, hoje vamos criar nosso próprio aplicativo com guias.

Índice:

• Configuração do Projeto
• Código
• Conclusão

Configuração do projeto:

Você pode criar um novo projeto ou um novo arquivo em seu projeto existente. 

Não precisamos de nenhuma outra dependência.

Código:

Precisamos de um TabController para controlar as guias do nosso aplicativo. Aqui neste tutorial, vamos usar DefaultTabController porque é o mais simples e acessível a todos os descendentes. 

DefaultTabController é usado como a casa do MaterialApp. 

Portanto, no arquivo 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,      
    );
  }
}

Como você pode ver, precisamos fornecer dois campos, um é o comprimento e o outro é um filho . Esses são campos obrigatórios.

1. comprimento: número de guias
2. filho: o widget que você deseja exibir

Agora eu quero 3 guias, então estou fornecendo comprimento com 3. Além disso, o filho será obviamente o Scaffold porque é necessário.

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

Aqui você pode ver dois novos widgets, TabBar e TabBarView.

• TabBar: é usado para exibir a vista superior das guias ou, mais especificamente, para exibir o conteúdo da guia.
• TabBarView: é usado para exibir o conteúdo quando uma guia é pressionada.

Portanto, exibiremos ícones no TabBar. 

Observação: aqui você deve exibir 3 guias ou obterá um erro.

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 do widget TabBarView, precisamos de três widgets filhos e eles podem ser qualquer coisa.

Portanto, exibirei apenas ícones pela simplicidade do tutorial.

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

Agora execute o aplicativo.

Aplicativo TabBarView

Agora, se você tiver muitas guias, como 5 ou 6, podemos usar o campo isScrollable no TabView. Se for falso , ele encolhe todas as guias na tela e se for verdadeiro torna as guias roláveis.

Você pode alterar o comprimento para 6 e duplicar todas as guias em TabBar e 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),
        )
      ],
    ),
  ),
);

Agora execute o aplicativo novamente.

Mais guias TabView App

Agora limpe o código duplicado. Aqui está o 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),
            )
          ],
        ),
      ),
    );
  }
}

Conclusão

Então, aprendemos um novo widget TabView e criamos um aplicativo muito básico. Mas podemos fazer aplicativos bonitos com este widget muito simples e fácil. Ele vem com todas as animações e ajustes necessários que tornam as configurações muito fáceis de um aplicativo com guias. Se você tiver alguma dúvida comente abaixo.