|
import 'package:flutter/material.dart'; |
|
|
|
class TabBarWithBottomNavigationScreen extends StatefulWidget { |
|
|
|
@override |
|
_TabBarWithBottomNavigationScreenState createState() => _TabBarWithBottomNavigationScreenState(); |
|
} |
|
|
|
class _TabBarWithBottomNavigationScreenState extends State<TabBarWithBottomNavigationScreen> with SingleTickerProviderStateMixin { |
|
|
|
int _currentIndex = 1; |
|
bool _isShowTab = false; |
|
TabController _tabController; |
|
|
|
final List<String> _titles = [ |
|
"Page 1", |
|
"Page 2", |
|
"Page 3" |
|
]; |
|
|
|
final List<Widget> _pages = [ |
|
Container(color: Colors.orange), |
|
Container(color: Colors.yellow), |
|
Container() |
|
]; |
|
|
|
@override |
|
void initState() { |
|
super.initState(); |
|
_tabController = TabController(length: 2, vsync: this); |
|
} |
|
|
|
@override |
|
Widget build(BuildContext context) { |
|
|
|
return Scaffold( |
|
body: DefaultTabController( |
|
length: 2, |
|
child: Scaffold( |
|
appBar: _isShowTab ? AppBar( |
|
title: Text(_titles[_currentIndex], style: TextStyle(color: Colors.red), textAlign: TextAlign.start,), |
|
iconTheme: IconThemeData(color: Colors.red), |
|
backgroundColor: Colors.white, |
|
bottom: TabBar( |
|
controller: _tabController, |
|
labelColor: Colors.red, |
|
tabs: <Widget>[ |
|
Tab(text: "Page 3-1", icon: Icon(Icons.fastfood),), |
|
Tab(text: "Page 3-2", icon: Icon(Icons.phone_android),) |
|
], |
|
), |
|
) : AppBar( |
|
title: Text(_titles[_currentIndex], style: TextStyle(color: Colors.red), textAlign: TextAlign.start,), |
|
iconTheme: IconThemeData(color: Colors.red), |
|
backgroundColor: Colors.white, |
|
), |
|
body: _isShowTab ? getTabBarPages() : _pages[_currentIndex], |
|
bottomNavigationBar: BottomNavigationBar( |
|
onTap: onTabTapped, |
|
currentIndex: _currentIndex, |
|
backgroundColor: Colors.white, |
|
items: [ |
|
BottomNavigationBarItem( |
|
icon: Icon(Icons.business, color: Colors.grey,), |
|
activeIcon: Icon(Icons.business, color: Colors.red,), |
|
title: Text("Page 1"), |
|
), |
|
BottomNavigationBarItem( |
|
icon: Icon(Icons.card_giftcard, color: Colors.grey,), |
|
activeIcon: Icon(Icons.card_giftcard, color: Colors.red,), |
|
title: Text("Page 2") |
|
), |
|
BottomNavigationBarItem( |
|
icon: Icon(Icons.list, color: Colors.grey,), |
|
activeIcon: Icon(Icons.list, color: Colors.red,), |
|
title: Text("Page 3"), |
|
), |
|
] |
|
), |
|
), |
|
), |
|
); |
|
} |
|
|
|
onTabTapped(int index) { |
|
setState(() { |
|
_currentIndex = index; |
|
if(index == 2) |
|
_isShowTab = true; |
|
else |
|
_isShowTab = false; |
|
}); |
|
} |
|
|
|
Widget getTabBarPages() { |
|
return TabBarView( |
|
controller: _tabController, |
|
children: <Widget>[ |
|
Container(color: Colors.green,), |
|
Container(color: Colors.blue) |
|
], |
|
); |
|
} |
|
|
|
} |