I can't have both TabBarView and BottomNavigationBar control what displays at the body of my Scaffold. With this code, either TabBarView has control or BottomNavigationBar.
I want to be able to scroll sideways between ALL FOUR pages as well as pick HOME and FAVORITES to control what displays on the screen.
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Traveler"),
bottom: new TabBar(controller: controller, tabs: <Tab>[
new Tab(text: "NEW"),
new Tab(text: "HOTELS"),
new Tab(text: "FOOD"),
new Tab(text: "FUN"),
]),
),
body: new Stack(
children: <Widget>[
new Offstage(
offstage: index != 0,
child: new TickerMode(
enabled: index == 0,
child: new Material(child: new NewPage()),
),
),
new Offstage(
offstage: index != 1,
child: new TickerMode(
enabled: index == 1,
child: new Material(child: new HotelsPage()),
),
),
new TabBarView(controller: controller, children: <Widget>[
new NewPage(),
new HotelsPage(),
new FoodPage(),
new FunPage(),
]),
],
),
bottomNavigationBar: new BottomNavigationBar(
currentIndex: index,
onTap: (int index) {
setState(() {
this.index = index;
});
},
items: <BottomNavigationBarItem>[
new BottomNavigationBarItem(
icon: new Icon(Icons.home),
title: new Text("Home"),
),
new BottomNavigationBarItem(
icon: new Icon(Icons.favorite),
title: new Text("Favorites"),
),
]),
);
}
A bottom navigation bar is a material widget that is present at the bottom of an app for selecting or navigating to different pages of the app. It is usually used in conjunction with a Scaffold, where it is provided as the Scaffold. bottomNavigationBar argument.
By default, the shape of the floating action button (FAB) in the flutter is circular and the location is bottom right floated. You can change the location and shape of the floating action button using properties in Scaffold() widget class and FloatingActionButton() widget class.
I tweaked your code a little to achieve what I think you were asking for.
You can switch between the for tabs by just clicking on the tabs or by swiping left or right. Instead of using Offstages
you can just create a new instance of the required class.
Here is a running example, I hope it helps:
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
State createState() => new MyHomePageState();
}
class MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
TabController _controller;
int _index;
@override
void initState() {
super.initState();
_controller = new TabController(length: 4, vsync: this);
_index = 0;
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Traveler"),
bottom: new TabBar(controller: _controller, tabs: <Tab>[
new Tab(text: "NEW"),
new Tab(text: "HOTELS"),
new Tab(text: "FOOD"),
new Tab(text: "FUN"),
]),
),
body: new TabBarView(
controller: _controller,
children: <Widget>[
new NewPage(_index),
new HotelsPage(_index),
new FoodPage(_index),
new FunPage(_index),
],
),
bottomNavigationBar: new BottomNavigationBar(
currentIndex: _index,
onTap: (int _index) {
setState(() {
this._index = _index;
});
},
items: <BottomNavigationBarItem>[
new BottomNavigationBarItem(
icon: new Icon(Icons.home),
title: new Text("Home"),
),
new BottomNavigationBarItem(
icon: new Icon(Icons.favorite),
title: new Text("Favorites"),
),
]),
);
}
}
class NewPage extends StatelessWidget {
final int index;
NewPage(this.index);
@override
Widget build(BuildContext context) {
return new Center(
child: new Text('NewPage, index: $index'),
);
}
}
class HotelsPage extends StatelessWidget {
final int index;
HotelsPage(this.index);
@override
Widget build(BuildContext context) {
return new Center(
child: new Text('HotelsPage, index: $index'),
);
}
}
class FoodPage extends StatelessWidget {
final int index;
FoodPage(this.index);
@override
Widget build(BuildContext context) {
return new Center(
child: new Text('FoodPage, index: $index'),
);
}
}
class FunPage extends StatelessWidget {
final int index;
FunPage(this.index);
@override
Widget build(BuildContext context) {
return new Center(
child: new Text('FunPage, index: $index'),
);
}
}
If you have any questions to this, please don't hesitate to ask.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With