Виджет TabBar

Виджет TabBar показывает вкладки и связан с TabController. Список вкладок передают в tabs как Tab, контроллер - в controller, если не используют DefaultTabController. TabBar часто кладут в bottom у AppBar.

Синтаксис

TabBar(
	tabs: [
		Tab(text: 'abcde'),
		Tab(text: '12345'),
	],
)

Параметры

Параметр	Описание
`tabs`	Список виджетов `Tab`, по одному на вкладку.
`controller`	`TabController` для синхронизации с `TabBarView`.
`isScrollable`	Разрешить горизонтальную прокрутку вкладок.

Пример

Давайте поставим TabBar под AppBar:

import 'package:flutter/material.dart';

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

Переключение вкладок меняет текст в TabBarView.

Пример

Давайте включим прокрутку вкладок:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: DefaultTabController(
				length: 4,
				child: Scaffold(
					appBar: AppBar(
						bottom: TabBar(
							isScrollable: true,
							tabs: [
								Tab(text: 'abcde'),
								Tab(text: '12345'),
								Tab(text: '11111'),
								Tab(text: '22222'),
							],
						),
					),
					body: TabBarView(
						children: List.generate(
							4,
							(i) => Center(child: Text('$i')),
						),
					),
				),
			),
		),
	);
}

Длинный ряд вкладок можно листать горизонтально.

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

виджет TabBarView,
который показывает страницы вкладок
виджет Tab,
которым задают подпись одной вкладки
виджет AppBar,
в bottom которого часто ставят TabBar
виджет PreferredSize,
которым задают высоту bottom у AppBar