Одним из вариантов организации меню в приложении, является организация «табов», которые могут располагаться как внизу экрана, так и вверху. Например что-то вроде:
Для начала создадим отдельную функцию отрисовки табов:
class _MainPageState extends State < MainPage > { // _ впереди класса, означает чтоб скрыть доступ из другх файлов
final scaffoldKey = GlobalKey < ScaffoldState > ( ) ;
TabBar createTabBar ( ) {
return TabBar (
tabs : [
Row ( children : [ Icon ( Icons . ac_unit ) , SizedBox ( width : 5 ) , Text ( "Датчики" ) ] ) ,
Row ( children : [ Icon ( Icons . adjust ) , SizedBox ( width : 5 ) , Text ( "Реле" ) ] ) ,
Row ( children : [ Icon ( Icons . add_to_queue ) , SizedBox ( width : 5 ) , Text ( "Свет" ) ] ) ,
Row ( children : [ Icon ( Icons . accessibility_sharp ) , SizedBox ( width : 5 ) , Text ( "Комфорт" ) ] ) ,
] ,
isScrollable : true ,
) ;
}
isScrollable — отвечает за плавное переключение табов. Если эффект анимации не нужен — можно отключить.
Далее главный виджет:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@ override
Widget build ( BuildContext context ) {
EdgeInsets a2 ; EdgeInsetsDirectional a ;
return DefaultTabController (
length : 4 , // количество табов
child : Scaffold (
appBar : AppBar (
bottom : createTabBar ( ) , // функция - построитель табов
title : Text ( "Усадьба Мальгино" ) ,
) ,
body : TabBarView (
children : [
Text ( "1" ) ,
Text ( "2" ) ,
Text ( "3" ) ,
Text ( "4" ) ,
]
)
)
) ;
При отрисовке в методе TabBar можно использовать следующие настройки:
isScrollable = true/false = плавный скроллинг
padding = отступы
indicatorColor = цвет подсветки
indicatorWeight = 2.0 = толщина подчёркивания
indicatorPadding = EdgeInsets.zero = отступы подчёркивания
indicatorSize = размер чёрточки
labelColor = цвет текста таба
labelStyle = стиль текста таба
labelPadding = отступы между метками
unselectedLabelColor = цвет не выделенного таба
unselectedLabelStyle = стиль не выделенного таба
onTap = действие при выборе
