how to add tabbar without appbar in flutter - flutter

Question

i have tried to recreate this design but failed to add TabBar and TabBarView below image inside the body .

Answer 1

Try this
class Demo extends StatefulWidget {
#override
_DemoState createState() => _DemoState();
}
class _DemoState extends State<Demo>
with TickerProviderStateMixin {
TabController _tabController;
#override
void initState() {
// TODO: implement initState
super.initState();
_tabController = new TabController(length: 2, vsync: this);
}
#override
void dispose() {
_tabController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body:Column(
children: <Widget>[
Image.asset("path"),
Container(child:
Column(
children: <Widget>[
Container(
height: 60,
margin: EdgeInsets.only(left: 60),
child: TabBar(
tabs: [
Container(
width: 70.0,
child: new Text(
'Tab1',
style: TextStyle(fontSize: 20),
),
),
Container(
width: 75.0,
child: new Text(
'Tab2',
style: TextStyle(fontSize: 20),
),
)
],
unselectedLabelColor: const Color(0xffacb3bf),
indicatorColor: Color(0xFFffac81),
labelColor: Colors.black,
indicatorSize: TabBarIndicatorSize.tab,
indicatorWeight: 3.0,
indicatorPadding: EdgeInsets.all(10),
isScrollable: false,
controller: _tabController,
),
),
Container(
height: 100,
child: TabBarView(
controller: _tabController,
children: <Widget>[
Container(
child: Text("login"),
),
Container(
child: Text("sign up"),
)
]),
))
],
),
],
)
);
}

Answer 2

You can easily create TabBar without AppBar. Just use Container as parent.
please check this.

Answer 3

Expanded(
child: DefaultTabController(
length: 3,
child: new Scaffold(
appBar: new PreferredSize(
preferredSize:
Size.fromHeight(MediaQuery.of(context).size.height),
child: new Container(
height: 50.0,
child: new TabBar(
labelColor: Colors.black,
isScrollable: true,
tabs: [
Tab(
text: "Tab 1",
),
Tab(
text: "Tab 2",
),
Tab(
text: "Tab 3",
),
],
),
),
),
body: TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
),
),
)

Answer 4

I've put on a simple example, have a look and see if it can help you:
First define a Statefull widget and add some definition regarding your tab
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
Define the state for your widget
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
TabController _tabController;
final List<Tab> tabs = [
Tab(
///Give keys so you can make it easier to retrieve content to display, if you have to read the data from a remote resource ...
key: ObjectKey(1),
text: 'Products',
),
Tab(
key: ObjectKey(2),
text: 'Feature',
),
Tab(
key: ObjectKey(3),
text: 'Shipping Info',
),
Tab(
key: ObjectKey(4),
text: 'Reviews',
),
];
///Build the widget for each tab ...
Widget _setDisplayContainer(key) {
if (key == ObjectKey(1)) {
return Text("Content for tab 1");
} else if (key == ObjectKey(2)) {
return Text("Content for tab 2");
} else if (key == ObjectKey(3)) {
return Text("Content for tab 3");
}
return Text("Content for tab 4");
}
#override
void initState() {
super.initState();
_tabController = TabController(vsync: this, length: tabs.length);
}
...
}
After this your build method should look something like this
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: Size(MediaQuery.of(context).size.width,
MediaQuery.of(context).size.height * .4),
child: SafeArea(
child: Column(
children: <Widget>[
Container(
child: Expanded(
flex: 4,
child: Stack(fit: StackFit.loose, children: <Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/car.jpeg'),
fit: BoxFit.cover,
)),
),
Container(
height: 40,
color: Colors.orangeAccent,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(Icons.arrow_back,
color: Colors.white, size: 20),
Row(
children: <Widget>[
Icon(
Icons.search,
color: Colors.white,
size: 20,
),
Icon(Icons.menu, color: Colors.white, size: 20),
],
)
],
),
),
]),
),
),
Container(
child: TabBar(
unselectedLabelColor: const Color(0xffacb3bf),
indicatorColor: Color(0xFFffac81),
labelColor: Colors.black,
indicatorSize: TabBarIndicatorSize.tab,
indicatorWeight: 3.0,
indicatorPadding: EdgeInsets.all(10),
tabs: tabs,
controller: _tabController,
labelStyle: TextStyle(color: Colors.orangeAccent, fontSize: 12),
onTap: (index) {},
),
),
],
),
),
),
body: TabBarView(
controller: _tabController,
children:
tabs.map((tab) => _setDisplayContainer(tab.key)).toList()));
}
Hope this helps.