Виджет Tab

Виджет Tab описывает одну вкладку в TabBar. Текст передают в text или произвольный виджет в child, иконку - в icon. Порядок Tab в списке tabs совпадает со страницами TabBarView.

Синтаксис

Tab(
	text: 'abcde',
	icon: Icon(Icons.home),
)

Параметры

Параметр	Описание
`text`	Подпись под иконкой или вместо неё.
`icon`	Иконка вкладки.
`child`	Произвольный виджет вместо text и icon.

Пример

Давайте соберём TabBar из двух Tab:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: DefaultTabController(
				length: 2,
				child: Scaffold(
					appBar: AppBar(
						bottom: TabBar(
							tabs: [
								Tab(text: 'abcde'),
								Tab(icon: Icon(Icons.settings)),
							],
						),
					),
					body: TabBarView(
						children: [
							Center(child: Text('12345')),
							Center(child: Text('abcde')),
						],
					),
				),
			),
		),
	);
}

Вверху две вкладки, при переключении меняется текст в теле.

Пример

Давайте сделаем вкладку только с текстом:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: DefaultTabController(
				length: 1,
				child: Scaffold(
					appBar: AppBar(
						bottom: TabBar(tabs: [Tab(text: '12345')]),
					),
					body: TabBarView(
						children: [Center(child: Text('abcde'))],
					),
				),
			),
		),
	);
}

Одна вкладка с подписью '12345' и экраном 'abcde'.

Смотрите также

виджет TabBar,
куда передают список Tab
виджет TabBarView,
который показывает содержимое выбранной вкладки
виджет DefaultTabController,
который создаёт TabController для TabBar
класс TabController,
которым переключают вкладки вручную