Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save DeyvidJLira/917779f01910563f1b7efde2117660b1 to your computer and use it in GitHub Desktop.
Save DeyvidJLira/917779f01910563f1b7efde2117660b1 to your computer and use it in GitHub Desktop.
Create screen in the Flutter with TabBar in only one of the item of the bottom navigation bar.
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)
],
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment