Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TabBarView and BottomNavigationBar to control what displays at body of Scaffold

Tags:

flutter

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"),
          ),
        ]),
  );
}
like image 522
baksoy Avatar asked Oct 16 '17 21:10

baksoy


People also ask

What is bottomNavigationBar flutter?

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.

How do you add a button to the bottom navigation bar in flutter?

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.


1 Answers

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.

like image 136
Rainer Wittmann Avatar answered Sep 21 '22 23:09

Rainer Wittmann